$(document).ready(function(){ var canv = $("#canv")[0]; var w = innerWidth, h = innerHeight; canv.width = w*2; canv.height = h*2; var c = canv.getContext("2d"); var xx = 1; var yy = 1; var dot = []; var dots = []; var r = 1; var toggle = false ; var but = $("#butt"); var setInt1, setInt2 ; var clrs = ["#3D1719", "#71282D", "#CC4852", "#9D543D", "#FE8862", "#FEBD72", "#C0B753", "#F4FB43", "#809A51", "#1E780E", "#44A18D", "#368A8C", "#3D72BE", "#2E2CA6", "#6B3FA6", "#8845A6", "#592D6C", "#6C3053", "#ff140c"]; var speeds = []; var b,d; var circs = []; var circs2 = []; var speed; $("#butt").on("click", function(){ if(toggle == false){ clearInterval(setInt1); toggle = true; spiral2(); } else{ clearInterval(setInt2); toggle = false; spiral1(); } }) function Circle(x,y,r,a,ind,sp){ this.x = x; this.y = y; this.a = a; this.r = r; this.ind = ind; this.sp = sp || 0; } //=== pushing circles in circs2 for(var f0=0; f0<10; f0+=0.2){ for(var f1=0,er=20; f1<30; f1++){ speed = Math.random()*5+1; circs2.push(new Circle(w,h,er,0,f1,speed)); er+=20; } } //=== pushing circles in circs1 for(var e1=5; e1<100; e1+=0.5){ speeds.push(e1); } for(e1=0,er=20; e1<30; e1++){ circs.push(new Circle(w,h,er,0,e1)); er+=20; } for(e1=0,er=20; e1<30; e1++){ circs.push(new Circle(w,h,er,180,e1)); er+=20; } for(e1=3,er=80; e1<30; e1++){ circs.push(new Circle(w,h,er,90,e1)); er+=20; } for(e1=3,er=80; e1<30; e1++){ circs.push(new Circle(w,h,er,270,e1)); er+=20; } for(var e0=45; e0<360; e0+=90){ for(e1=7,er=160; e1<30; e1++){ circs.push(new Circle(w,h,er,e0,e1)); er+=20; } } spiral1(); function clear(op){ c.beginPath(); c.rect(0,0,w*2,h*2); c.closePath(); c.fillStyle = "rgba(255,255,255," + op + ")"; c.fill(); } function spiral1(){ setInt1 = setInterval(function(){ clear(0.8); c.beginPath(); c.arc(w,h,10,0,Math.PI*2); c.closePath(); c.fillStyle = "black"; c.fill(); for( var n2=0; n2

Just messing around...