window.onload = function(){ let canvas = document.getElementById('canvas'); let c = canvas.getContext('2d'); canvas.width=canvas.height=400; n = 0; c.lineWidth = 2; setInterval(function(){ c.fillStyle = "#ffffff"; c.fillRect(0,0,canvas.width,canvas.height); n--; let a = []; for(var i = 0; i < canvas.width; i++) { a.push(i); } a.forEach(function(e) { sine1=200 + (100 * Math.sin((e + n) * Math.PI / 180)); sine2=200 + (100 * Math.sin((e - n) * Math.PI / 180)); c.beginPath(); if((e % 10) === 0) { c.strokeStyle = ["#ff0000", "#0071BC", "#FCEE21", "#00FF00"][Math.floor(4 * Math.random())]; c.moveTo(sine1, e) c.lineTo(sine2, e); } c.stroke(); c.beginPath(); c.fillStyle = "#000000"; c.moveTo(sine1, e); c.ellipse(sine1, e, c.lineWidth / 2, c.lineWidth / 2, 0, 0, Math.PI * 2); c.moveTo(sine2, e); c.ellipse(sine2, e, c.lineWidth / 2, c.lineWidth / 2, 0, 0, Math.PI * 2); c.fill(); }); }, 1000/30); }

window.onload = function() { let c = new simpleCanvas('canvas'); n = 0; c.c.lineWidth = 2; c.draw = function(){ c.background(); n--; range(c.width).forEach(function(e) { sine1=200 + (100 * Math.sin((e + n) * Math.PI / 180)); sine2=200 + (100 * Math.sin((e - n) * Math.PI / 180)); if((e % 10) === 0) { c.s.stroke = ["#ff0000", "#0071BC", "#FCEE21", "#00FF00"][Math.floor(4 * Math.random())]; c.line(sine1, e, sine2, e); } c.point(sine1, e); c.point(sine2, e); c.s.stroke = "#000000"; }); }; }