let imgMap = [];

let objects = [];

let objectCountSlider;

​

function preload() {

​

    // Preload images

    for (let i = 0; i < 10; i++) {

        img[0][i] = loadImage(`images/layer1/BezierLines_${i}.png`);

        img[1][i] = loadImage(`images/layer2/BezierLines_${i}.png`);

        img[2][i] = loadImage(`images/layer3/BezierLines_${i}.png`);

    }

}

​

function setup() {

    createCanvas(800, 800);

    objectCountSlider = createSlider(0, 300, 25); // Slider to control object count

​

​

}

​

function draw() {

    background(220);

​

    // Update object count based on slider value

    if (objects.length < objectCountSlider.value() && frameCount%25==0) {

        objects.push(new MovingObject());

    }

    while (objects.length > objectCountSlider.value()) {

        objects.pop();

    }

​

    // Move and display objects

   var  marked =[ ]

    for (let [i,obj] of objects.entries()) {

        obj.move();

        obj.display();

      if (obj.x > width+128 || obj.x < -128 || obj.y < -128 || obj.y> height+128) {

          marked.push(i);

      }

    }

  for (i of marked){

    objects[i] = new MovingObject()

    print('reloabafe',i)

  }

  if (frameCount % 16 == 0){

      objects.push(new MovingObject())

  }

}

​

class MovingObject {

    constructor() {

        this.pos = createVector(width/2, height/2)

        this.speed = p5.Vector.random2D().mult(3)

      this.buffer = createGraphics(128, 128);

      do {

        this.imgLayer1 = img[0][floor(random(9))];

        this.imgLayer2 = img[1][floor(random(9))];

        this.imgLayer3 = img[2][floor(random(9))];

      } while (

        typeof this.imgLayer1 === 'undefined' ||

        typeof this.imgLayer2 === 'undefined' ||

        typeof this.imgLayer3 === 'undefined'

      )

      this.buffer.image(this.imgLayer1, 0, 0);

      this.buffer.image(this.imgLayer2, 0, 0);

      this.buffer.image(this.imgLayer3, 0, 0);

    }

​

    move() {

      this.pos.add(this.speed)

​

      this.x= this.pos.x

      this.y= this.pos.y

    }

​

    display() {

        image(this.buffer, this.pos.x, this.pos.y);

    }

}

​