let canvas = document.getElementById("myCanvas"); let context = canvas.getContext("2d"); class Circle { constructor(x,y,vx,vy){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; } update(){ this.x += this.vx; this.y += this.vy; if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } } render(){ context.save(); context.beginPath(); context.fillStyle = "white"; context.arc(this.x,this.y,50,0,Math.PI*2); context.fill(); context.restore(); } } class Pole { constructor(x,y,vx,vy){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; } update(){ this.x += this.vx; this.y += this.vy; if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } } render(){ context.save(); context.beginPath(); context.fillStyle = "white"; context.rect(this.x,this.y,5,800); context.fill(); context.restore(); } } class Eye { constructor(x,y,vx,vy,t,vt,R,color,eye,eyelid,counter,open,close,half){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.t = t; this.vt = vt; this.R = R; this.color = color; this.eye = eye; this.eyelid = eyelid; this.counter = counter; this.open = open; this.close = close; this.half = half; } update(){ this.x += this.vx; this.y += this.vy; this.t += this.vt; if(this.t > 50 || this.t < -50){ this.vt = -this.vt; } if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } if(this.t > 50 || this.t < -50){ this.counter = (1+this.counter)%5; } for(let i=0; i<4; i++){ if(this.counter === this.open[i]){ this.eye = true; this.eyelid = false; } if(this.counter === this.close[i]){ this.eye = false; this.eyelid = false; } if(this.counter === this.half[i]){ this.eye = true; this.eyelid = true; } } } render(){ context.save(); context.translate(this.x,this.y); context.rotate(this.t*Math.PI*2/360) context.beginPath(); context.fillStyle = "yellow"; context.moveTo(0,-100); context.lineTo(20,0); context.lineTo(-20,0); context.closePath(); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = this.color; context.arc(this.x,this.y,this.R,0,Math.PI*2); context.fill(); context.restore(); /* if(this.vx > 0){ context.save(); context.beginPath(); context.fillStyle = "yellow"; context.arc(this.x,this.y,this.R,0,Math.PI*2); context.fill(); context.restore(); } */ if(this.eye){ context.save(); context.beginPath(); context.fillStyle = "white"; context.arc(this.x,this.y,30,0,Math.PI*2); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = "black"; context.arc(this.x,this.y,10,0,Math.PI*2); context.fill(); context.restore(); } if(this.eyelid){ context.save(); context.beginPath(); context.fillStyle = this.color; context.arc(this.x,this.y,this.R,Math.PI,Math.PI*2); context.fill(); context.restore(); } } } class Particle { constructor(x,y,vx,vy,t,vt,R,color){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.t = t; this.vt = vt; this.R = R; this.color = color; } update(){ this.x += this.vx; this.y += this.vy; this.t += this.vt; if(this.t > 50 || this.t < -50){ this.vt = -this.vt; } if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } } render(){ context.save(); context.beginPath(); context.strokeStyle = this.color; context.lineWidth = 7; context.setLineDash([7,20]); context.moveTo(this.x,this.y); context.lineTo(this.x - 200*this.vx,this.y - 200*this.vy); context.stroke(); context.restore(); } } let objects = []; //objects.push(new Particle(100,200,10/2,1/2,0,0,1,"red")); for(let i=0; i<100; i++){ let vx = Math.cos(i*Math.PI*2/100); let vy = Math.sin(i*Math.PI*2/100); objects.push(new Particle(400,400,vx,vy,0,0,1,"white")); } /* for(let i=0; i<10; i++){ objects.push(new Particle(100*i,100*i,10/4,-10/4,0,0,1,"white")); } for(let i=0; i<10; i++){ objects.push(new Particle(100*i,100*i,-10/4,10/4,0,0,1,"white")); } */ /* for(let i=20; i<40; i++){ objects.push(new Particle(10*i,10*i,-10/2,10/2,0,0,1,"blue")); } for(let i=40; i<60; i++){ objects.push(new Particle(10*i,10*i,10/2,-10/2,0,0,1,"pink")); } for(let i=60; i<80; i++){ objects.push(new Particle(10*i,10*i,-10/2,10/2,0,0,1,"red")); } */ /* for(let i=20; i<60; i +=4){ objects.push(new Particle(10*i,10*i,10/2,-10/2,0,0,1,"white")); objects.push(new Particle(10*(i+1),10*(i+1),-10/2,10/2,0,0,1,"blue")); objects.push(new Particle(10*(i+2),10*(i+2),10/2,-10/2,0,0,1,"pink")); objects.push(new Particle(10*(i+3),10*(i+3),-10/2,10/2,0,0,1,"red")); } */ /* objects.push(new Particle(10*i,10*i,10/2,-10/2,0,0,1,"white")); objects.push(new Particle(10*(i+1),10*(i+1),-10/2,10/2,0,0,1,"blue")); objects.push(new Particle(10*(i+2),10*(i+2),10/2,-10/2,0,0,1,"pink")); objects.push(new Particle(10*(i+3),10*(i+3),-10/2,10/2,0,0,1,"red")); */ function loop(){ context.fillRect(0,0,800,800); objects.forEach((obj) => obj.update()); objects.forEach((obj) => obj.render()); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop);

dot fantasy