Floating an Idea III

//Code by Aaron Reuland(a_soluble_fish)

//For the #wccChallenge on the theme of "liquid".

//Largely based on Daniel Shiffman's video on "Mathematical Marbling" (https://www.youtube.com/watch?v=p7IGZTjC008)

​

​

​

let drops = []

let shapes = []

let simplex

let colors = ["#8497a8", "#c5cecf", "#014e68", "#978c0e", "#b8ad38", "#271f17"]

let m

let VerticesNO = 100

let xLine, yLine, bgColor, xdiv

let x = 0

let noiseAmount, center

​

function setup() {

  m = min(windowWidth, windowHeight)

  createCanvas(m, m);

  simplex = new openSimplexNoise(Date.now())

  for (let x = 0; x < width; x += m * 0.01) {

    let pts = []

    for (let y = 0; y < height; y += m * 0.01) {

      let p = createVector(x, y)

      pts.push(p)

    }

    shapes.push(new shape(pts, colors[1]))

  }

}

​

​

function draw() {

​

  background(colors[0])

​

  if (frameCount % 25 == 0 && frameCount < 800) {

    let x = m / 2 + simplex.noise2D(frameCount / 2, 1) * m / 3

    let y = m / 2 + simplex.noise2D(frameCount / 7, 2) * m / 2

    let r = noise(frameCount / 50, 1) * (m * 0.065)

    addInk(x, y, r, colorMixer(colors, 1))

  }

​

  if (frameCount > 800 && frameCount < 830) {

    let x = map(simplex.noise2D(frameCount / 20, 1), -1, 1, -width / 10, width + width / 10)

    let y = map(frameCount, 800, 830, height * 0.2, height * 0.8)

    let r = noise(frameCount) * (m * 0.01)

    addInk(x, y, r, colorMixer(colors, 2))

  }

​

  for (let s of shapes) {

    s.show()

  }

​

  for (let d of drops) {

    d.grow()

    d.show()

  }

​

}

​

function addInk(x, y, r, color) {

  let droppy = new drop(x, y, r, color)

​

  for (let other of drops) {

    other.marble(droppy)

  }

​

  for (let s of shapes) {

    s.marble(droppy)

  }

  drops.push(droppy)

​

}

​

class shape {

  constructor(pts, color) {

    this.points = pts

    this.color = color

  }

​

  marble(other) {

    for (let pt of this.points) {

      let c = other.pos

      let p = pt.copy()

      let r = other.r

      p.sub(c)

      let m = p.mag()

      let root = sqrt(1 + (r * r) / (m * m))

      p.mult(root)

      p.add(c)

      pt.set(p)

    }

  }

​

​

  show() {

    noFill()

​

    strokeWeight(2)

    stroke(this.color)

    beginShape()

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

      vertex(this.points[i].x, this.points[i].y)

    }

    endShape()

  }

​

​

​

}

​

class drop {

  constructor(x, y, r, color) {

    this.pos = createVector(x, y)

    this.r = 1

    this.finalR = r

    this.color = color

    this.stroke = random(colors)

    this.points = []

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

      let angle = map(i, 0, VerticesNO, 0, TAU)

      let v = createVector(x + cos(angle) * r, y + sin(angle) * r)

      this.points.push(v)

​

    }

  }

​

  grow() {

    if (this.r < this.finalR) {

      let framesMap = map(this.r, 0, this.finalR, 0, 1)

      this.r = lerp(1, this.finalR, easeOutQuint(framesMap))

​

      for (let other of drops) {

        other.marble(this)

      }

​

      for (let s of shapes) {

        s.marble(this)

      }

    }

  }

​

​

  marble(other) {

    for (let pt of this.points) {

      let c = other.pos

      let p = pt.copy()

      let r = other.r

      p.sub(c)

      let m = p.mag()

      let root = sqrt(1 + (r * r) / (m * m))

      p.mult(root)

      p.add(c)

      pt.set(p)

    }

  }

​

  show() {

    push()

    fill(this.color)

    noStroke()

    drawingContext.shadowOffsetX = -this.r / 10;

    drawingContext.shadowOffsetY = this.r / 10

    drawingContext.shadowBlur = this.r / 4;

    drawingContext.shadowColor = 'black';

​

    beginShape()

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

      curveVertex(this.points[i].x, this.points[i].y)

    }

    endShape()

    drawingContext.shadowOffsetX = this.r / 10;

    drawingContext.shadowOffsetY = this.r / 10

    drawingContext.shadowBlur = this.r / 2;

    drawingContext.shadowColor = 'white';

​

    beginShape()

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

      let innerPoint = p5.Vector.lerp(this.points[i], this.pos, 0.1)

      curveVertex(innerPoint.x, innerPoint.y)

    }

    endShape()

    pop()

  }

​

}

​

function easeOutQuint(x) {

  return 1 - Math.pow(1 - x, 5);

}

​

​

function colorMixer(colorArray, a) {

  let c = map(noise(frameCount / 100, a), 0, 1, 0, colorArray.length - 1)

  let c1 = floor(c)

  let c2 = floor(c + 1) % colorArray.length

  let color1 = colorArray[c1]

  let color2 = colorArray[c2]

  let mix = fract(c)

  let coloring = color(spectral.mix(color1, color2, mix))

  return coloring

}