Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
3.4 kB · 145 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146// ucla-2, 2024.7.02.03.11.28.762// Interactive graphics.
/* 📝 Notes - Today we will be interacting with graphics and sound using the mouse and keyboard. 🟪️ `box` `write`, `act`, `pen`, `synth` 📜 `if`, `else`, `const`, booleans and logical operators - Exercises - - 1. Making Boxes (review) 🟧 - [🟢] Make a new box from outlined lines. - 2. Conditionals, and Coordinates and clicks. 🚥 - [] Collision detection. 🚗 - [] Single axis, - [] Boxes - 3. Buttons that... - 4. [] Blink, 🚨 - 5. [] Write, ✍️ - 6. [] and Sing! 🎵
⌨️ Useful source code shortcuts. 🍎 + Shift + P -> Format Document 🍎 + / -> Toggle Comments*/
let x = 40; // top left cornerlet y = 82;let width = 60; // size of boxlet height = 80;
// TOP, LEFT, RIGHT, BOTTOMlet top = y;let left = x;let bottom = y + height;let right = x + width;
let inX = false;let inY = false;
function paint({ wipe, ink, pen, point, line, flood, screen, write }) { wipe("black");
if (pen.x < left) { ink("lime", 0.2); inX = false; } else if (pen.x < right) { ink("lime", 0.8); inX = true; // 😃 WE ARE INSIDE THE X RANGE } else { inX = false; ink("red"); }
line(left, 0, left, screen.height); line(right, 0, right, screen.height);
if (pen.y < top) { ink("orange", 0.4); inY = false; } else if (pen.y < bottom) { ink("orange", 0.8); inY = true; // 😃 INSIDE THE Y RANGE } else { inY = false; ink("red"); } line(0, top, screen.width, top); line(0, bottom, screen.width, bottom);
write(inX, 6, 20); write(inY, 6, 30);
ink("yellow"); // Four corners... point(left, top); // top (y) left (x) ink("red"); point(right, top); // top right ink("cyan"); point(left, bottom); // bottom left ink("white"); point(right, bottom); // bottom right
ink("yellow", 0.25); // transparent yellow line(left, top, right, top); // top line line(left, top, left, bottom); // left line line(left, bottom, right, bottom); // bottom line line(right, top, right, bottom); // right line
// inX and inY must BOTH BE TRUE // if inX AND inY is true... then, if (inX && inY) { ink(floodColor, 0.4); // 0->1 transparency (alpha) flood(left + 1, top + 1); // x, y (Paint Bucket) }}
let floodColor = "pink";
function act({ event: e, sound }) { // Respond to user input here.
if (e.is("touch")) { if (inX && inY) { floodColor = "red"; sound.synth({ tone: 'c', duration: 1, type: "square" }); sound.synth({ tone: 'e', duration: 1, type: "square" }); sound.synth({ tone: 'g', duration: 1, type: "square" }); } }
if (e.is("lift")) { sound.synth({ tone: 6000 }); floodColor = "pink"; }
}
// 📚 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`.