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.
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.
<canvas id="canvas"></canvas> |
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(); |
body { | |
margin: 0; | |
padding: 0; | |
} | |
#canvas { | |
background-color:black; | |
width: 100%; | |
height: 100%; | |
padding:0; | |
margin: 0; | |
} |