Little color composition stikes animation
Coding Preferences
HTML
Javascript
Validations
(Errors from your JS or Pre-Processors code)
Little color composition stikes animation
CSSDeck G+
\n\n",
"css": "html, body{\n height: 100%;\n}\n\nbody{\n font-family: 'Ubuntu Mono';\n background-color: #111;\n color: #eee;\n}\n\nfooter {\n position: absolute;\n bottom: 0;\n padding: 10px;\n}\n\n#canvas {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n \n z-index: -1;\n margin: auto;\n \n}\n",
"js": "\nminScreenSize = (Math.min window.innerWidth, window.innerHeight) / 4\nw = minScreenSize \nh = minScreenSize\n\nslice = w / 8\n\n \ndomCanvas = document.getElementById(\"canvas\")\ndomCanvasCtx = domCanvas.getContext \"2d\"\ndomCanvas.width = w\ndomCanvas.height = h\n\n\nroundRect = (ctx, x, y, width, height, radius, fill, stroke) ->\n stroke = true if typeof stroke is \"undefined\"\n radius = 5 if typeof radius is \"undefined\"\n ctx.beginPath()\n ctx.moveTo x + radius, y\n ctx.lineTo x + width - radius, y\n ctx.quadraticCurveTo x + width, y, x + width, y + radius\n ctx.lineTo x + width, y + height - radius\n ctx.quadraticCurveTo x + width, y + height, x + width - radius, y + height\n ctx.lineTo x + radius, y + height\n ctx.quadraticCurveTo x, y + height, x, y + height - radius\n ctx.lineTo x, y + radius\n ctx.quadraticCurveTo x, y, x + radius, y\n ctx.closePath()\n ctx.stroke() if stroke\n ctx.fill() if fill\n return\n\n#\n#\n#\n\n#\n#\n#\n\nclass Layer\n constructor: (@speed, @color) ->\n \n @element = document.createElement \"canvas\"\n @element.width = w\n @element.height = h\n @ctx = @element.getContext \"2d\"\n\n clear: () ->\n @element.width = @element.width\n @ctx.translate w / 2, h / 2\n \n draw: (dt) ->\n @ctx.fillStyle = @color\n @ctx.rotate (dt / 15) * Math.PI / @speed\n roundRect @ctx, slice / -2, h / -2, slice, h, slice / 1.7, yes, no\n \n @ctx.blendOnto domCanvasCtx, 'add'\n\n#\n#\n#\n\n#\n#\n#\n\nlayers = [\n new Layer(90, '#00f')\n new Layer(60, '#0f0')\n new Layer(45, '#f00')\n]\n\n#\n#\n#\n\n#\n#\n#\n\nrender = (dt)->\n domCanvas.width = domCanvas.width\n \n for layer in layers\n layer.clear()\n layer.draw(dt)\n \n return\n\n\n(animationLoop = (dt) ->\n render(dt)\n requestAnimationFrame animationLoop\n return\n)()\n"}
,
"is_picked": true }
;
window.__default_settings = [] ;