code-girls-leipzig

Open full view…

HTML Canvas experiments

wunderseltsam
Tue, 24 Sep 2013 17:05:03 GMT

--- <!doctype html> <html> <head> <title>Your Awesome Webpage created on Tue, 24 Sep 2013 13:26:15 GMT</title> </head> <body> <canvas id="stage" width="500" height="500"></canvas> <script type="text/javascript"> var ctx = document.querySelector("#stage").getContext('2d'); var w = ctx.canvas.width, h = ctx.canvas.height; var m = 0.01; function weird() { for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(i * m, (w - i)); ctx.closePath(); ctx.stroke(); } } setInterval(function() { ctx.clearRect(0, 0, w, h); weird(); m += 0.01; }, 100); </script> </body> </html> --- Auf https://thimble.webmaker.org/ pasten und Spaß haben. :)

wunderseltsam
Tue, 24 Sep 2013 18:19:36 GMT

--- <!doctype html> <html> <head> <title>Your Awesome Webpage created on Tue, 24 Sep 2013 13:26:15 GMT</title> </head> <body> <canvas id="stage" width="500" height="500"></canvas> <script type="text/javascript"> var ctx = document.querySelector("#stage").getContext('2d'); var w = ctx.canvas.width, h = ctx.canvas.height; var cur = {x: w / 2, y: h / 2}; var diff = {x: (-0.5 + Math.random()) * 10, y: (-0.5 + Math.random()) * 10}; function move() { if (cur.x < 0 || cur.x > w) { diff.x *= -1; } else if (cur.y < 0 || cur.y > h) { diff.y *= -1; } cur = {x: cur.x + diff.x, y: cur.y + diff.y}; ctx.fillRect(cur.x, cur.y, 2, 2); } setInterval(move, 0); </script> </body> </html> ---

maweki
Wed, 25 Sep 2013 18:18:45 GMT

Um auch meinen Beitrag zu leisten: Ich habe ein CodeGirlsLeipzig Repository aufgemacht, wo ich die paar kleineren Sachen und Experimente, die ich während der Veranstaltung nebenher rumprobiere, reinpacke. Hier findet ihr, in Anlehnung an Lucas Canvas-Experimente, eine Linie, die sich immer versucht, vom Cursor wegzubewegen. https://github.com/maweki/codegirlsle/blob/master/2013-09-24/avoidCursor.html Wer Lust hat kann das auch als Anreiz nehmen, bei der nächsten Veranstaltung mit Anleitung einen gitHub-Account anzulegen und ein paar Repositories zu clonen :)