Skip to content

Instantly share code, notes, and snippets.

@sabha

sabha/index.html

Last active February 21, 2019 05:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sabha/0691404d61bcf473d32d34e4e9c2cfba to your computer and use it in GitHub Desktop.
Save sabha/0691404d61bcf473d32d34e4e9c2cfba to your computer and use it in GitHub Desktop.
Download ZIP
Conflict
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="700" style="background: black;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var cx = c.width/2; var cy = c.height/2;
function line(x1,y1,x2,y2,color){
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = color;
}
function conflict(radius,_cx,_cy) {
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 2000) {
clearInterval(id);
ctx.clearRect(0, 0, c.width, c.height);
} else {
ctx.clearRect(0, 0, c.width, c.height);
width+=10;
for(var j=0;j<20;j++) {
var r = radius+(Math.sin(width)*50)+(j*2);
for(var i = 0;i<360;i+=10) {
var x1 = _cx+(Math.cos(i*Math.PI/180)*r);
var y1 = _cy+(Math.sin(i*Math.PI/180)*r);
line(x1,y1,x1-50,y1+((j%2)*10),"#6360F9");
}
}
}
}
}
conflict(70,cx,cy);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment