let canvas = document.getElementById("myCanvas"); let context = canvas.getContext("2d"); function magnitude(x,y) { return Math.sqrt(x**2 + y**2); } function collision(obj1, obj2) { let flag; if ( Math.abs(obj1.x - obj2.x) < obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y - obj2.y) < obj1.h / 2 + obj2.h / 2 ) { flag = false; } else { flag = true; } return flag; } let reflect_number = 3; class Glitch { constructor(x,y,w,h,color){ this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } update(obj){ if(!collision(obj,this)){ obj.x += 2.1*(this.x - obj.x); //obj.y += 2*(this.y - obj.y - obj.h); } } render(){ context.save(); context.beginPath(); context.rect(this.x - this.w/2,this.y - this.h/2,this.w,this.h); context.fillStyle = this.color; context.fill(); context.restore(); } } class Glitch_2 { constructor(x,y,w,h,color){ this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } update(obj){ if(!collision(obj,this)){ obj.vy = 0; } } render(){ context.save(); context.beginPath(); context.rect(this.x - this.w/2,this.y - this.h/2,this.w,this.h); context.fillStyle = this.color; context.fill(); context.restore(); } } class Ref_Count { constructor(n){ this.n = n; } update(obj){ for(let i=0; i i){ if(obj.y < i*800/this.n){ obj.vy = -obj.vy; obj.ref_n = i; obj.color = `rgb(${(i/this.n)*(number-obj.index)*(255/number)},${(number-obj.index)*(255/number)},0)` } } } } } class Ball { constructor(x, y, vx, vy, w, h,color,index,ref_n) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.w = w; this.h = h; this.color = color; this.index = index; this.t = 0; this.ref_n = ref_n; } update() { this.x += this.vx; this.y += this.vy; if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } /* if(this.x > 800){ this.x = 0; } if(this.x < 0){ this.x = 800; } */ if(this.y > 800 /*|| this.y < 0*/){ this.color = `rgb(${((this.ref_n+4)/reflect_number)*(number-this.index)*(255/number)},${(number-this.index)*(255/number)},0)`; this.vy = -this.vy; } if(this.y < 0 && this.ref_n === 0){ this.ref_n = reflect_number; this.color = `rgb(${(number-this.index)*(255/number)},${(number-this.index)*(255/number)},0)`; this.y = 800; } this.t += 0.1; } render() { context.save(); context.beginPath(); context.ellipse(this.x, this.y, this.w / 2, this.h / 2, 0, 0, Math.PI * 2); context.fillStyle = this.color; context.fill(); context.restore(); } } class Circle { constructor(x,y,w,h,color,type){ this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; this.type = type; } render(){ context.save() context.beginPath(); context.ellipse(this.x,this.y,this.w/2,this.h/2,0,0,Math.PI*2); context.fillStyle = this.color; context.strokeStyle = this.color; if(this.type === 0){ context.fill(); } if(this.type === 1){ context.stroke(); } context.restore(); } } class Reflect { constructor(x,y,w,h,color){ this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } update(obj){ if(this.x this.y && obj.y < this.y + this.h){ if(Math.abs(obj.x - this.x)<10 ||Math.abs(obj.x -this.x -this.w)<10){ obj.vx = -obj.vx; } if(Math.abs(obj.y - this.y)<10 ||Math.abs(obj.y - this.y -this.h)<10){ obj.vy = -obj.vy; } } } render(){ context.save(); context.beginPath(); context.rect(this.x,this.y,this.w,this.h); context.fillStyle = this.color; context.fill(); context.restore(); } } class Reflect_2 { constructor(x,y,w,h,color){ this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } update(obj){ if(this.x this.y && obj.y < this.y + this.h){ if(Math.abs(obj.x - this.x)<10 ||Math.abs(obj.x -this.x -this.w)<10){ obj.vx = -obj.vx; } /* if(Math.abs(obj.y - this.y)<10 ||Math.abs(obj.y - this.y -this.h)<10){ obj.vy = -obj.vy; } */ } } render(){ context.save(); context.beginPath(); context.rect(this.x,this.y,this.w,this.h); context.fillStyle = this.color; context.fill(); context.restore(); } } let balls_main = []; let balls_sub = []; let number = 100; let reflect = new Ref_Count(reflect_number); let circles = []; let reflects = []; let glitchs = []; glitchs.push(new Glitch(100,400,50,800,"white")); function positionSet(obj){ obj.x = 220 + 260*Math.random(); } function position(){ positionSet(glitchs[0]); console.log("position"); } //setInterval(position,1000*30); function putReflect(){ let X = 800 * Math.random(); let Y = 800 * Math.random(); reflects.push(new Reflect_2(X,Y,20,100,"red")); } reflects.push(new Reflect(0,0,200,800,"black")); reflects.push(new Reflect(600,0,200,800,"black")); //reflects.push(new Reflect(0,600,400,100,"black")); /* putReflect(); putReflect(); putReflect(); putReflect(); */ function putCircle(){ for(let i=0; i<5; i++){ let X = 800 * Math.random(); let Y = 800 * Math.random(); let c = `rgb(${(800-Y)*255/800},0,${(800-Y)*255/800})` let w = 10*Math.random(); let h = 100*Math.random(); circles.push(new Circle(X,Y,w,w,"pink",0)); } } function drawCircle(){ for(let i=0; i<5; i++){ let X = 800 * Math.random(); let Y = 800 * Math.random(); let c = `rgb(${(800-Y)*255/800},0,${(800-Y)*255/800})` let w = 50*Math.random(); let h = 100*Math.random(); context.save() context.beginPath(); context.ellipse(X,Y,w/2,w/2,0,0,Math.PI*2); context.fillStyle = "pink"; context.fill(); context.restore(); } } //setInterval(putCircle,1000*1); function putBall(){ let X = 200 + 400 * Math.random(); let Y = 800 - 800/reflect_number +10 ; let vx = Math.random(); let vy = Math.random(); let r = magnitude(vx,vy); let n = balls_main.length; let w = 10*Math.random(); balls_main.push(new Ball(X,Y,1,1,2,2,`rgb(${(number-n)*(255/number)},${(number-n)*(255/number)},0)`,n,reflect_number)); } for(let i=0; i number*30){ balls_sub.splice(0,1); } } function setBall(obj){ let n = balls_sub.length; balls_sub.push(new Ball(obj.x,obj.y,0,0,10,10,obj.color,n)); } function set(){ balls_main.forEach(obj => setBall(obj)); } function set_color(){ balls_sub.forEach(obj => obj.color = `hsl(${obj.t},100%,50%)`); } function fill_back(color){ context.save(); context.beginPath(); context.rect(0, 0, 800, 800); context.fillStyle = color; context.fill(); context.restore(); } fill_back("white"); //setInterval(set,1000/2); /* const start = new Date(); const startTime = start.getTime(); */ let counter = 0 let flushed = false; let total_frame = 0; function loop() { //context.fillRect(0, 0, 800, 800); circles.forEach(obj => obj.render()); balls_main.forEach((obj) => obj.update()); balls_main.forEach((obj) => obj.render()); balls_sub.forEach((obj) => obj.update()); balls_sub.forEach((obj) => obj.render()); balls_main.forEach((obj) => reflect.update(obj)); balls_main.forEach((obj1) => {reflects.forEach(obj2 => obj2.update(obj1))}); reflects.forEach((obj) => obj.render()); balls_main.forEach((obj1) => {glitchs.forEach(obj2 => obj2.update(obj1))}); //glitchs.forEach((obj) => obj.render()); remove(); /* let now = new Date(); let time = now.getTime() - startTime; */ total_frame +=1; //let fps = 30.0; let framelength = 30.0; let frame = total_frame%framelength; if(frame === 0){ if(!flushed){ //set(); counter += 1; console.log(counter); if(counter%120 === 0){ position(); } flushed = true; } }else{ flushed = false; } //set_color(); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop);

cross colors