I recorded the process for creating this at https://www.youtube.com/watch?v=H7Z6napwjW4
Fork it and see where you can take it from here.
A Pen by John Brown on CodePen.
Created
March 19, 2015 06:18
-
-
Save afenix/94fe4d3a5d4552bc098b to your computer and use it in GitHub Desktop.
Code With Me #1
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
| <canvas id="canvas"></canvas> |
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
| var canvas = document.getElementById('canvas'); | |
| var context = canvas.getContext('2d'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| var cWHalf = canvas.width / 2; | |
| var cHHalf = canvas.height / 2; | |
| var radius = 300; | |
| var points = 6; | |
| var steps = 5; | |
| var tick = 0; | |
| var speed = 4; | |
| var reverse = false; | |
| function animate() { | |
| tick++; | |
| context.fillStyle='rgba(0, 0, 0, .05)'; | |
| context.fillRect(0, 0, canvas.width, canvas.height); | |
| /*var x = Math.random() * canvas.width; | |
| var y = Math.random() * canvas.height; | |
| if (x < canvas.width / 3) { | |
| context.fillStyle='red'; | |
| context.strokeStyle = 'red'; | |
| } else if (x < canvas.width / 3 * 2) { | |
| context.fillStyle='green'; | |
| context.strokeStyle = 'green'; | |
| } else { | |
| context.fillStyle='blue'; | |
| context.strokeStyle = 'blue'; | |
| } | |
| context.fillRect(x, y, 3, y + 10); | |
| */ | |
| context.strokeStyle = 'white'; | |
| context.beginPath(); | |
| context.arc(cWHalf, cHHalf, 300, Math.PI * 2, false); | |
| context.stroke(); | |
| var tickPerc = 1 + ((1 + Math.sin(tick/ (100 / speed))) / 2 * 10); | |
| //var tickPerc = 1; | |
| for (var i = 0; i < points; i++) { | |
| for (var j = 0; j < steps + 1; j++) { | |
| context.beginPath(); | |
| var offset = ((i%points)/points) * ( Math.PI * 2); | |
| var nextOffset = (((i + 1)%points)/points) * ( Math.PI * 2); | |
| context.moveTo( | |
| cWHalf + Math.sin(offset) * radius, | |
| cHHalf + Math.cos(offset) * radius | |
| ); | |
| context.lineTo( | |
| cWHalf + Math.sin(nextOffset) * | |
| //radius/2, | |
| (((radius/tickPerc)/steps) * (j)), | |
| cHHalf + Math.cos(nextOffset) * | |
| //radius/2 | |
| (((radius/tickPerc)/steps) * (j)) | |
| ); | |
| context.stroke(); | |
| } | |
| } | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); |
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
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #canvas { | |
| background-color:black; | |
| width: 100%; | |
| height: 100%; | |
| padding:0; | |
| margin: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment