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 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(){ //領域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,5,0,Math.PI*2); context.fill(); context.restore(); } } let objects = []; //領域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);

particle in tube