let canvas = document.getElementById("myCanvas"); let context = canvas.getContext("2d"); context.fillRect(0,0,800,800); class Box { constructor(x,y){ this.x = x; this.y = y; } update(){ } render(){ context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.moveTo(this.x+50,this.y); context.lineTo(this.x,this.y); context.lineTo(this.x,this.y+200); context.lineTo(this.x+200,this.y+200); context.lineTo(this.x+200,this.y); context.lineTo(this.x+150,this.y); context.stroke(); context.restore(); } } class Tube { constructor(x,y){ this.x = x; this.y = y; } update(){ } render(){ context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.moveTo(this.x,this.y); context.lineTo(this.x,this.y+400); context.stroke(); context.restore(); context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.moveTo(this.x+100,this.y); context.lineTo(this.x+100,this.y+400); context.stroke(); context.restore(); } } class Tube_2 { constructor(x,y){ this.x = x; this.y = y; } update(){ } render(){ context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.moveTo(this.x,this.y); context.lineTo(this.x,this.y+50); context.stroke(); context.restore(); context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.moveTo(this.x,this.y); context.lineTo(this.x+500,this.y); context.lineTo(this.x+500,this.y+50); context.stroke(); context.restore(); context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.moveTo(this.x,this.y); context.lineTo(this.x+500,this.y); context.stroke(); context.restore(); context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.moveTo(this.x+100,this.y+50); context.lineTo(this.x+400,this.y+50); context.stroke(); context.restore(); } } class Circle{ constructor(x,y){ this.x = x; this.y = y; } update(){ } render(){ context.save(); context.beginPath(); context.lineWidth = 5; context.strokeStyle = "green"; context.arc(this.x,this.y,100,0,Math.PI*2); context.stroke(); context.restore(); } } function distance(obj1,obj2){ let dist2 = Math.pow(obj1.x - obj2.x,2) + Math.pow(obj1.y - obj2.y,2); let dist = Math.pow(dist2,1/2); return dist; } class Particle { constructor(x,y,vx,vy,area,color){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.area = area; this.color = color; } update(){ let center = {x:400,y:400}; if(distance(this,center) < 100 ){ this.area = "circle"; } //領域circleにおける速度の振舞い方 if(distance(this,center) > 100 && this.area === "circle"){ let normal = {x:Math.cos(Math.atan2(this.y-center.y,this.x-center.x)),y:Math.sin(Math.atan2(this.y-center.y,this.x-center.x))}; let inner_product = (normal.x)*(this.vx) + (normal.y)*(this.vy); let normal_vel = {vx:inner_product*normal.x,vy:inner_product*normal.y}; let new_vel = {vx:-2*normal_vel.vx + this.vx,vy:-2*normal_vel.vy + this.vy}; this.vx = new_vel.vx; this.vy = new_vel.vy; } /* //領域a if(this.x > 100 && this.x < 300 && this.y >500 && this.y < 700){ this.area = "a"; } if(this.x < 100 && this.x < 300 && this.y >500 && this.y < 700 && this.area === "a"){ this.vx = -this.vx; } if(this.x > 100 && this.x > 300 && this.y >500 && this.y < 700 && this.area === "a"){ this.vx = -this.vx; } if(this.x > 100 && this.x < 300 && this.y >500 && this.y > 700 && this.area === "a"){ this.vy = -this.vy; } if(this.x > 250 && this.y <500 && this.x > 100 && this.x < 300 && this.area === "a"){ this.vy = -this.vy; } if(this.x < 150 && this.y <500 && this.x > 100 && this.x < 300 && this.area === "a"){ this.vy = -this.vy; } //領域b if(this.x > 150 && this.x < 250 && this.y < 500 && this.y > 100){ this.area = "b"; } if(this.x < 150 && this.x < 250 && this.y < 500 && this.y > 100 && this.area === "b"){ this.vx = -this.vx; } if(this.x > 150 && this.x > 250 && this.y < 500 && this.y > 100 && this.area === "b"){ this.vx = -this.vx; } //領域c if(this.x > 500 && this.x < 700 && this.y >500 && this.y < 700){ this.area = "c"; } if(this.x < 500 && this.x < 700 && this.y >500 && this.y < 700 && this.area === "c"){ this.vx = -this.vx; } if(this.x > 500 && this.x > 700 && this.y >500 && this.y < 700 && this.area === "c"){ this.vx = -this.vx; } if(this.x > 500 && this.x < 700 && this.y >500 && this.y > 700 && this.area === "c"){ this.vy = -this.vy; } if(this.x > 650 && this.y <500 && this.x > 500 && this.x < 700 && this.area === "c"){ this.vy = -this.vy; } if(this.x < 550 && this.y <500 && this.x > 500 && this.x < 700 && this.area === "c"){ this.vy = -this.vy; } //領域d if(this.x > 550 && this.x < 650 && this.y < 500 && this.y > 100){ this.area = "d"; } if(this.x < 550 && this.x < 650 && this.y < 500 && this.y > 100 && this.area === "d"){ this.vx = -this.vx; } if(this.x > 550 && this.x > 650 && this.y < 500 && this.y > 100 && this.area === "d"){ this.vx = -this.vx; } //領域e if(this.x > 150 && this.x < 650 && this.y < 100 && this.y > 50){ this.area = "e"; } if(this.x > 250 && this.x < 550 && this.y > 100 && this.y > 50 && this.area === "e"){ this.vy = -this.vy; } if(this.x > 150 && this.x < 650 && this.y < 100 && this.y < 50 && this.area === "e"){ this.vy = -this.vy; } if(this.x < 150 && this.y < 100 && this.y > 50 && this.area === "e"){ this.vx = -this.vx; } if(this.x > 650 && this.y < 100 && this.y > 50 && this.area === "e"){ this.vx = -this.vx; } */ this.x += this.vx; this.y += this.vy; } render(){ context.save(); context.beginPath(); context.fillStyle = this.color; context.arc(this.x,this.y,2,0,Math.PI*2); context.fill(); context.restore(); } } class Particle_2 { constructor(x,y,vx,vy,area,color,cx,cy,r,t,n){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.area = area; this.color = color; this.cx = cx; this.cy = cy; this.r = r; this.t = t; this.n = n; } update(){ /* let center = {x:this.cx,y:this.cy}; if(distance(this,center) < this.r ){ this.area = "circle"; } //領域circleにおける速度の振舞い方 if(distance(this,center) > this.r && this.area === "circle"){ let normal = {x:Math.cos(Math.atan2(this.y-center.y,this.x-center.x)),y:Math.sin(Math.atan2(this.y-center.y,this.x-center.x))}; let inner_product = (normal.x)*(this.vx) + (normal.y)*(this.vy); let normal_vel = {vx:inner_product*normal.x,vy:inner_product*normal.y}; let new_vel = {vx:-2*normal_vel.vx + this.vx,vy:-2*normal_vel.vy + this.vy}; this.vx = new_vel.vx; this.vy = new_vel.vy; } */ /* if(this.y < 0 ||this.y > 800 ){ this.vy = -this.vy; } */ this.x += this.vx; this.y += this.vy; this.t += 1; if(this.t%800 === 0){ this.vx = -this.vx; this.vy = -this.vy; } } render(){ let center = {x:this.cx,y:this.cy}; context.save(); context.beginPath(); context.fillStyle = `rgb(${(255-(255/30)*this.n)},${distance(this,center)*(255/this.r)},${((255/30)*this.n)})`; context.arc(this.x,this.y,2,0,Math.PI*2); context.fill(); context.restore(); } } class RingParticle extends Particle_2{ constructor(x,y,vx,vy,area,color,cx,cy,r,t,n,R,X,Y,vR,deg){ super(x,y,vx,vy,area,color,cx,cy,r,t,n); this.R = R; this.X = X; this.Y = Y; this.vR = vR; this.deg = deg; } update(){ super.update(); this.R += this.vR; if(this.R > 150 || this.R < -100){ this.vR = -this.vR; } this.deg += 1; } render(){ let center = {x:this.R*Math.cos(this.deg*Math.PI*2/360),y:this.R*Math.sin(this.deg*Math.PI*2/360)}; context.save(); context.beginPath(); context.fillStyle = `rgb(${(2*255-((255/5)*this.n)%255)/2},${300-distance(this,center)*(255/(this.r))},${((255/5)*this.n)%255})`; context.arc(this.x + this.X + this.R*Math.cos(this.deg*Math.PI*2/360),this.y + this.Y + this.R*Math.sin(this.deg*Math.PI*2/360),2,0,Math.PI*2); context.fill(); context.restore(); } } let objects = []; /* for(let i=0; i<200; i++){ objects.push(new Particle(400+50*Math.random(),400+50*Math.random(),Math.random(),Math.random(),"circle","yellow")); } */ /* for(let i=0; i<200; i++){ objects.push(new Particle_2(200+2*i,400,0,1,"circle","blue",400,400,200)); } */ /* for(let j=0; j<30; j++){ for(let i=0; i<200; i++){ let vx = (1.5)*Math.pow(1,j)*Math.cos(j*(1/30)*Math.PI*2)*Math.sin(Math.PI*2*i/200)+0*(1/250)*Math.pow(1,j)*Math.cos(3*Math.PI*2*i/200); let vy = (1.5)*Math.pow(1,j+1)*Math.sin(j*(1/30)*Math.PI*2)*Math.sin(Math.PI*2*i/200); objects.push(new Particle_2(400+30*Math.cos(j*(1/30)*Math.PI*2)+150*Math.cos(i*(360/200)*Math.PI*2/360+j*(1/30)*Math.PI*2),400+30*Math.sin(j*(1/30)*Math.PI*2)+150*Math.sin(i*(360/200)*Math.PI*2/360+j*(1/30)*Math.PI*2),vx,vy,"circle","green",400,400,300,0,j)); } } */ for(let j=0; j<30; j++){ for(let i=0; i<200; i++){ let vx = (0.5)*Math.pow(1,j)*Math.cos(j*(1/30)*Math.PI*2)*Math.sin(Math.PI*2*i/200)+0*(1/250)*Math.pow(1,j)*Math.cos(3*Math.PI*2*i/200); let vy = (0.5)*Math.pow(1,j+1)*Math.sin(j*(1/30)*Math.PI*2)*Math.sin(Math.PI*2*i/200); objects.push(new RingParticle(150*Math.cos(i*(360/200)*Math.PI*2/360+j*(1/30)*Math.PI*2),150*Math.sin(i*(360/200)*Math.PI*2/360+j*(1/30)*Math.PI*2),vx,vy,"circle","green",400,400,300,400,j,80,400,400,70/(400),360*j/30)); } } /* let vx = 1; let vy = 1; objects.push(new RingParticle(150,150,vx,vy,"circle","green",400,400,300,0,0,30,400,400,0)) */ /* for(let j=0; j<20; j++){ for(let i=0; i<200; i++){ objects.push(new Particle_2(400+10*j*Math.cos(i*(360/200)*Math.PI*2/360),400+10*j*Math.sin(i*(360/200)*Math.PI*2/360),0,-1,"circle",`rgb(0,${255-(25/2)*j},${(25/2)*j})`,400,400,300)); } } */ /* for(let j=0; j<10; j++){ for(let i=1; i<200; i++){ objects.push(new Particle_3(200+2*i,10+10*j,0,1,"circle",`rgb(0,${25*j},0)`,400,400,200)); } } for(let j=0; j<10; j++){ for(let i=1; i<200; i++){ objects.push(new Particle_3(200+2*i,790-10*j,0,-1,"circle",`rgb(${25*j},0,0)`,400,400,200)); } } */ /* objects.push(new Circle(400,400)); */ /* objects.push(new Circle(400,200)); */ /* //領域aに粒子をセット for(let i=0; i<200; i++){ objects.push(new Particle(100+200*Math.random(),500+200*Math.random(),Math.random(),Math.random(),"a","yellow")); } //領域cに粒子をセット for(let i=0; i<200; i++){ objects.push(new Particle(500+200*Math.random(),500+200*Math.random(),Math.random(),Math.random(),"c","blue")); } //領域a objects.push(new Box(100,500)); //領域b objects.push(new Tube(150,100)); //領域c objects.push(new Box(500,500)); //領域d objects.push(new Tube(550,100)); //領域e objects.push(new Tube_2(150,50)); */ // ループさせる関数。 function loop() { // 前の描画を消す。 context.fillRect(0, 0, 800, 800); // 各オブジェクトの状態を更新する。 objects.forEach((obj) => obj.update()); // 各オブジェクトを描画する。 objects.forEach((obj) => obj.render()); // requestAnimationFrameを呼び出す。 window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop);

nostalgic ball