octopusgarden

Series created using P5.js framework.

let serialNumber = 1;
let paths = []; 
let isAnimating = true; 

function setup() {
  createCanvas(540, 960);
  background(255);
}

function draw() {
  if (isAnimating) {

    for (let path of paths) {
      path.update();
      path.display();
    }
  }
}

function mousePressed() {
  if (isAnimating) {
    paths.push(new Path(mouseX, mouseY));
  }
}

function keyPressed() {
  if (key === 'B' || key === 'b') {
    isAnimating = !isAnimating;
  } else if (key === 'S' || key === 's') {

    let fileName = nf(serialNumber, 4) + '_' + 
                   year() + nf(month(), 2) + nf(day(), 2) + '_' + 
                   nf(hour(), 2) + nf(minute(), 2) + nf(second(), 2); 
    saveCanvas(fileName, 'png');
    serialNumber++; // Increment the serial number for the next save
  }
}

class Path {
constructor(x, y) {
  this.x = x;
  this.y = y;
  this.xOff = random(1000);
  this.yOff = random(1000);
  this.xIncrement = random(0.01, 0.03);
  this.yIncrement = random(0.01, 0.03);
  this.xIncrementOff = random(1000);
  this.yIncrementOff = random(1000);
  this.strokeWeight = random(1, 5);
  this.strokeWeightOff = random(1000);
  this.minStrokeWeight = 1;
  this.maxStrokeWeight = 5;
  this.pathLength = 0; // Lunghezza attuale del percorso
  this.maxLength = random(10, 3000) // Lunghezza massima del percorso impostata casualmente tra 20 e 200 pixel
}

update() {
  if (this.pathLength < this.maxLength) {
    let newX = this.x + map(noise(this.xOff), 0, 1, -2, 2);
    let newY = this.y + map(noise(this.yOff), 0, 1, -2, 2);
    this.pathLength += dist(this.x, this.y, newX, newY);
    this.x = newX;
    this.y = newY;

    this.xOff += this.xIncrement;
    this.yOff += this.yIncrement;
    this.xIncrementOff += 0.11;
    this.yIncrementOff += 0.11;

    this.strokeWeight = map(noise(this.strokeWeightOff), 0, 1, this.minStrokeWeight, this.maxStrokeWeight);
    this.strokeWeightOff += 0.52;
  }
}

display() {
  stroke(0, 0, 0, 25) //
  strokeWeight(this.strokeWeight); // Usa la larghezza del tracciato aggiornata
  point(this.x, this.y);
}

}