Created
December 13, 2019 20:25
-
-
Save aJamDonut/be86111f77d7da1f3b862e52b0e3dffb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"> | |
| Your browser does not support the HTML5 canvas tag.</canvas> | |
| <script> | |
| function rng(min, max) { | |
| return Math.floor(min + Math.random()*(max + 1 - min)) | |
| } | |
| var c = document.getElementById("myCanvas"); | |
| var ctx = c.getContext("2d"); | |
| var lastX = 400; | |
| var lastY = 400; | |
| var newX = lastX; | |
| var newY = lastY; | |
| var points = [{x:400,y:400}]; //First point | |
| points.push({x:points[0].x+rng(-10,10), y:points[0].y+rng(-10,10)}); //Next point | |
| function draw() { | |
| ctx.clearRect(0, 0, 800,800); | |
| points.push({x:points[1].x+rng(-25,25), y:points[1].y+rng(-25,25)}); //Next point | |
| points.push({x:points[1].x+rng(-25,25), y:points[1].y+rng(-25,25)}); //Next point | |
| ctx.beginPath(); | |
| ctx.moveTo(points[0].x, points[0].y); | |
| var xc = (points[1].x + points[2].x) / 2; | |
| var yc = (points[1].y + points[2].y) / 2; | |
| ctx.quadraticCurveTo(points[1].x, points[1].y, xc, yc); | |
| ctx.quadraticCurveTo(points[1].x, points[1].y, points[2].x,points[2].y); | |
| points.shift(); //Current point | |
| points.shift(); //Current point | |
| ctx.stroke(); | |
| setTimeout(draw, 100); | |
| } | |
| setTimeout(draw, 100); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment