#genuary29 #genuary2025 #genuary

// Grid-based graphic design

// kenzo da barra

// 01292025

​

let flowField;

let particles = [];

const resolution = 50;

let zoff = 10;

let colori=[];

let t = 0; 

let direction = 1; 

let n_col,h1;

​

function setup() {

  createCanvas(400, 600);

  background('grey');

  colorMode(HSL,360,100,100);

  n_col=int(random(50,100));

  h1=random(360);

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

  let h=h1;

  let s=random(50,100);

  let l=random(5,80); 

  colori.push(color(h,s,l))

  }

  griglia(width / 50, width / 50, width - width / 50 * 2, height - width / 50 * 2, 10);

}

​

function draw() {

  let val = map(t, 0, 1, 0.01, 0.1);

  background(100,val);

  for (let particle of particles) {

    particle.follow(flowField,val);

    particle.update();

    particle.show();

  }

  t += 0.01 * direction;

  if (t >= 1) {

    direction = -1;

  } else if (t <= 0) {

    direction = 1;

  }

}

​

function griglia(posX, posY, wid, hei, depth) {

  push();

  if (depth > 1) {

    if (random() > 0.5) {

      griglia(posX, posY, wid, hei / 2, depth - 1);

      griglia(posX, posY + hei / 2, wid, hei / 2, depth - 1);

    } else {

      griglia(posX, posY, wid / 2, hei, depth - 1);

      griglia(posX + wid / 2, posY, wid / 2, hei, depth - 1);

    }

  } else {

    let cI=constrain(floor(map(noise(posX*0.1,posY*0.1),0,1,0,colori.length-1)),0,colori.length-1)

    let pal=colori[cI];

    flowField = new FlowField(posX, posY, resolution, wid, hei);

    let n_pa=int(random(1,11));

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

      particles.push(new Particle(posX, posY, wid, hei, pal));

    }

  }

  pop();

}

​

class FlowField {

  constructor(rectWidth, rectHeight, resolution, offsetX, offsetY) {

    this.rectWidth = rectWidth;

    this.rectHeight = rectHeight;

    this.resolution = resolution;

    this.cols = rectWidth / resolution;

    this.rows = rectHeight / resolution;

    this.offsetX = offsetX;

    this.offsetY = offsetY;

    this.field = this.generateField();

  }

​

  generateField() {

    let field = [];

    let yoff = 0;

    for (let y = 0; y < this.rows; y++) {

      let row = [];

      let xoff = 0;

      for (let x = 0; x < this.cols; x++) {

        let angle = map(noise((x + this.offsetX) * 0.05, (y + this.offsetY) * 0.05), 0, 0.5, 0, TWO_PI);

        let vector = p5.Vector.fromAngle(angle);

        row.push(vector);

        xoff += 0.1;

      }

      field.push(row);

      yoff += 0.1;

    }

    zoff += 0.03;

    return field;

  }

​

  lookup(position) {

    let col = floor(constrain((position.x - this.offsetX) / this.resolution, 0, this.cols - 1));

    let row = floor(constrain((position.y - this.offsetY) / this.resolution, 0, this.rows - 1));

    return this.field[row][col].copy();

  }

}

​

class Particle {

  constructor(rectX, rectY, rectWidth, rectHeight, pal) {

    this.pal = pal

    this.rectX = rectX;

    this.rectY = rectY;

    this.rectWidth = rectWidth;

    this.rectHeight = rectHeight;

    this.position = createVector(random(rectX, rectX + rectWidth), random(rectY, rectY + rectHeight));

    this.velocity = createVector();

    this.acceleration = createVector();

    this.maxSpeed = random(1, 4);

    this.maxForce = 0.1;

  }

​

  follow(flowField) {

    let desired = flowField.lookup(this.position);

    desired.setMag(this.maxSpeed);

    let steering = p5.Vector.sub(desired, this.velocity);

    steering.limit(this.maxForce);

    this.applyForce(steering);

  }

​

  applyForce(force) {

    this.acceleration.add(force);

  }

​

  update() {

    this.velocity.add(this.acceleration);

    this.velocity.limit(this.maxSpeed);

    this.position.add(this.velocity);

    this.acceleration.mult(0);

    this.edges();

  }

​

  edges() {

    if (this.position.x > this.rectX + this.rectWidth) this.position.x = this.rectX;

    if (this.position.x < this.rectX) this.position.x = this.rectX + this.rectWidth;

    if (this.position.y > this.rectY + this.rectHeight) this.position.y = this.rectY;

    if (this.position.y < this.rectY) this.position.y = this.rectY + this.rectHeight;

  }

​

  show() {

    push();

    let n=noise(this.position.x*0.001,this.position.y*0.001);

    let cI=constrain(floor(map(n,0,1,0,colori.length-1)),0,colori.length-1);

    let pal1=colori[cI];

    let pal2 = this.pal;

    strokeWeight(1);    

    if (n<0.5) {

    stroke(pal1);

    } else {

    stroke(pal2);

    }

    let prevPos = this.position.copy().sub(this.velocity.copy().normalize().mult(3));

    line(prevPos.x, prevPos.y, this.position.x, this.position.y);

    pop();

  }

}

​