200727

// incomplete port of https://observablehq.com/@makio135/abstract-mecha-animated-version

​

bnb = opts => {

  let {

    globals = {},

    setup: _setup = (sketch, globals) => {}, 

    draw: _draw = (sketch, time, globals) => sketch.background(sketch.sin(time * sketch.TAU) * 255),

    w = 800, // width of the sketch

    h = 800, // height of the sketch

    webgl = false, // for p5js WEBGL sketches

    numFrames = 60, // number of frames

    shutterAngle = 0, // amount of motion blur

    samplesPerFrame = 1, // samples for motion blur (1 do nothing)

    chromaticAberration = 0, // amount of chromatic aberration (RGB shift from center)

    play = true, // play sketch (toggle play/pause with mouse click)

    record = false,

    preview = undefined, // export a preview at `frame = preview` instead of waiting the complete export

    loops = 1, // number of loops to record

    fps = 30, // frame rate

    video = false, // record as webm video instead of gif

  } = opts

​

  let recorder = undefined

  let blob = undefined

​

​

  return new p5(sketch => {

    const vs = `

precision highp float;

attribute vec3 aPosition;

void main() { 

  gl_Position = vec4(aPosition, 1.0); 

}`

​

    const fs = `

precision highp float;

uniform vec2 resolution;

uniform vec2 mouse;

uniform float time;

uniform sampler2D ${array(samplesPerFrame).map(i => `tex${i}`).join(', ')};

​

void main() {

  vec2 pos = gl_FragCoord.xy / resolution.xy;

  pos.y = 1. - pos.y;

  // vec3 c = texture2D(tex0, pos).rgb;

  vec3 c = vec3(0);

  for(int i = 0; i < 3; i ++) {

    vec2 p = (pos - 0.5) * (1. + 0.008 * float(i) * float(${chromaticAberration})) + 0.5;

    ${array(samplesPerFrame).map((d, i) => `c[i] += texture2D(tex${i}, p)[i];`).join('\n    ')}

  }

  c /= ${samplesPerFrame}.0;

  gl_FragColor = vec4(c, 1.0);

}`

    let beesAndBombsShader

    const textures = []

    const time = []

​

    sketch.setup = () => {

      sketch.createCanvas(w, h, record ? sketch.WEBGL : webgl ? sketch.WEBGL : undefined)

      sketch.pixelDensity(1)

​

      _setup(sketch, globals)

      sketch.frameRate(fps)

​

      if(!play) sketch.noLoop()

      sketch.canvas.addEventListener('click', () => {

        play = !play

        play ? sketch.noLoop() : sketch.loop()

      })

​

      if (record) {

        recorder = video ? new WebMWriter({ quality: 0.99, frameRate: fps }) : new GIF()

        for (let frame = 0; frame < numFrames; frame++) {

          for (let sample = 0; sample < samplesPerFrame; sample++) {

            time.push((frame + sample * shutterAngle / samplesPerFrame) / numFrames)

          }

        }

​

        beesAndBombsShader = sketch.createShader(vs, fs)

        sketch.shader(beesAndBombsShader)

        beesAndBombsShader.setUniform('resolution', [sketch.width, sketch.height])

​

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

          textures[i] = sketch.createGraphics(sketch.width, sketch.height, webgl ? sketch.WEBGL : undefined)

          textures[i].pixelDensity(1)

          beesAndBombsShader.setUniform(`tex${i}`, textures[i])

          _setup(textures[i], globals)

        }

      }

    }

​

    sketch.draw = () => {

      if (!record) {

        _draw(sketch, ((sketch.frameCount - 1) / numFrames) % 1, globals)

      }

      else {

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

          textures[i].clear()

          textures[i].push()

          _draw(textures[i], time[i + ((sketch.frameCount - 1) % numFrames) * samplesPerFrame], globals)

          textures[i].pop()

        }

        sketch.quad(-1, -1, -1, 1, 1, 1, 1, -1)

        if (video) recorder.addFrame(sketch.canvas)

        else recorder.addFrame(sketch.canvas, { copy: true, delay: 1000 / fps, quality: 1 })

        if (sketch.frameCount === numFrames * loops || sketch.frameCount === preview) {

          sketch.noLoop()

          if (video) {

            recorder.complete().then(_blob => blob = _blob)

          }

          else {

            recorder.on('finished', _blob => blob = _blob)

            recorder.render()

          }

        }

      }

    }

  })

}

​

array = n => new Array(n).fill(0).map((d, i) => i)

shuffle = arr => {

  let tmpArray = [ ... arr ] // create a copy of original array

    for (let i = tmpArray.length - 1; i; i --) {

        let randomIndex = randInt(i + 1);

        [tmpArray[i], tmpArray[randomIndex]] = [tmpArray[randomIndex], tmpArray[i]] // swap

    }

    return tmpArray

}

