Created
November 6, 2012 12:14
-
-
Save jacobmendoza/4024306 to your computer and use it in GitHub Desktop.
HTML5 Bezier experiment
This file contains 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
| <html> | |
| <head> | |
| <script type="application/javascript"> | |
| var _context = null; | |
| var _counter = 0; | |
| var _maxIterations = 15; | |
| var _current_x_position = 0; | |
| var _current_y_position = 384; | |
| function draw() { | |
| var canvas = document.getElementById('canvas'); | |
| if (canvas.getContext) { | |
| _context = canvas.getContext("2d"); | |
| setInterval(drawBezierCurve, 900); | |
| } | |
| } | |
| function drawBezierCurve() { | |
| if (_counter > _maxIterations) return; | |
| var widthToAdd = 50; | |
| var randomizedNumber = Math.random() * 350; | |
| var negativize = Math.random() <= 0.5; | |
| if (negativize) randomizedNumber *= -1; | |
| _context.beginPath(); | |
| _context.moveTo(_current_x_position, _current_y_position); | |
| _context.bezierCurveTo(_current_x_position - randomizedNumber, _current_y_position + randomizedNumber, | |
| _current_x_position + randomizedNumber, _current_y_position - randomizedNumber, | |
| _current_x_position + widthToAdd, _current_y_position); | |
| _context.stroke(); | |
| _current_x_position += widthToAdd; | |
| _counter++; | |
| } | |
| </script> | |
| </head> | |
| <body onload="draw();"> | |
| <canvas id="canvas" width="1024" height="768" style="padding-left: 20px;"></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment