Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
2.5 kB ยท 106 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107// 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. [๐ข] ๐ฅ 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. ๐ชฑ*/
let stamp;
function boot({ painting, screen }) { stamp = painting( screen.width, screen.height, ({ wipe, ink, line, noise16 }) => { wipe("yellow", 100); ink("red"); line(0, 0, screen.width, screen.height); }, );}
let needsStamp = false;
function paint({ wipe, ink, line, write, box, screen, pen, painting, paste, page,}) { wipe("gray"); paste(stamp);
const x = pen?.x || screen.width / 2; const y = pen?.y || screen.height / 2; const width = x - startingCornerX; const height = y - startingCornerY;
ink("yellow").write("sx:" + startingCornerX, 6, 20); ink("cyan").write("x:" + x, 6, 30); ink("blue").write("width:" + width, 6, 40);
if (pen?.drawing || needsStamp) { ink("red").box(startingCornerX, startingCornerY, width, height, "outline"); // x, y, size, style // ink("blue", 64).box(startingCornerX, startingCornerY, width, height, "fill"); // x, y, size, style }
if (needsStamp) { // Draw to the "stamp" buffer. needsStamp = false; page(stamp); ink("blue").box(startingCornerX, startingCornerY, width, height, "fill"); // x, y, size, style page(screen); }}
let startingCornerX;let startingCornerY;
function act({ event: e, sound, screen }) { if (e.is("touch")) { startingCornerX = e.x; startingCornerY = e.y; } if (e.is("lift")) { needsStamp = true; }}
// ๐ Library
// 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`.