brush away

//Code by Aaron Reuland

//For the #wccChallange on the theme of 'chromatic communication'

//Paint particles mixing colors when the collide, using the spectral.js library.

//If I find time, I might come back and make the 'collisions' more consistent

//with different screen sizes, but this'll do for now.

​

​

let palettes = [

  ["#61b2fa", "#8ddcff", "#545d5f", "#4a403c", "#b48551", "#1a4670", "#00264e"],

  ["#4e5a5a", "#919898", "#fff0b6", "#964301", "#560000"],

  ["#52140b", "#a90103", "#b25300", "#dba708", "#c4c550", "#008ba7", "#201214"]

]

​

let painters = []

let brush, simplex, d

let colorChooser = 0

let initLife, inc, colors

let velSetter

​

function setup() {

  let m = min(windowWidth, windowHeight)

  createCanvas(m, m);

  velSetter = width / 400

  colors = random(palettes)

  background("#e9d0b5");

  shuffle(colors, true)

  simplex = new openSimplexNoise(Date.now())

  inc = height * 0.05

  d = inc * 1.25

  initialLife = width * 0.77

​

  makeBrush(inc)

​

​

  for (let y = 0; y <= height + inc + inc; y += inc) {

    painters.push(new painter(-d, y, d, createVector(velSetter, 0), colors[colorChooser % colors.length], initialLife))

    colorChooser++

    painters.push(new painter(width + d, y, d, createVector(-velSetter, 0), colors[colorChooser % colors.length], initialLife))

    colorChooser++

  }

​

}

​

function draw() {

​

​

  if (frameCount % 200 == 0 && frameCount < 1600) {

    for (let y = 0; y <= height + inc + inc; y += inc) {

      painters.push(new painter(-d, y, d, createVector(velSetter, 0), colors[colorChooser % colors.length], initialLife))

      colorChooser++

      painters.push(new painter(width + d, y, d, createVector(-velSetter, 0), colors[colorChooser % colors.length], initialLife))

      colorChooser++

    }

    velSetter *= 1 + sin(frameCount / 100)

  }

​

  if (frameCount == 1700) {

    let r = width * 0.025

    painters.push(new painter(width / 2, height + r, r, createVector(0, -1), colors[colorChooser % colors.length], height * 0.51 + r))

    colorChooser++

    painters.push(new painter(width / 2, -r, r, createVector(0, 1), colors[colorChooser % colors.length], height * 0.51 + r))

  }

​

  for (let p of painters) {

    p.move();

    p.draw();

    p.done();

    p.merge();

  }

}

​

​

class painter {

  constructor(x, y, d, vel, color, life) {

    this.pos = createVector(x, y)

    this.size = d

    this.vel = vel

    this.color = color

    this.initLife = life

    this.life = life

    this.points = []

    this.brushAngle = random(TAU)

  }

​

  move() {

    this.pos.add(this.vel)

​

  }

​

  merge() {

    let thisIndex = painters.indexOf(this)

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

      if (i != thisIndex) {

        if (p5.Vector.dist(this.pos, painters[i].pos) < (d * 0.25)) {

          let c = spectral.mix(this.color, painters[i].color, 0.501)

          let c2 = spectral.mix(painters[i].color, this.color, 0.501)

          this.color = c

          painters[i].color = c

        }

      }

    }

​

  }

​

  done() {

    this.life--

    if (this.life < 1) {

      let index = painters.indexOf(this)

      painters.splice(index, 1)

    }

​

  }

​

  draw() {

    tint(this.color)

​

    if (this.life == this.initLife) {

      this.points.push(this.pos)

      this.points.push(this.pos)

    }

​

    this.points.push(this.pos)

​

    let ppos = this.points[this.points.length - 2]

    let pd = dist(this.pos.x, this.pos.y, ppos.x, ppos.y)

    let dinc = 0.5 / pd

    if (frameCount > 5) {

      this.points.splice(0, 1)

    }

    for (let i = 0; i <= 1; i += dinc) {

      imageMode(CENTER)

      push()

      let position = p5.Vector.lerp(this.pos, ppos, i)

      let yWiggle = simplex.noise3D(position.x / 50, position.y / 10, frameCount / 200) * (this.size * 0.25)

      let xWiggle = 0

      if (this.vel.y !== 0) {

        xWiggle = simplex.noise2D(position.y / 50, frameCount / 200) * (this.size * 0.5)

        yWiggle = 0

      }

​

      translate(position.x + xWiggle, position.y + yWiggle)

      let a = this.vel.heading()

      rotate(a + this.brushAngle)

      image(brush, 0, 0, this.size, this.size)

      pop()

    }

  }

}

​

function makeBrush(r) {

  brush = createGraphics(r, r)

  for (let i = 0; i < r * 3; i++) {

    let x = randomGaussian(brush.width / 2, brush.width / 4)

    let y = randomGaussian(brush.width / 2, brush.width / 4)

    let d = random(brush.width * 0.05, brush.width * 0.25)

    brush.noStroke()

    brush.fill(255, 50)

    brush.ellipse(x, y, d, d / 4)

  }

​

}