(function () { //処理 let canvas = document.getElementById("myCanvas_2"); let context = canvas.getContext("2d"); 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 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; //Collision detection for(let i=0; i 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(){ let glow = 2*2550000/(Math.pow(distance(this,this.color),2)+1); /* 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.c; 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 = `rgb(${glow},${glow},${glow})`; context.arc(this.x,this.y,this.R*(4/6),0,Math.PI*2); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = "black"; context.arc(this.x,this.y,this.R*(2/6),0,Math.PI*2); context.fill(); context.restore(); } if(this.eyelid){ context.save(); context.beginPath(); context.fillStyle = this.color.c; context.arc(this.x,this.y,this.R,Math.PI,Math.PI*2); context.fill(); context.restore(); } } } let objects = []; for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:700,y:700,c:"red"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:700,y:700,c:"blue"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:700,y:700,c:"green"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } /* objects.push(new Eye(100,100,-1,-1,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); objects.push(new Eye(200,100,-1,1,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); */ //objects.push(new Circle(0,400,1,0)); /* for(let i=1; i<8; i++){ for(let j=1; j<8; j++){ if(i>=j){ objects.push(new Eye(100*i,100*j,1,0,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); } if(ij){ objects.push(new Eye(100*i,100*j,-1,0,0,1,40,"orange",true,true,0,[0],[4,1],[2,3])); } } } */ function loop(){ context.clearRect(0,0,800,800); objects.forEach((obj) => obj.update()); objects.forEach((obj) => obj.render()); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop); }()); (function () { //処理 let canvas = document.getElementById("myCanvas_1"); let context = canvas.getContext("2d"); 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 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; //Collision detection for(let i=0; i 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(){ let glow = 2*2550000/(Math.pow(distance(this,this.color),2)+1); /* 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.c; 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 = `rgb(${glow},${glow},${glow})`; context.arc(this.x,this.y,this.R*(4/6),0,Math.PI*2); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = "black"; context.arc(this.x,this.y,this.R*(2/6),0,Math.PI*2); context.fill(); context.restore(); } if(this.eyelid){ context.save(); context.beginPath(); context.fillStyle = this.color.c; context.arc(this.x,this.y,this.R,Math.PI,Math.PI*2); context.fill(); context.restore(); } } } let objects = []; for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:400,y:400,c:"rgb(100,0,0)"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:400,y:400,c:"rgb(0,0,100)"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:400,y:400,c:"rgb(0,100,0)"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } /* objects.push(new Eye(100,100,-1,-1,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); objects.push(new Eye(200,100,-1,1,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); */ //objects.push(new Circle(0,400,1,0)); /* for(let i=1; i<8; i++){ for(let j=1; j<8; j++){ if(i>=j){ objects.push(new Eye(100*i,100*j,1,0,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); } if(ij){ objects.push(new Eye(100*i,100*j,-1,0,0,1,40,"orange",true,true,0,[0],[4,1],[2,3])); } } } */ function loop(){ context.clearRect(0,0,800,800); objects.forEach((obj) => obj.update()); objects.forEach((obj) => obj.render()); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop); }()); (function () { //処理 let canvas = document.getElementById("myCanvas_3"); let context = canvas.getContext("2d"); 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 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; //Collision detection for(let i=0; i 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(){ let glow = 2*2550000/(Math.pow(distance(this,this.color),2)+1); /* 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.c; 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 = `rgb(${glow},${glow},${0*glow})`; context.arc(this.x,this.y,this.R*(4/6),0,Math.PI*2); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = "black"; context.arc(this.x,this.y,this.R*(2/6),0,Math.PI*2); context.fill(); context.restore(); } if(this.eyelid){ context.save(); context.beginPath(); context.fillStyle = this.color.c; context.arc(this.x,this.y,this.R,Math.PI,Math.PI*2); context.fill(); context.restore(); } } } let objects = []; for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:100,y:100,c:"rgb(50,0,0)"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:100,y:100,c:"rgb(0,0,50)"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } for(let i=0; i<10; i++){ let X = 800*Math.random(); let Y = 800*Math.random(); let P = {x:X,y:Y}; let color = {x:100,y:100,c:"rgb(0,50,0)"}; let counter = Math.floor(5*Math.random()); if(objects.every((obj) => distance(obj,P)>20*2)){ objects.push(new Eye(X,Y,1-2*Math.random(),1-2*Math.random(),0,1,20,color,true,true,0,[0],[4,2],[1,3])); } } /* objects.push(new Eye(100,100,-1,-1,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); objects.push(new Eye(200,100,-1,1,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); */ //objects.push(new Circle(0,400,1,0)); /* for(let i=1; i<8; i++){ for(let j=1; j<8; j++){ if(i>=j){ objects.push(new Eye(100*i,100*j,1,0,0,1,40,"blue",true,true,0,[0],[4,2],[1,3])); } if(ij){ objects.push(new Eye(100*i,100*j,-1,0,0,1,40,"orange",true,true,0,[0],[4,1],[2,3])); } } } */ function loop(){ context.fillRect(0,0,800,800); objects.forEach((obj) => obj.update()); objects.forEach((obj) => obj.render()); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop); }());

eye block_2