function drawline(x1,y1,x2,y2,color){ context.save(); context.beginPath(); context.moveTo(x1,y1); context.lineTo(x2,y2); context.strokeStyle = color; context.lineWidth = 3; //context.globalCompositeOperation = "lighter"; context.stroke(); context.restore(); } function draw_circle(x, y, context, color, r) { context.save(); context.beginPath(); context.arc(x, y, r, 0, Math.PI * 2, true); context.fillStyle = color; //context.globalCompositeOperation = "lighter"; context.fill(); context.restore(); } function make_grad(x, y, r, color, context) { let color1 = context.createRadialGradient(x, y, 0, x, y, r); color1.addColorStop(0.0, color); //color.addColorStop(0.5 , 'rgb(100, 250, 100)'); color1.addColorStop(1.0, 'rgba(0, 0, 0,1)'); return color1; } function make_circle_grad(x, y, r1,r2, color, context) { let color1 = context.createRadialGradient(x, y, r1, x, y, r2); color1.addColorStop(0.0, 'rgba(0, 0, 0,1)'); //color.addColorStop(0.5 , 'rgb(100, 250, 100)'); color1.addColorStop(1.0, color); return color1; } function make_linear_grad(x, y, rad, r, context, color) { let color1 = context.createLinearGradient(x, y, x + r * Math.cos(rad), y + r * Math.sin(rad)); color1.addColorStop(0.0, color); color1.addColorStop(1.0, 'rgba(0, 0, 0,1)'); return color1; } class Gradrect { constructor(x, y, vx, vy, w, h, rad, color,vrad) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.w = w; this.h = h; this.rad = rad; this.vrad = vrad; this.color = color; } update() { this.x += this.vx; this.y += this.vy; this.rad += this.vrad; /* if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } */ } render(context) { let color1 = make_linear_grad(0, 0, Math.PI / 2, this.h, context, this.color); context.save(); context.beginPath(); context.translate(this.x, this.y); context.rotate(this.rad); context.rect(0, 0, this.w, this.h); context.fillStyle = color1/*"rgb(255,0,0)"*/; //context.globalCompositeOperation = "lighter"; context.fill(); context.restore(); } } /* var rectangle = canvas.getContext('2d'); var rectangle_color = rectangle.createLinearGradient(100, 100, 100, 300); rectangle_color.addColorStop(0.0, 'rgb(0, 255, 255)'); rectangle_color.addColorStop(1.0, 'rgb(253, 182, 7)'); rectangle.fillStyle = rectangle_color; */ //let color1 = make_grad(600,600,300,'rgb(250, 200, 0)'); //let color2 = make_grad(300,400,300,'rgb(0, 250, 0)'); class Gradball { constructor(x, y, vx, vy, w, h, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.w = w; this.h = h; this.color = color; } 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) { let color1 = make_grad(this.x, this.y, this.h / 2, this.color, context); context.save(); context.beginPath(); context.ellipse(this.x, this.y, this.w / 2, this.h / 2, 0, 0, Math.PI * 2); context.fillStyle = color1; //context.globalCompositeOperation = "lighter"; context.fill(); context.restore(); } } class GradCircle { constructor(x, y, vx, vy, r1,r2, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.r1 = r1; this.r2 = r2; this.color = color; } 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) { let color1 = make_circle_grad(this.x, this.y, this.r1,this.r2, this.color, context); context.save(); context.beginPath(); context.ellipse(this.x, this.y, this.r2, this.r2, 0, 0, Math.PI * 2); context.fillStyle = color1; //context.globalCompositeOperation = "lighter"; context.fill(); context.restore(); } } let gradballs = []; let gradballs_2 = []; let gradlines = []; let gradcircles = []; gradballs.push(new Gradball(400, 400, 0, 0, 200, 200, 'rgb(0, 250, 0)')); let n = 10; for (let i = 0; i < n; i++) { gradlines.push(new Gradrect(400, 400, 0, 0, 300, 20, i * Math.PI * 2 / n, "rgb(0,255,0)",0.01)); } gradcircles.push(new GradCircle(400,400,0,0,300,350,"rgb(0,250,0)")); /* gradlines.push(new Gradrect(400,400,0,0,1000,20,Math.PI/4,"rgb(0,250,0)")); gradlines.push(new Gradrect(400,400,0,0,1000,20,Math.PI/2 + Math.PI/4,"rgb(0,250,0)")); */ /* gradballs.push(new Gradball(400,800,1,-1,200,200,'rgb(0, 250, 0)')); gradballs.push(new Gradball(400,800,-1,-1,200,200,'rgb(250, 200, 0)')); */ 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; } function remove(array){ array.forEach((obj,index) => { if(distance(obj,{x:400,y:400}) > 300){ array.splice(index,1); } }) } let counter = 0 let flushed = false; let total_frame = 0; let color1 = make_linear_grad(100, 100, Math.PI / 4, 100, context, "rgb(250,0,0)"); function fill_back(color){ context.save(); context.beginPath(); context.rect(0, 0, 800, 800); context.fillStyle = color; context.fill(); context.restore(); } let color2 = "rgb(0,250,0)"; let color3 = "rgb(0,0,0)"; let color4 = "rgb(250,250,0)"; let color5 = "rgb(250,0,250)"; function loop() { fill_back(color2); /* balls.forEach(obj => obj.update()); balls.forEach(obj => obj.render(context)); balls.forEach(obj1 => { balls.forEach(obj2 => {if(distance(obj1,obj2) < 100){ drawline(obj1.x,obj1.y,obj2.x,obj2.y); }}) }); */ draw_circle(400,400,context,color3,300); for(let i=0; i<10; i++){ drawline(0,i*800/10,800,i*800/10,"rgb(0,250,0)"); } gradballs_2.forEach(obj => obj.render(context)); gradballs_2.forEach(obj => obj.update()); /* gradballs_2.forEach(obj => { if(distance(obj,{x:400,y:400})>300){ obj.color = "rgb(0,250,0)" } }) */ //gradcircles.forEach(obj => obj.render(context)); //gradcircles.forEach(obj => obj.update()); /* objects.forEach((obj) => obj.update()); pixels.forEach((obj) => obj.update()); pixels.forEach((obj) => obj.render(context)); */ //ripples.forEach(obj => obj.render(context)); //ripples.forEach(obj => obj.update()); gradlines.forEach(obj => obj.render(context)); gradlines.forEach(obj => obj.update()); gradballs.forEach(obj => obj.render(context)); gradballs.forEach(obj => obj.update()); gradballs[0].color = color4; gradlines.forEach(obj => obj.color = color5); total_frame += 1; //let fps = 30.0; let framelength = 30.0; let frame = total_frame % framelength; if (frame === 0) { if (!flushed) { /* for (let i = 0; i < 10; i++) { let X = 800 * Math.random(); let Y = 800 * Math.random(); let n = balls.length; let vx = (1-2*Math.random()); let vy = (1-2*Math.random()); let r = magnitude(vx,vy); gradballs_2.push(new Gradball(400, 400, 5*vx/r, 5*vy/r, 20, 20, 'rgb(250, 250, 0)')); } */ counter += 1; if (counter % 10 === 0) { //ripples.push(new Ripple(400, 400, 0, "rgb(0,250,0)",10)); } flushed = true; } } else { flushed = false; } //set_color(); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop);

fan