splashing ink graffiti 终

let rain = [];

let colors = ["#75b9be", "#696d7d", "#d72638", "#f49d37", "#140f2d"];

let activeColors = [];

let startTime;

let totalDuration = 3 * 60 * 1000 + 5 * 1000; // 3 minutes and 5 seconds in milliseconds

let lastColorChangeTime = 0;

const colorChangeDuration = 20000; // 20 seconds

​

function setup() {

  createCanvas(1200, 800);

  background('#f0ead6');

  updateActiveColors();

  startTime = millis();

  lastColorChangeTime = startTime;

}

​

function draw() {

  let currentTime = millis();

  let elapsedTime = currentTime - startTime;

  if (elapsedTime >= totalDuration) {

    noLoop(); // Stop the animation after 3:05

    return;

  }

  // Check if it's time to change colors

  if (currentTime - lastColorChangeTime >= colorChangeDuration) {

    updateActiveColors();

    lastColorChangeTime = currentTime;

  }

  let backgroundColor = color('#f0ead6');

  backgroundColor.setAlpha(10);

  background(backgroundColor);

  if (frameCount % 10 == 0) {

    rain.push(new drip(random(width), random(-100, height), random(5, 30)));

  }

​

  for (let i = rain.length - 1; i >= 0; i--) {

    rain[i].move();

    rain[i].show();

  }

  // Display time

  displayTime(elapsedTime);

}

​

function displayTime(elapsedTime) {

  let seconds = floor(elapsedTime / 1000);

  let minutes = floor(seconds / 60);

  seconds %= 60;

  fill(0);

  textSize(20);

  textAlign(LEFT, TOP);

  text(`Time: ${nf(minutes, 2)}:${nf(seconds, 2)}`, 10, 10);

}

​

function updateActiveColors() {

  activeColors = [];

  let numColors = floor(random(1, 5)); // 1 to 4 colors

  let shuffledColors = shuffleArray(colors.slice());

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

    activeColors.push(shuffledColors[i]);

  }

}

​

class pointer {

  constructor(rad, acc, finalSize) {

    this.dist = 1;

    this.rad = rad;

    this.speed = 0;

    this.acc = acc;

    this.pos = createVector(0, 0);

    this.finalSize = finalSize;

    this.downSpeed = createVector(0, 0.01);

    this.downAcc = createVector(0, 0.05 + this.acc / 500);

  }

  move() {

    if (this.dist <= this.finalSize) {

      this.speed += this.acc;

      this.dist += this.speed;

      this.pos = createVector(cos(this.rad) * this.dist, sin(this.rad) * this.dist);

    } else {

      this.downSpeed.add(this.downAcc);

      this.pos.add(this.downSpeed);  

    }

  }

}

​

class drip {

  constructor(x, y, extent) {

    this.splat = [];

    this.color = color(random(activeColors));

    this.x = x;

    this.y = y;

    this.death = 500;

    this.extent = extent;

    this.noiseStart = random(1000);

    for (let i = this.noiseStart; i < this.noiseStart + TWO_PI; i += 0.1) {

      let acc = (noise(i));

      this.splat.push(new pointer(i, acc, extent));

    }  

  }

  move() {

    for (let n of this.splat) {

      n.move();

    }

    this.death -= 1;

    if (this.death < 1) {

      let index = rain.indexOf(this);

      rain.splice(index, 1);

    }

  }

  show() {

    noStroke();

    this.color.setAlpha(80);

    fill(this.color);

    push();

    translate(this.x, this.y);

    beginShape();

    for (let i = 0; i < this.splat.length; i++) {

      curveVertex(this.splat[i].pos.x, this.splat[i].pos.y);

    }

    endShape(CLOSE);

    pop();

  }

}

​

function mousePressed() {

  let fs = fullscreen();

  fullscreen(!fs);

}

​

function shuffleArray(array) {

  for (let i = array.length - 1; i > 0; i--) {

    const j = Math.floor(Math.random() * (i + 1));

    [array[i], array[j]] = [array[j], array[i]];

  }

  return array;

}

​