Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
4.1 kB · 147 lines
HTML
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Shapemaker Web</title> <script type="module"> import init, { render_image, LayerWeb, render_canvas, Color, color_name, set_palette, random_linelikes, Filter, ColorMapping, random_color, render_canvas_at, } from "./shapemaker.js" async function run() { await init() window.renderImage = (vel, col) => { document .querySelectorAll(`.frame[data-color=${color_name(col)}]`) ?.forEach((el) => fadeOutElement(el, 200)) render_image(vel, col) }
set_palette( ColorMapping.from_css(` :root { black: #000000; white: #ffffff; red: #cf0a2b; green: #22e753; blue: #2734e6; yellow: #f8e21e; orange: #f05811; purple: #6a24ec; brown: #a05634; pink: #e92e76; gray: #81a0a8; cyan: #4fecec; } `) ) } run()
function randomColor() { const colors = [Color.Cyan, Color.Pink] const random = Math.floor(Math.random() * colors.length) return colors[random] }
function fadeOutElement(el, durationOverride = null) { if (!el) return const duration = durationOverride ?? (window.pedal_held ? 5e3 : 200) el.style.transition = `opacity ${duration}ms ease-out` el.style.opacity = 0 setTimeout(() => el.remove(), duration) }
function frameElement(color) { return document.querySelector(`.frame[data-color=${color_name(color)}]`) }
window.pedal_held = false window.previousColor = null window.numberOfFrames = 0
window.addEventListener("keypress", (e) => { if (e.key === " ") { const layer = random_linelikes(`feur${window.numberOfFrames++}`) let color = randomColor() window.previousColor = color layer.paint_all(color, 1, Filter.glow(7)) render_canvas_at("body") } })
console.log("requesting midi access") navigator.requestMIDIAccess().then((midiAccess) => { Array.from(midiAccess.inputs).forEach((input) => { input[1].onmidimessage = (msg) => { const [cmd, ...args] = [...msg.data] if (cmd === 248) return console.log(cmd, args) if (cmd === 176 && args[0] === 64) { const [_, intensity] = args window.pedal_held = intensity > 0 if (intensity === 0) { document.querySelectorAll(".frame")?.forEach(fadeOutElement) } return } if (cmd !== 144) return const [pitch, velocity] = args
const colors = [ Color.Blue, Color.Purple, Color.Pink, Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Cyan, ]
// get octave from pitch const octave = Math.floor(pitch / 12) - 1
// if octave is 0, use the first color const color = colors[octave] ?? colors[0]
if (velocity === 0) { fadeOutElement(frameElement(color)) } else { window.renderImage(velocity / 128, color ?? "white") } } }) }) </script> <style> body { background: #000; }
.frame { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="prev"></div> </body></html>