synthwave-hd.js

import {
  createBaseGUI,
  Command,
  GUI,
  Integer,
  Float,
  Boolean,
  Key,
  Control,
  Seeder
} from '../libraries/gui/gui.js'

import {
  getLargeCanvas,
  addText,
  smoothStep
} from '../libraries/misc.js'

import {
  ctxGranulateChannels
} from '../libraries/effects.js'

import {
  easeInSq
} from '../libraries/eases.js'

const sketch = (s) => {

  let gui, debug = false,
    maskIt = true
  let largeCanvas
  let cfg = {
    hd: 1.5,
    seeder: undefined,
    largeCanvas: undefined
  }
  let monoid
  const white = s.color(255, 255, 255)
  const black = s.color("#000")

  const neonBlue = s.color("#00fbff")
  const neonOrange = s.color("#ff9f00")
  const neonPink = s.color("#f400ff")
  const neonGreen = s.color("#1aff00")

  s.preload = () => {
    monoid = s.loadFont("../libraries/fonts/Monoid-Retina.ttf")
  }

  s.setup = () => {
    let {
      w,
      h
    } = getLargeCanvas(s, 1600)
    let canvas
    if (w > h) {
      canvas = s.createCanvas(w, h)
    } else {
      canvas = s.createCanvas(w, w / 1.4)
    }
    s.pixelDensity(1)
    canvas.mousePressed(() => {})
    s.frameRate(20)
    s.noLoop()
    cfg.seeder = new Seeder()
    gui = createGUI()
    gui.toggle()
    gui.fetch()
  }

  s.draw = () => {
    scenery()
  }

  function copyColor(color) {
    const r = s.red(color)
    const g = s.green(color)
    const b = s.blue(color)
    const a = s.alpha(color)
    return s.color(r, g, b, a)
  }

  const sunParams = (scene) => {
    return {
      x: 0.6 * scene.width,
      y: 0.4 * scene.height,
      r: 0.35 * scene.height
    }
  }

  function drawShootingStar(scene, params) {
    // Simple shooting star
    const x = 0.4 * scene.width * scene.random(0.8, 1.1)
    const y = 0.3 * scene.height * scene.random(0.8, 1.1)
    const length = scene.random(150 * cfg.hd, 250 * cfg.hd)
    const angle = -scene.random(0.8, 1.2) * Math.PI / 4
    scene.push()
    scene.strokeWeight(cfg.hd * 1)
    for (let i = 1; i < length; i++) {
      for (let j = 0; j < 200; j++) {
        if (scene.random() < .5 / i) {
          const r = scene.random(220, 250)
          const g = scene.random(200, 250)
          const b = scene.random(200, 250)
          const color = s.color(r, g, b, 10)
          scene.stroke(color)
          scene.fill(color)
          const R = 5 * scene.random(1 / i)
          const th = scene.random(0, 2 * Math.PI)
          scene.circle(x + i * Math.cos(angle) + R * Math.cos(th), y + i * Math.sin(angle) + R * Math.sin(th), 1.5 * cfg.hd)
        }
      }
    }
    scene.pop()
  }


  function drawStarfield(scene, params) {
    scene.push()
    scene.fill(neonGreen)
    let c = copyColor(neonGreen)
    let ctx = scene.drawingContext
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 1
    ctx.shadowColor = neonGreen
    scene.noStroke()
    for (let i = 0; i < scene.width / cfg.hd; i++) {
      for (let j = 0; j < params.bottom / cfg.hd; j++) {
        const n = scene.random()
        const f = Math.floor(n * 15000)
        if (f == 1 || f == 42 || (f > 90 && f < 100)) {
          const rr = 10 * cfg.hd * easeInSq(scene.random())
          for (let k = 0; k < 10; k++) {
            const a = smoothStep(0, 10, k)
            const r = smoothStep(0, 10, k)
            c.setAlpha(a * 255)
            scene.fill(c)
            scene.circle(i * cfg.hd, j * cfg.hd, (1 - r) * rr)
          }
        }
      }
    }
    scene.pop()
  }

  function glowLine(scene, x1, y1, x2, y2, color, r) {
    // I like this better than using context shadow
    let colorCopy = s.color(s.red(color), s.green(color), s.blue(color), s.alpha(color))
    colorCopy.setAlpha(0)
    const steps = 3 * r
    for (let i = 1; i < steps; i++) {
      scene.strokeWeight(cfg.hd * r * i / steps)
      scene.stroke(s.color(s.red(color), s.green(color), s.blue(color), 5))
      scene.line(x1, y1, x2, y2)
    }
    scene.strokeWeight(cfg.hd * 0.5)
    scene.stroke(color)
    scene.line(x1, y1, x2, y2)
  }

  function drawMountain(scene, params, back) {
    scene.push()
    scene.strokeJoin(scene.ROUND)
    let color = copyColor(neonBlue)
    if (back) {
      scene.scale(0.9)
      scene.translate(0, 0.11 * params.bottom)
      color.setAlpha(200)
    } else {
      scene.scale(1.1)
      scene.translate(0, -0.09 * params.bottom)
    }
    scene.stroke(color)
    scene.strokeWeight(cfg.hd * 1)
    let ctx = scene.drawingContext
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 12
    ctx.shadowColor = color
    scene.fill(0)
    if (debug) scene.strokeWeight(cfg.hd * 1)
    scene.beginShape()
    for (const p of params.ridge) {
      scene.vertex(p[0], p[1])
    }
    scene.endShape()

    scene.strokeWeight(cfg.hd * 1)
    scene.stroke(color)
    scene.fill(0)


    // First level of slopes
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 10


    let slope = -1.1 * scene.random(Math.PI / 16, Math.PI / 8)
    let sign = params.sign ? params.sign : scene.random(-1, 1) > 0 ? 1 : -1
    slope *= sign

    for (let i = 0; i < params.ridge.length; i++) {
      if (i % 2 == 1) {
        // Has to be a peak
        let localSlope = slope
        let cx = params.ridge[i][0]
        let cy = params.ridge[i][1]
        let slopeL = [params.ridge[i - 1][0] - cx, params.ridge[i - 1][1] - cy]
        let slopeR = [params.ridge[i + 1][0] - cx, params.ridge[i + 1][1] - cy]
        cy = cy
        const nrmL = Math.sqrt(slopeL[0] * slopeL[0] + slopeL[1] * slopeL[1]) // unused
        const nrmR = Math.sqrt(slopeR[0] * slopeR[0] + slopeR[1] * slopeR[1]) // unused		  

        for (let j = 0; j < 3; j++) {
          const maxHeight = params.bottom - cy
          let r = scene.random(0.3 * maxHeight, 0.5 * maxHeight)
          localSlope *= 1.35 * scene.random(0.8, 1.1)
          if (j == 2) {
            r = maxHeight
          }
          let x = cx + r * Math.sin(localSlope)
          let y = cy + r * Math.cos(localSlope)
          if (debug) {
            // TODO Missing code to prevent outliers
            scene.push()
            scene.stroke("red")
            scene.strokeWeight(cfg.hd * 15)
            scene.point(cx, cy)
            scene.pop()
          }
          scene.strokeWeight(cfg.hd * 2)
          scene.line(cx, cy, x, y) // Down line

          // (Faint) Moon/sun glow against the ridges 
          scene.push()
          let shift = 7
          let glowNeonOrange = copyColor(neonOrange)
          scene.strokeWeight(cfg.hd * shift + Math.floor(shift / 2))
          glowNeonOrange.setAlpha(15)
          scene.stroke(glowNeonOrange)
          scene.line(cx + shift, cy + shift, x + shift, y + shift)
          scene.pop()
          scene.push()
          shift = 3
          glowNeonOrange = copyColor(neonOrange)
          scene.strokeWeight(cfg.hd * (shift + shift / 2))
          glowNeonOrange.setAlpha(15)
          scene.stroke(glowNeonOrange)
          scene.line(cx + shift, cy + shift, x + shift, y + shift)
          scene.pop()

          const L = scene.random(0.2 / (j + 1), 0.3 / (j + 1))
          let mul = nrmL <= nrmR ? nrmL : nrmR
          mul *= scene.random(0.7, 0.9)
          if (j == 2) {
            continue
          }

          scene.line(x, y, x + mul * L, y + mul * L)
          scene.line(x, y, x - mul * L, y + mul * L)
          cx = x
          cy = y
        }
      }
    }

    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 10
    ctx.shadowColor = white

    if (debug) scene.noFill()
    if (debug) scene.strokeWeight(cfg.hd * 1)
    scene.beginShape()
    scene.noFill()
    for (const p of params.ridge) {
      scene.vertex(p[0], p[1])
    }
    scene.endShape()
    scene.pop()
  }

  function drawTerrain(scene, params) {
    const numLines = scene.random(15, 25)
    const gap = scene.width / numLines
    scene.stroke(neonPink)
    scene.strokeWeight(cfg.hd * 2)
    let ctx = scene.drawingContext
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 0

    for (let i = 0; i < 8 * numLines; i++) {
      const end = i * gap
      glowLine(scene, sunParams(scene).x, 0.5 * scene.height, 6 * scene.width - 2 * end, 1.5 * scene.height, neonPink, 15)
    }
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 0

    scene.fill(0)
    scene.noStroke()
    scene.rectMode(scene.CORNERS)
    scene.rect(0, 0, scene.width, params.bottom)
    scene.strokeWeight(cfg.hd * 5)
    scene.stroke(neonBlue)
    scene.line(0, params.bottom, scene.width, params.bottom)
  }

  function drawSun(scene) {
    let ctx = scene.drawingContext
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 0
    const sun = sunParams(scene)
    let maskSun = s.createGraphics(scene.width, scene.height)
    maskSun.clear()
    maskSun.noStroke()
    let alphaWhite = s.color(200, 200, 200, 100)
    for (let i = 0; i < 100; i++) {
      const a = smoothStep(0, 100, i)
      const alpha = (1 + 100 * a) << 0
      alphaWhite.setAlpha(alpha)
      const f = a * 0.93 + (1 - a) * 1.1
      maskSun.fill(alphaWhite)
      maskSun.circle(sun.x, sun.y, sun.r * f)
    }
    maskSun.fill("#00000000")
    maskSun.circle(sun.x, sun.y, sun.r * 0.93)
    let sunG = s.createGraphics(scene.width, scene.height)
    sunG.rectMode(s.CORNERS)
    sunG.fill(black)
    sunG.noStroke()
    sunG.rect(0, 0, scene.width, scene.height)
    let startY = sun.y - scene.random(0.8, 1.0) * sun.r / 8
    sunG.fill(neonOrange)
    sunG.rect(0, 0, sunG.width, startY)
    const inc = sun.r / 12
    for (let i = 0; i < 10; i++) {
      startY += scene.random(0.9, 1.0) * inc
      if (i % 2 == 0) {
        sunG.fill(neonOrange)
        sunG.rect(0, startY, sunG.width, startY + inc)
      }
    }
    let c = sunG.get()
    c.mask(maskSun)
    scene.image(c, 0, 0)
  }

  function generateRidge(scene, params) {
    // Draws a mountain ridge with pure 45 degree angles.
    // Given a bottom line and two points L left, R right,
    // fits a mountain ridge in a right angle triangle with
    // top at x=(R+L)/2 Enable debug to see the bounding triangle.
    // When the tracing reaches a point out of the bounding, pull it
    // to the edge and finish.
    // This is an improved version on 70s-Logo
    scene.strokeWeight(cfg.hd * 15)
    scene.stroke(white)

    scene.stroke("red")
    let ridge = [
      [params.left, params.bottom]
    ]
    let peaks = Math.floor(scene.random(1, 3)) * 2 + 1
    let peakSpan = (params.right - params.left) / peaks

    let up = true
    const sqr2 = Math.sqrt(2) / 2
    if (debug) scene.point(params.left, params.bottom)
    let rise = params.bottom // The next peak or valley
    let ridgeLeft = params.left // and where it starts from
    if (debug) {
      scene.push()
      scene.strokeWeight(cfg.hd * 6)
      scene.noFill()
      scene.triangle(params.left, params.bottom, params.right, params.bottom, params.left + (params.right - params.left) / 2, params.bottom - (params.right - params.left) / 2)
      scene.pop()
    }
    let finished = false
    while (ridgeLeft < params.right) {
      if (finished) break
      if (debug) scene.strokeWeight(cfg.hd * 15)
      if (ridgeLeft > params.right) {
        ridgeLeft = params.right
      }
      let next
      if (up) {
        next = scene.random(0.5 * peakSpan, 0.9 * peakSpan)
      } else {
        next = scene.random(0.3 * peakSpan, 0.5 * peakSpan)
      }
      ridgeLeft = ridgeLeft + next
      if (up) {
        rise = rise - next
        if (debug) scene.point(ridgeLeft, rise)
        up = false
      } else {
        rise = rise + next
        if (debug) scene.point(ridgeLeft, rise)
        up = true
      }
      // This is the case of "next point is outside the BTriangle"
      if (params.bottom - rise > (params.right - ridgeLeft)) {
        finished = true
        if (debug) {
          scene.stroke("blue")
          scene.point(ridgeLeft, rise)
        }
        const mid = (rise + params.bottom - (params.right - ridgeLeft)) / 2
        if (debug) {
          scene.stroke("yellow")
          scene.point(ridgeLeft, mid)
        }
        const diff = mid - rise
        rise = rise + diff
        ridgeLeft -= diff
        if (debug) {
          scene.stroke("green")
          scene.point(ridgeLeft, rise)
        }
      }

      ridge.push([ridgeLeft, rise])
    }
    ridge.push([params.right, params.bottom])
    scene.stroke("red")
    if (debug) scene.point(params.right, params.bottom)
    if (debug) scene.strokeWeight(cfg.hd * 6)
    return ridge
  }

  function scenery() {
    let scene = s.createGraphics(cfg.hd * 1800, cfg.hd * 1200)
    let backdrop = s.createGraphics(scene.width, scene.height)
    scene.randomSeed(cfg.seeder.get())
    backdrop.randomSeed(cfg.seeder.get())
    let ctx = scene.drawingContext
    scene.background(0)

    const top = 0.25 * scene.height
    const left = 0.25 * scene.width
    const right = 0.75 * scene.width
    const bottom = 0.6 * scene.height

    let params = {
      left: left,
      top: top,
      bottom: bottom,
      right: right,
    }

    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 10
    ctx.shadowColor = white

    const ridges = [generateRidge(scene, params), generateRidge(scene, params), generateRidge(scene, params)]
    params.sign = scene.random(-1, 1) > 0 ? 1 : -1
    drawTerrain(scene, params)
    drawStarfield(scene, params)
    scene.randomSeed(cfg.seeder.get())
    drawShootingStar(scene)
    scene.randomSeed(cfg.seeder.get())
    if (!maskIt) {
      params.ridge = ridges[1]
      scene.push()
      scene.translate(0.3 * scene.width, 0)
      drawMountain(scene, params, true)
      scene.pop()
      params.ridge = ridges[2]
      scene.push()
      scene.translate(-0.2 * scene.width, 0)
      drawMountain(scene, params, true)
      scene.pop()
    }
    params.ridge = ridges[0]
    drawSun(scene)
    drawMountain(scene, params, false)
    const maskCircleParams = {
      x: scene.width / 2,
      y: 0.4 * scene.height,
      r: 0.75 * scene.height
    }
    let maskCircle = s.createGraphics(scene.width, scene.height)
    maskCircle.clear()
    maskCircle.stroke(white)
    maskCircle.fill(white)
    maskCircle.circle(maskCircleParams.x, maskCircleParams.y, maskCircleParams.r + 10)
    if (debug) {
      scene.strokeWeight(cfg.hd * 5)
      scene.stroke(black)
      scene.noFill()
      scene.circle(scene.width / 2, 0.4 * scene.height, 0.75 * scene.height)
    }

    let c = scene.get()
    if (!debug && maskIt) c.mask(maskCircle)
    s.background(255, 0)
    backdrop.background(255, 0)

    backdrop.image(c, 0, 0)
    const darkgr = "#404040"
    backdrop.stroke(darkgr)
    backdrop.noFill()
    backdrop.strokeWeight(16 * cfg.hd)
    if (maskIt) backdrop.circle(maskCircleParams.x, maskCircleParams.y, maskCircleParams.r)

    // The code below is quite messy, I could reuse the same config but didn't bother with it.
    // Stole the circular signature from 70s Patch, which I ported to the new GUI earlier.
    const textCfg = {
      s: s,
      scene: backdrop,
      hd: cfg.hd,
      fontsize: 9,
      font: monoid,
      shadowColor: "darkgray",
      color: "white"
    }
    const identifier = `#${cfg.seeder.hex()}@${cfg.hd.toPrecision(2)}`
    if (!maskIt) {
      addText(textCfg, scene.width - 10, textCfg.fontsize * cfg.hd + 3, identifier)
      addText(textCfg, scene.width - 10, textCfg.fontsize * cfg.hd * 2 + 3 * cfg.hd, "rb'23")
    } else {
      const textParams = {
        x: maskCircleParams.x,
        y: maskCircleParams.y,
        r: maskCircleParams.r,
        fontsize: 9,
        font: monoid,
        shadowColor: "darkgray",
        color: "white"
      }
      addTextCircle(backdrop, textParams, identifier + " | rb'23")
    }
    c = backdrop.get()
    cfg.largeCanvas = backdrop


    c.resize(0, s.height)
    if (c.width > s.width) {
      c.resize(s.width, 0)
    }
    const gap = s.width - c.width
    s.push()
    if (gap > 0) {
      s.translate(gap / 2, 0)
    }
    s.image(c, 0, 0)
    s.pop()
  }

  function addTextCircle(scene, params, content) {
    scene.push()
    scene.noStroke()
    scene.fill(params.color)
    scene.textAlign(s.CENTER)
    scene.textFont(params.font, cfg.hd * params.fontsize)
    let ctx = scene.drawingContext
    ctx.shadowOffsetX = 1
    ctx.shadowOffsetY = 1
    ctx.shadowBlur = 1
    ctx.shadowColor = params.shadow //cfg.shadow
    const nr = 1.008 * params.r / 2
    const ftf = Math.cos(s.PI / 4)
    const arcW = cfg.hd * params.fontsize / nr // Correction factor for spacing
    for (let i = 0; i < content.length; i++) {
      scene.push()
      const char = content[i]
      const arcPos = s.PI / 4 - i * arcW
      let x = params.x + nr * Math.cos(arcPos)
      let y = params.y + nr * Math.sin(arcPos)
      scene.translate(x, y)
      scene.rotate(-s.PI / 2 + arcPos)
      scene.text(char, 0, 0)
      scene.pop()
    }
    scene.pop()
  }

  function bezierer(scene, anchor1, control1, control2, anchor2) {
    scene.beginShape()
    scene.vertex(anchor1[0], anchor1[1])
    scene.bezierVertex(control1[0], control1[1], control2[0], control2[1], anchor2[0], anchor2[1])
    scene.endShape()
    if (debug) {
      scene.push()
      scene.strokeWeight(cfg.hd * 15)
      scene.stroke("#EEEE00")
      scene.point(anchor1[0], anchor1[1])
      scene.stroke("#EE0000")
      scene.point(anchor2[0], anchor2[1])
      scene.stroke("#00EE00")
      scene.point(control1[0], control1[1])
      scene.stroke("#0000EE")
      scene.point(control2[0], control2[1])
      scene.pop()
    }
  }


  const createGUI = (gui) => {
    cfg.title = "Synthwave, RB 2023/04"
    cfg.info = "Reusing some  code from 70s-Patch but improving some parts, particularly the mountains"
    cfg.subinfo = "This goes well with <a href='https://gavinharrisonsounds.bandcamp.com/track/groove-overload'>Groove overload</a> by Gavin Harrison<br/>Very high resolutions can fail depending on the browser"
    cfg.s = s
    let R = new Key("r", () => {
      gui.spin(() => {
        cfg.s.clear()
        scenery()
        gui.spin()
        gui.unmark()
        gui.update()
      })
    })

    let resetCanvas = new Command(R, "reset")

    let M = new Key("m", () => {
      maskIt = !maskIt;
      R.action()
    }, (x) => {
      maskIt = x == 'true'
      gui.update()
    }, "mask")

    let maskItBool = new Boolean(() => maskIt)
    let maskItBoolControl = new Control([M], "masking?",
      maskItBool)


    cfg.commands = [resetCanvas, cfg.seeder.command]
    cfg.controls = [cfg.seeder.control, maskItBoolControl]

    gui = createBaseGUI(cfg)
    return gui
  }

  s.keyReleased = () => {
    gui.dispatch(s.key)
  }
}

p5.disableFriendlyErrors = false
let p5sketch = new p5(sketch)