tiles motion 240503

// may 2024

​

let cellStages = ['in', 'wait', 'out']

let styleOpts = []

let palette

let bg

let cells = []

let m

let lastTime = null

let noiseIndex = 0

let noiseIndexGrid = 0

let addTimeLast = 0

let addProgress = 0

let addIndex = 0

let seed

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  createPattern()

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight)

  m = min(width, height) * 0.9

}

​

function mouseClicked() {

  createPattern()

}

​

function draw() {

  let t = millis()

  if (!lastTime) lastTime = t

  let delta = t - lastTime

  lastTime = t

  addProgress = min(1, addProgress + delta / DUR.enter)

  let progressEase = ease[EASE_ENTER](addProgress)

  addIndex = round(progressEase * (cells.length - 1))

  let cellSize = m / SIDES

  cellSize = ceil(cellSize)

  m = cellSize * SIDES

  push()

  translate((width - m) / 2, (height - m) / 2)

  background(bg)

  for (let i = 0; i <= min(addIndex, cells.length - 1); i++) {

    let cell = cells[i]

    let x = cell.nx * cellSize

    let y = cell.ny * cellSize

    let s = cell.s * cellSize

    if (cell.stage === 'pre') {

      updateCell(cell, t)

    }

​

    if (cell.p >= 1) {

      cell.stage = cellStages[(cellStages.indexOf(cell.stage) + 1) % 3]

      cell.p = 0

      if (cell.stage === 'in') {

        updateCell(cell, t)

      }

    }

    let dur = DUR[cell.stage]

    cell.p = min(1, cell.p + delta / dur)

    push()

    beginClip()

    rect(x, y, s, s)

    endClip()

    if (cell.style.includes('line')) {

      stroke(cell.color)

      noFill()

    } else {

      noStroke()

      fill(cell.color)      

    }

​

    let p = 0 

    if (cell.stage === 'wait') {

      p = 1

    } else if (cell.stage === 'in') {

      p = ease[EASE_IN](cell.p)

    } else if (cell.stage === 'out') {

      p = ease[EASE_OUT](1 - cell.p)

    }

    cellTransform(x, y, s, cell.rot, p)

    celldr[cell.style](s, p, cell.color)

    pop()

  }

  pop()

}

​

function createPattern() {

  m = min(width, height) * 0.9

  lastTime = null

  noiseIndex = 0 

  noiseIndexGrid = 0

  palette = shuffle([...random(palettes)])

  bg = palette.pop()

  styleOpts = shuffle(Object.keys(celldr))

  seed = floor(random(1000))

  noiseSeed(++seed)

  addTimeLast = 0

  addProgress = 0

  addIndex = 0

​

  let cellMap = Array.from({ length: SIDES * SIDES }, () => null)

  cells = []

  let i = 0 

  while (i < cellMap.length) {

    if (cellMap[i] !== null) {

      i++

      continue

    }

    let {x, y} = indexToPoint(i, SIDES) 

    let cell = { nx: x, ny: y, s: 1, rot: 0, stage: 'pre' }

    cellMap[i] = cell

    cells.push(cell)

    i++

  }

  cells = cells.sort((a, b) => {

    let diff = a.ny + a.nx - (b.ny + b.nx) 

    return diff

  })

}

​

function updateCell(cell, t) {

  noiseIndex++

  if (noiseIndex >= SIDES * SIDES) {

    noiseIndex = 0 

    noiseIndexGrid++

  }

  let n = noise(cell.nx * FREQ_SHAPE, cell.ny * FREQ_SHAPE, noiseIndexGrid)

  let ns = floor(n * styleOpts.length * 2)

  cell.style = styleOpts[ns % styleOpts.length]

  let rotOptions = [0, PI * 0.5, PI, PI * 1.5]

  let nr = floor((n + random(0.3)) * 4)

  cell.rot = rotOptions[nr % rotOptions.length]

  let nColor = noise(cell.nx * FREQ_COLOR, cell.ny * FREQ_COLOR, noiseIndexGrid)

  nColor = floor(nColor * palette.length * 2)

  cell.color = palette[nColor % palette.length]

  cell.p = 0 

  cell.stage = 'in'

}

​

function cellTransform(x, y, s, rot, p) {

  translate(x + s / 2,y + s / 2)

  rotate(rot)

  translate(-s / 2, -s / 2)

}

​

​