ease = (p, g) => !g ? 3 * p * p - 2 * p * p * p :

  p < 0.5 ? 0.5 * Math.pow(2 * p, g) :

  1 - 0.5 * Math.pow(2 * (1 - p), g)

clamp = (a, min, max) => a < min ? min : a > max ? max : a 

linearstep = (t, begin, end) => clamp((t - begin) / (end - begin), 0, 1)

random = (a, b) => {

  if(!a && a !== 0) return Math.random()

  if(!b && b !== 0) return Math.random() * a

​

  if(a > b) [a, b] = [b, a] // swap values

  return a + Math.random() * (b - a)

}

randInt = (a, b) => ~~random(a, b)

coin = () => random() < .5 ? -1 : 1

PVector = (a,b,c,d) => new p5.Vector(a,b,c,d)

w = 540

margin = 20

step = 25

n = 20

​

p = [ "#65524D", "#817E9F", "#7FC29B","#B5EF8A","#D7F171"] //, "#a9bcd0", "#58a4b0"

palette = ["#65524D","#373f51", "#d8dbe2","#1b1b1e", "#d8dbe2","#086788", "#F0C808"]

​

bnb({

  w,

  h: w,

  nuFrames: 300,

  fps: 20,

  record: false,

  video: false,

  samplesPerFrame: 8,

  shutterAngle: 0.5,

  chromaticAberration: 0,

  globals: {

    slashes: array(50)

  },

  setup: (s, g) => {

    class Slash {

      constructor(x, y) {

        this.a = PVector(x, y)

        this.b = PVector(7 * step * coin(), 7 * step * coin()).add(this.a)

        if(this.b.x < step || this.b.x > (n - 1) * step) {

          this.b.x -= this.a.x;

          this.b.x *= -1;

          this.b.x += this.a.x;

        }

        if(this.b.y < step || this.b.y > (n - 1) * step) {this.b.y -= this.a.y;

                                                          this.b.y *= -1;

                                                          this.b.y += this.a.y;

                                                         }

        // this.dir = s.random([PVector(1, 0), PVector(0, 1)]).mult(20)

        this.dir = s.random([PVector(1, 0), PVector(0, 1)]).mult(randInt(5, 30))

        this.offset = s.random(1)

        this.color = palette[randInt(1, palette.length)]

      }

      display(s, t) {

        if((t + this.offset) % 1 > .65) return;

        const A = p5.Vector.lerp(this.a, this.b, ease(linearstep((t + this.offset) % 1, 0, .3), 3.5))

        const B = p5.Vector.lerp(this.a, this.b, ease(linearstep((t + this.offset) % 1, .4, .7), 3.5))

        s.noFill()

        s.stroke(0,0,100)

        // s.strokeWeight(0.5)

        s.strokeWeight(3)

        this.shape(s, A, B)

        // s.noStroke()

        s.fill(this.color)

        this.shape(s, A, B)

      }

      shape(s, A, B) {

        s.quad(

          A.x - this.dir.x, A.y - this.dir.y,

          A.x + this.dir.x, A.y + this.dir.y,

          B.x + this.dir.x, B.y + this.dir.y,

          B.x - this.dir.x, B.y - this.dir.y

        )

        s.quad(

          (w - margin * 2) - (A.x - this.dir.x), A.y - this.dir.y,

          (w - margin * 2) - (A.x + this.dir.x), A.y + this.dir.y,

          (w - margin * 2) - (B.x + this.dir.x), B.y + this.dir.y,

          (w - margin * 2) - (B.x - this.dir.x), B.y - this.dir.y

        )

      }

    }

    g.slashes = g.slashes.map(i => new Slash(randInt(1, n - 1) * step, randInt(1, n - 1) * step))

  },

  draw: (s, t, g) => {

    s.background(p[0])

    s.translate(margin, margin)

    s.push()

    s.drawingContext.globalAlpha = 0.6

    s.noStroke()

    s.fill(255)

    s.rectMode(s.CENTER)

    for(let x = 0; x <= s.width - (margin * 2); x += step) {

      for(let y = 0; y <= s.height - (margin * 2); y += step) {

        s.push()

        s.translate(x, y)

        if(x % 125 === 0 && y % 125 === 0) {

          s.rotate(linearstep(0.2, 0.5, t) * s.PI)

          s.rect(0, 0, 8, 1)

          s.rect(0, 0, 1, 8)

        }

        else s.rect(0, 0, 1, 1)

        s.pop()

      }

    }

    s.pop()

​

    g.slashes.forEach(slash => slash.display(s, t))

  }

})