Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
3.7 kB · 103 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104// ucla-4, 24.07.11.19.08 // Intermediate graphics and modal logic.
/* 📝 Notes - Today we will be exploring interactive graphics through making a worm, among other things. 🪱 🟪️ `box`, `shape`, `synth`. 📜 Features of: `array`, `object`, and `function`. - Exercises - 1. [x] 🥁 Drum sound! (`synth` and `act` review) 2. [] Rectangle painting and the backbuffer. (graphics review) 3. [] What is a mode and how to design with modes... 2. [] Leading and following! 🟢🟥 4. [] Expanding worm. 🪱*/
function paint({ wipe, ink, write }) { wipe("pink"); ink("black"); write("y:" + yPercentage, 6, 20); ink("blue"); write("x:" + xPercentage, 6, 32);}
let yPercentage;let xPercentage;
function act({ event: e, sound, screen }) {// Respond to user input here. if(e.is("touch")) { yPercentage = e.y / screen.height;
xPercentage = e.x / screen.width;
console.log(yPercentage);
const intensity = 1 - yPercentage; // 1 - 0->1 const panning = xPercentage * 2 - 1; // -1 ---------------- 1 // 0 // ^ center mix of LEFT AND RIGHT
// How do we take 'xPercentage' which is from 0 -> 1 and map it to -1 -> 1 // When xPercentage is 0.5 we want panning to be 0. // When xPercentage is 1 we want panning to be 1. // When xPercentage is 0 we want panning to be -1.
// RANGE for xPercentage is 1 // RANGE for pan is 2
// 🚩 Kick Drum
// Multi-line edit... // Hold CMD and click before the 'v' in each line. // Hit escape to leave multi-cursors.
// High sound.synth({pan: panning, volume: 1 * intensity, type: "triangle", tone: 170, duration: 0.1 + 0.05}); sound.synth({pan: panning, volume: 1 * intensity, type: "triangle", tone: 160, duration: 0.1 - 0.03}); sound.synth({pan: panning, volume: 1 * intensity, type: "triangle", tone: 130, duration: 0.1 + 0.02}); sound.synth({pan: panning, volume: 1 * intensity, type: "triangle", tone: 150, duration: 0.1 - 0.01}); sound.synth({pan: panning, volume: 1 * intensity, type: "triangle", tone: 190, duration: 0.1 + 0.04});
// Low sound.synth({pan: panning, volume: 1 * intensity, type: "square", tone: 70, duration: 0.4, attack: 0, decay: 1}); sound.synth({pan: panning, volume: 0.5 * intensity, type: "square", tone: 80, duration: 0.2, attack: 0, decay: 1}); sound.synth({pan: panning, volume: 0.5 * intensity, type: "square", tone: 90, duration: 0.2, attack: 0, decay: 1}); sound.synth({pan: panning, volume: 1 * intensity, type: "sine", tone: 100, duration: 0.4, attack: 0, decay: 0.4}); sound.synth({pan: panning, volume: 1 * intensity, type: "sine", tone: 150, duration: 0.2 - 0.05, attack: 0, decay: 0.8}); sound.synth({pan: panning, volume: 1 * intensity, type: "sine", tone: 130, duration: 0.2 + 0.05, attack: 0, decay: 0.8});
sound.synth({pan: panning, volume: 1 * intensity, type: "noise-white", duration: 0.05}); sound.synth({pan: panning, volume: 0.8 * intensity, type: "noise-white", duration: 0.1, attack: 0}); }}
// 📚 Library
// function boot() {// Runs once at the start.// }
// function sim() {// // Runs once per logic frame. (120fps locked.)// }
// function beat() {// // Runs once per metronomic BPM.// }
// function leave() {// // Runs once before the piece is unloaded.// }
// function preview({ ink, wipe }) {// Render a custom thumbnail image.// }
// function icon() {// Render an application icon, aka favicon.// }
// ⚠️ Also available: `brush` and `filter`.