Digital Ecosystem

HTML

CSS

JS

const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
addEventListener("resize",()=>{
  canvas.width = innerWidth;
  canvas.height = innerHeight;
});
let creatures = [];
let energy = [];
function spawnCreature(x,y){
  creatures.push({
    x,y,
    vx:(Math.random()-0.5)*1.5,
    vy:(Math.random()-0.5)*1.5,
    life:100 + Math.random()*200,
    size:3 + Math.random()*3,
    hue:Math.random()*360
  });
}
function spawnEnergy(){
  energy.push({
    x:Math.random()*canvas.width,
    y:Math.random()*canvas.height,
    size:3
  });
}
for(let i=0;i<12;i++) spawnCreature(Math.random()*canvas.width, Math.random()*canvas.height);
for(let i=0;i<30;i++) spawnEnergy();
function animate(){
  ctx.fillStyle="rgba(5,8,18,0.25)";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle="#7cff9b";
  for(const e of energy){
    ctx.beginPath();
    ctx.arc(e.x,e.y,e.size,0,Math.PI*2);
    ctx.fill();
  }
  for(let i=creatures.length-1;i>=0;i--){
    const c = creatures[i];
    let closest=null, minDist=9999;
    for(const e of energy){
      const dx=e.x-c.x, dy=e.y-c.y;
      const d=Math.sqrt(dx*dx+dy*dy);
      if(d<minDist){minDist=d; closest=e;}
    }
    if(closest){
      c.vx += (closest.x-c.x)/minDist*0.02;
      c.vy += (closest.y-c.y)/minDist*0.02;
    }
    c.x+=c.vx;
    c.y+=c.vy;
    c.life-=0.05;
    if(c.x<0||c.x>canvas.width) c.vx*=-1;
    if(c.y<0||c.y>canvas.height) c.vy*=-1;
    for(let j=energy.length-1;j>=0;j--){
      const e=energy[j];
      const dx=e.x-c.x, dy=e.y-c.y;
      if(Math.sqrt(dx*dx+dy*dy)<c.size+e.size){
        energy.splice(j,1);
        c.life+=40;
        c.size+=0.2;
      }
    }
    if(c.life>260 && Math.random()<0.005){
      spawnCreature(c.x,c.y);
      c.life-=80;
    }
    if(c.life<=0){
      creatures.splice(i,1);
      continue;
    }
    ctx.fillStyle=`hsl(${c.hue},80%,60%)`;
    ctx.beginPath();
    ctx.arc(c.x,c.y,c.size,0,Math.PI*2);
    ctx.fill();
  }
  if(Math.random()<0.2) spawnEnergy();
  requestAnimationFrame(animate);
}
animate();

Ad #1

Ad #2