She Answered The Trees - OpenProcessing

sketch.js
tracklist.js
style.css
index.html
xxxxxxxxxx
 
/**
 * Generative album art by Dave!
 *
 * 1. Album art
 *    - I've got a shader that takes in a mesh with per-vertex colors, but
 *      applies dithering instead of doing proper alpha mixing
 *    - The dithering is slightly based on noise, but mostly based on the
 *      *decimals* in the noise result, which ends up more uniformly
 *      distributed than the noise itself!
 *
 * 2. Tracklist
 *    - It loads the text of The Wizard of Oz from Project Gutenberg
 *    - I make a super simple Markov model out of it
 *    - I have a few words I don't want it to start or end on but other
 *      than that I just let the Markov chains do their thing
 *
 * 3. The actual music
 *    - https://davepagurek.bandcamp.com/album/she-answered-the-trees
 *    - I cherrypicked some of the better track names and titles for this
 *    - Technically I started recording these last week ;)
 *
 */
​
const vert = `attribute vec3 aPosition;
  attribute vec4 aVertexColor;
​
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  uniform mat3 uNormalMatrix;
​
  varying highp vec4 vVertColor;
​
  void main(void) {
    vec4 positionVec4 = vec4(aPosition, 1.0);
    gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
    vVertColor = aVertexColor;
  }
`
​
// This shader takes a vertex-colored mesh and replaces proper alpha blending
// with dithering
const frag = `precision mediump float;
  varying highp vec4 vVertColor;
​
  uniform float pixelDensity;
  uniform float seed;
​
  // Noise functions
  // https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
  float rand(float n) {
    return fract(sin(n) * 43758.5453123);
  }
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  float noise(float p) {
    float fl = floor(p);
    float fc = fract(p);
    return mix(rand(fl), rand(fl + 1.0), fc);
  }
  float noise(vec2 n) {
    const vec2 d = vec2(0.0, 1.0);
    vec2 b = floor(n);
    vec2 f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
  }
​
  void main() {
    float angle = seed;
​
    // Rotate the position (which is used to get a noise value) based on the position
    // to make the noise less repetitive
    vec2 coord = mat2(
      cos(angle), -sin(angle),
      sin(angle), cos(angle)
    ) * (gl_FragCoord.xy / pixelDensity);
    vec3 fullColor = vVertColor.xyz;
​
    float threshold = 1. - vVertColor.w * 1.05;
​
    float opacity = smoothstep(
      threshold,
      threshold + 0.05,
      fract(10. * noise(coord * 0.2) + 5. * noise(coord * 1.1))
    );
​
    gl_FragColor = vec4(fullColor, 1.0) * opacity;
  }
`
​
let noiseGradient
function setup() {
  createCanvas(500, 500, WEBGL)
  pixelDensity(2)
  setAttributes({ antialias: true })
  
  const container = document.getElementById('album')
  const canvas = document.querySelector('canvas')
  canvas.parentElement.removeChild(canvas)
  container.appendChild(canvas)
  makeTracklist(container)
  
  noiseGradient = createShader(vert, frag)
}
​
function gradientStroke(w, h, colors) {
  const numPoints = max(2, colors.length)
  beginShape(TRIANGLE_STRIP)
  for (let i = 0; i < numPoints; i++) {
    const y = map(i, 0, numPoints - 1, -h / 2, h / 2)
    fill(colors[min(i, colors.length - 1)])
    vertex(-w / 2, y)
    vertex(w / 2, y)
  }
  endShape()
}
​
function drawBeam() {
  push()
  translate(width * 0.7, -height * 0.6)
  rotate(random(0.1, 0.4) * PI)
  noiseGradient.setUniform('seed', random() * 1000)
  gradientStroke(width / 15, random(width, width * 2.8), [
    color(209, 121, 110, 0),
    lerpColor(
      color(209, 121, 110, 230),
      color(247, 203, 106, 230),
      random()
    ),
    color(209, 121, 110, 0),
  ])
  pop()
}
​
function drawTree(x, z) {
  const h = map(z, 0, 1, height * 0.75, 1.5 * height)
  const w = map(z, 0, 1, width * 0.025, width * 0.125)
  const r = random(-0.015, 0.015) * PI
  push()
  translate(x, height / 2 - h / 2)
  rotate(r)
  gradientStroke(w, h, [
    color(55, 56, 123, 1),
    color(55, 56, 123, 230),
    color(55, 56, 123, 230),
    color(41, 29, 85, 254),
  ])
  if (z > 0.2) {
    for (let i = 0.3; i < 0.7; i += 0.1) {
      if (random() < 0.1) continue
      push()
      translate(0, h * (0.5 - i))
      scale(random([1, -1]), 1)
      rotate(random(PI * 0.55, PI * 0.75))
      const branchLength = random(0.25*w, 3*w)
      translate(0, branchLength / 2)
      gradientStroke(w/6, branchLength, [
        color(55, 56, 123, 1),
        color(55, 56, 123, 230),
        color(55, 56, 123, 230),
        color(55, 56, 123, 230 * 2/3),
        color(55, 56, 123, 230 * 1/3),
        color(55, 56, 123, 1)
      ])
      
      if (random() > 0.25) {
        push()
        translate(0, random(-0.25, 0.25) * branchLength)
        scale(random([1, -1]), 1)
        rotate(random(PI * 0.2, PI * 0.35))
        const subBranchLength = random(0.25*w, 0.75*w)
        translate(0, subBranchLength / 2)
        gradientStroke(w/8, subBranchLength, [
          color(55, 56, 123, 1),
          color(55, 56, 123, 200),
          color(55, 56, 123, 200),
          color(55, 56, 123, 200 * 2/3),
          color(55, 56, 123, 200 * 1/3),
          color(55, 56, 123, 1)
        ])
        pop()
      }
      
      pop()
    }
  }
  pop()
}
​
function draw() {
  background(84, 107, 161)
  
  noStroke()
  shader(noiseGradient)
  noiseGradient.setUniform('pixelDensity', pixelDensity())
  
  drawingContext.disable(drawingContext.DEPTH_TEST)
  drawingContext.enable(drawingContext.BLEND)
  drawingContext.blendFunc(drawingContext.ONE, drawingContext.ONE_MINUS_SRC_ALPHA)
  
  push()
  translate(0, -height * 0.25)
  gradientStroke(width, height * 0.5, [
    color(93, 126, 145),
    color(93, 126, 145, 0),
  ])
  pop()
  
  push()
  translate(0, height * 0.25)
  gradientStroke(width, height * 0.5, [
    color(55, 56, 123, 0),
    color(55, 56, 123, 254),
    color(55, 56, 123, 254),
  ])
  pop()
  
  push()
  translate(0, height * 0.25)
  gradientStroke(width, height * 0.5, [
    color(41, 29, 85, 0),
    color(41, 29, 85, 0),
    color(41, 29, 85, 254),
  ])
  pop()
  
  const objects = []
  for (let i = 0; i < 25; i++) {
    objects.push({
      type: 'tree',
      x: random(-width / 2, width / 2),
      z: pow(random(0.9), 4),
    })
  }
  objects.push({
    type: 'tree',
    x: random(-width / 2, width / 2),
    z: 1,
  })
  objects.push({
    type: 'tree',
    x: objects[objects.length-1].x +
      random([-1, 1]) * width * random(0.1, 0.5),
    z: 1,
  })
  for (let i = 0; i < 6; i++) {
    const z = pow(random(), 0.5)
    for (let j = 0; j < 5; j++) {
      objects.push({
        type: 'beam',
        z,
      })
    }
  }
  
  objects.sort((a, b) => a.z - b.z)
  
  for (const { type, z, x } of objects) {
    if (type === 'tree') {
      drawTree(x, z)
    } else {
      drawBeam()
    }
  }
  
  noLoop()
}