pretzel logic

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

let morphs = []

let stay = 50

let between = 50

let gs

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let m = min(windowWidth, windowHeight)

  gs = m * 0.075

​

  for (let x = 0; x < width + gs; x += gs * 2) {

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

      morphs.push(new morph(x, y, gs))

      morphs.push(new morph(x, y, gs * 0.5))

      morphs.push(new morph(x, y, gs * 0.25))

      morphs.push(new morph(x + gs, y - (gs * 0.5), gs))

      morphs.push(new morph(x + gs, y - (gs * 0.5), gs * 0.5))

      morphs.push(new morph(x + gs, y - (gs * 0.5), gs * 0.25))

    }

  }

}

​

function draw() {

  background(0)

  for (let m of morphs) {

    m.morphing()

    m.display()

  }

}

​

​

class morph {

  constructor(x, y, sizew) {

    this.center = createVector(x, y)

    this.size = sizew

    this.points = shapes(0, this.size)

    this.color = random(colors)

    this.startColor = this.color

    this.nextColor = random(colors)

    this.startShape = shapes(random([0, 1, 2, 4]), this.size) //random([1, 2, 3, 4, 5, 6])

    this.nextShape = shapes(random([0, 1, 2, 4]), this.size)

    this.morphCount = stay

    this.stayCount = between

    this.morphtime = true

  }

​

  display() {

    fill(this.color)

    //stroke(0)

    noStroke()

    strokeWeight(this.size * 0.05)

    push()

    translate(this.center.x, this.center.y)

    beginShape()

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

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

    }

    endShape(CLOSE)

    pop()

  }

​

​

  morphing() {

    if (!this.morphtime) {

      this.morphCount--

    }

    if (this.morphCount == 0) {

      this.morphtime = true

      this.morphCount = stay

    }

    if (this.stayCount == 0) {

      this.morphtime = false

      this.stayCount = between

      this.startShape = this.nextShape

      let shapeChooser = floor(noise(this.center.x / 10, this.center.y / 10, frameCount + this.size) * 5)

      this.nextShape = shapes(shapeChooser, this.size) //random([0, 1, 2, 4])

      this.startColor = this.nextColor

      let colorChooser = floor(noise(this.center.x / 10, this.center.y / 10, frameCount + this.size) * colors.length)

      this.nextColor = colors[colorChooser]

    }

    if (this.morphtime) {

      this.stayCount--

      let betweenPoint = map(this.stayCount, between, 0, 0, 1)

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

        this.points[i] = p5.Vector.lerp(this.startShape[i], this.nextShape[i], betweenPoint)

      }

      this.color = color(spectral.mix(this.startColor, this.nextColor, betweenPoint))

    }

  }

​

}

​

​

​

function shapes(no, size) {

  let pts = []

  let h = size * 0.5

  let q = size * 0.25

  let t = size * 0.33

  switch (no) {

    case 0:

      //square  

      let pt1 = createVector(-h, -h)

      let pt2 = createVector(0, -h)

      let pt3 = createVector(h, -h)

      let pt4 = createVector(h, 0)

      let pt5 = createVector(h, h)

      let pt6 = createVector(0, h)

      let pt7 = createVector(-h, h)

      let pt8 = createVector(-h, 0)

​

      pts.push(pt1, pt2, pt3, pt4, pt5, pt6, pt7, pt8)

      break;

    case 1:

      //star

      let spt1 = createVector(0, -h)

      let spt2 = createVector(0, -h)

      let spt3 = createVector(-t, h)

      let spt4 = createVector(h, -t * 0.5)

      let spt5 = createVector(-h, -t * 0.5)

      let spt6 = createVector(t, h)

      let spt7 = createVector(0, -h)

      let spt8 = createVector(0, -h)

      pts.push(spt1, spt2, spt3, spt4, spt5, spt6, spt7, spt8)

      break;

​

    case 2:

      //diamond out

      let dpt1 = createVector(0, -h)

      let dpt2 = createVector(t, -t)

      let dpt3 = createVector(h, 0)

      let dpt4 = createVector(t, t)

      let dpt5 = createVector(0, h)

      let dpt6 = createVector(-t, t)

      let dpt7 = createVector(-h, 0)

      let dpt8 = createVector(-t, -t)

      pts.push(dpt1, dpt2, dpt3, dpt4, dpt5, dpt6, dpt7, dpt8)

      break;

​

    case 3:

      //diamond in

      let dipt1 = createVector(0, -h)

      let dipt2 = createVector(t * 0.5, -t * 0.5)

      let dipt3 = createVector(h, 0)

      let dipt4 = createVector(t * 0.5, t * 0.5)

      let dipt5 = createVector(0, h)

      let dipt6 = createVector(-t * 0.5, t * 0.5)

      let dipt7 = createVector(-h, 0)

      let dipt8 = createVector(-t * 0.5, -t * 0.5)

      pts.push(dipt1, dipt2, dipt3, dipt4, dipt5, dipt6, dipt7, dipt8)

      break;

​

    case 4:

      //x?

      let xpt1 = createVector(-h, -h)

      let xpt2 = createVector(0, -q)

      let xpt3 = createVector(h, -h)

      let xpt4 = createVector(q, 0)

      let xpt5 = createVector(h, h)

      let xpt6 = createVector(0, q)

      let xpt7 = createVector(-h, h)

      let xpt8 = createVector(-q, 0)

      pts.push(xpt1, xpt2, xpt3, xpt4, xpt5, xpt6, xpt7, xpt8)

​

​

  }

​

​

  return pts

}