@prismer/runtime 2.2.55 → 2.2.63

package/built-in-skills/prismer-p5js/references/interaction.md

@@ -0,0 +1,398 @@
+# Interaction
+
+## Mouse Events
+
+### Continuous State
+
+```javascript
+mouseX, mouseY          // current position (relative to canvas)
+pmouseX, pmouseY        // previous frame position
+mouseIsPressed          // boolean
+mouseButton             // LEFT, RIGHT, CENTER (during press)
+movedX, movedY          // delta since last frame
+winMouseX, winMouseY    // relative to window (not canvas)
+```
+
+### Event Callbacks
+
+```javascript
+function mousePressed() {
+  // fires once on press
+  // mouseButton tells you which button
+}
+
+function mouseReleased() {
+  // fires once on release
+}
+
+function mouseClicked() {
+  // fires after press+release (same element)
+}
+
+function doubleClicked() {
+  // fires on double-click
+}
+
+function mouseMoved() {
+  // fires when mouse moves (no button pressed)
+}
+
+function mouseDragged() {
+  // fires when mouse moves WITH button pressed
+}
+
+function mouseWheel(event) {
+  // event.delta: positive = scroll down, negative = scroll up
+  zoom += event.delta * -0.01;
+  return false;  // prevent page scroll
+}
+```
+
+### Mouse Interaction Patterns
+
+**Spawn on click:**
+```javascript
+function mousePressed() {
+  particles.push(new Particle(mouseX, mouseY));
+}
+```
+
+**Mouse follow with spring:**
+```javascript
+let springX, springY;
+function setup() {
+  springX = new Spring(width/2, width/2);
+  springY = new Spring(height/2, height/2);
+}
+function draw() {
+  springX.setTarget(mouseX);
+  springY.setTarget(mouseY);
+  let x = springX.update();
+  let y = springY.update();
+  ellipse(x, y, 50);
+}
+```
+
+**Drag interaction:**
+```javascript
+let dragging = false;
+let dragObj = null;
+let offsetX, offsetY;
+
+function mousePressed() {
+  for (let obj of objects) {
+    if (dist(mouseX, mouseY, obj.x, obj.y) < obj.radius) {
+      dragging = true;
+      dragObj = obj;
+      offsetX = mouseX - obj.x;
+      offsetY = mouseY - obj.y;
+      break;
+    }
+  }
+}
+
+function mouseDragged() {
+  if (dragging && dragObj) {
+    dragObj.x = mouseX - offsetX;
+    dragObj.y = mouseY - offsetY;
+  }
+}
+
+function mouseReleased() {
+  dragging = false;
+  dragObj = null;
+}
+```
+
+**Mouse repulsion (particles flee cursor):**
+```javascript
+function draw() {
+  let mousePos = createVector(mouseX, mouseY);
+  for (let p of particles) {
+    let d = p.pos.dist(mousePos);
+    if (d < 150) {
+      let repel = p5.Vector.sub(p.pos, mousePos);
+      repel.normalize();
+      repel.mult(map(d, 0, 150, 5, 0));
+      p.applyForce(repel);
+    }
+  }
+}
+```
+
+## Keyboard Events
+
+### State
+
+```javascript
+keyIsPressed         // boolean
+key                  // last key as string ('a', 'A', ' ')
+keyCode              // numeric code (LEFT_ARROW, UP_ARROW, etc.)
+```
+
+### Event Callbacks
+
+```javascript
+function keyPressed() {
+  // fires once on press
+  if (keyCode === LEFT_ARROW) { /* ... */ }
+  if (key === 's') saveCanvas('output', 'png');
+  if (key === ' ') CONFIG.paused = !CONFIG.paused;
+  return false;  // prevent default browser behavior
+}
+
+function keyReleased() {
+  // fires once on release
+}
+
+function keyTyped() {
+  // fires for printable characters only (not arrows, shift, etc.)
+}
+```
+
+### Continuous Key State (Multiple Keys)
+
+```javascript
+let keys = {};
+
+function keyPressed() { keys[keyCode] = true; }
+function keyReleased() { keys[keyCode] = false; }
+
+function draw() {
+  if (keys[LEFT_ARROW]) player.x -= 5;
+  if (keys[RIGHT_ARROW]) player.x += 5;
+  if (keys[UP_ARROW]) player.y -= 5;
+  if (keys[DOWN_ARROW]) player.y += 5;
+}
+```
+
+### Key Constants
+
+```
+LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW
+BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE
+SHIFT, CONTROL, OPTION, ALT
+```
+
+## Touch Events
+
+```javascript
+touches   // array of { x, y, id } — all current touches
+
+function touchStarted() {
+  // fires on first touch
+  return false;  // prevent default (stops scroll on mobile)
+}
+
+function touchMoved() {
+  // fires on touch drag
+  return false;
+}
+
+function touchEnded() {
+  // fires on touch release
+}
+```
+
+### Pinch Zoom
+
+```javascript
+let prevDist = 0;
+let zoomLevel = 1;
+
+function touchMoved() {
+  if (touches.length === 2) {
+    let d = dist(touches[0].x, touches[0].y, touches[1].x, touches[1].y);
+    if (prevDist > 0) {
+      zoomLevel *= d / prevDist;
+    }
+    prevDist = d;
+  }
+  return false;
+}
+
+function touchEnded() {
+  prevDist = 0;
+}
+```
+
+## DOM Elements
+
+### Creating Controls
+
+```javascript
+function setup() {
+  createCanvas(800, 800);
+
+  // Slider
+  let slider = createSlider(0, 255, 100, 1);  // min, max, default, step
+  slider.position(10, height + 10);
+  slider.input(() => { CONFIG.value = slider.value(); });
+
+  // Button
+  let btn = createButton('Reset');
+  btn.position(10, height + 40);
+  btn.mousePressed(() => { resetSketch(); });
+
+  // Checkbox
+  let check = createCheckbox('Show grid', false);
+  check.position(10, height + 70);
+  check.changed(() => { CONFIG.showGrid = check.checked(); });
+
+  // Select / dropdown
+  let sel = createSelect();
+  sel.position(10, height + 100);
+  sel.option('Mode A');
+  sel.option('Mode B');
+  sel.changed(() => { CONFIG.mode = sel.value(); });
+
+  // Color picker
+  let picker = createColorPicker('#ff0000');
+  picker.position(10, height + 130);
+  picker.input(() => { CONFIG.color = picker.value(); });
+
+  // Text input
+  let inp = createInput('Hello');
+  inp.position(10, height + 160);
+  inp.input(() => { CONFIG.text = inp.value(); });
+}
+```
+
+### Styling DOM Elements
+
+```javascript
+let slider = createSlider(0, 100, 50);
+slider.position(10, 10);
+slider.style('width', '200px');
+slider.class('my-slider');
+slider.parent('controls-div');  // attach to specific DOM element
+```
+
+## Audio Input (p5.sound)
+
+Requires `p5.sound.min.js` addon.
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script>
+```
+
+### Microphone Input
+
+```javascript
+let mic, fft, amplitude;
+
+function setup() {
+  createCanvas(800, 800);
+  userStartAudio();  // required — user gesture to enable audio
+
+  mic = new p5.AudioIn();
+  mic.start();
+
+  fft = new p5.FFT(0.8, 256);  // smoothing, bins
+  fft.setInput(mic);
+
+  amplitude = new p5.Amplitude();
+  amplitude.setInput(mic);
+}
+
+function draw() {
+  let level = amplitude.getLevel();    // 0.0 to 1.0 (overall volume)
+  let spectrum = fft.analyze();         // array of 256 frequency values (0-255)
+  let waveform = fft.waveform();        // array of 256 time-domain samples (-1 to 1)
+
+  // Get energy in frequency bands
+  let bass = fft.getEnergy('bass');          // 20-140 Hz
+  let lowMid = fft.getEnergy('lowMid');      // 140-400 Hz
+  let mid = fft.getEnergy('mid');            // 400-2600 Hz
+  let highMid = fft.getEnergy('highMid');    // 2600-5200 Hz
+  let treble = fft.getEnergy('treble');      // 5200-14000 Hz
+  // Each returns 0-255
+}
+```
+
+### Audio File Playback
+
+```javascript
+let song, fft;
+
+function preload() {
+  song = loadSound('track.mp3');
+}
+
+function setup() {
+  createCanvas(800, 800);
+  fft = new p5.FFT(0.8, 512);
+  fft.setInput(song);
+}
+
+function mousePressed() {
+  if (song.isPlaying()) {
+    song.pause();
+  } else {
+    song.play();
+  }
+}
+```
+
+### Beat Detection (Simple)
+
+```javascript
+let prevBass = 0;
+let beatThreshold = 30;
+let beatCooldown = 0;
+
+function detectBeat() {
+  let bass = fft.getEnergy('bass');
+  let isBeat = bass - prevBass > beatThreshold && beatCooldown <= 0;
+  prevBass = bass;
+  if (isBeat) beatCooldown = 10;  // frames
+  beatCooldown--;
+  return isBeat;
+}
+```
+
+## Scroll-Driven Animation
+
+```javascript
+let scrollProgress = 0;
+
+function setup() {
+  let canvas = createCanvas(windowWidth, windowHeight);
+  canvas.style('position', 'fixed');
+  // Make page scrollable
+  document.body.style.height = '500vh';
+}
+
+window.addEventListener('scroll', () => {
+  let maxScroll = document.body.scrollHeight - window.innerHeight;
+  scrollProgress = window.scrollY / maxScroll;
+});
+
+function draw() {
+  background(0);
+  // Use scrollProgress (0 to 1) to drive animation
+  let x = lerp(0, width, scrollProgress);
+  ellipse(x, height/2, 50);
+}
+```
+
+## Responsive Events
+
+```javascript
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+  // Recreate buffers
+  bgLayer = createGraphics(width, height);
+  // Recalculate layout
+  recalculateLayout();
+}
+
+// Visibility change (tab switching)
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) {
+    noLoop();  // pause when tab not visible
+  } else {
+    loop();
+  }
+});
+```

package/built-in-skills/prismer-p5js/references/shapes-and-geometry.md

@@ -0,0 +1,300 @@
+# Shapes and Geometry
+
+## 2D Primitives
+
+```javascript
+point(x, y);
+line(x1, y1, x2, y2);
+rect(x, y, w, h);            // default: corner mode
+rect(x, y, w, h, r);         // rounded corners
+rect(x, y, w, h, tl, tr, br, bl);  // per-corner radius
+square(x, y, size);
+ellipse(x, y, w, h);
+circle(x, y, d);             // diameter, not radius
+triangle(x1, y1, x2, y2, x3, y3);
+quad(x1, y1, x2, y2, x3, y3, x4, y4);
+arc(x, y, w, h, start, stop, mode);  // mode: OPEN, CHORD, PIE
+```
+
+### Drawing Modes
+
+```javascript
+rectMode(CENTER);   // x,y is center (default: CORNER)
+rectMode(CORNERS);  // x1,y1 to x2,y2
+ellipseMode(CORNER); // x,y is top-left corner
+ellipseMode(CENTER); // default — x,y is center
+```
+
+## Stroke and Fill
+
+```javascript
+fill(r, g, b, a);    // or fill(gray), fill('#hex'), fill(h, s, b) in HSB mode
+noFill();
+stroke(r, g, b, a);
+noStroke();
+strokeWeight(2);
+strokeCap(ROUND);     // ROUND, SQUARE, PROJECT
+strokeJoin(ROUND);    // ROUND, MITER, BEVEL
+```
+
+## Custom Shapes with Vertices
+
+### Basic vertex shape
+
+```javascript
+beginShape();
+  vertex(100, 100);
+  vertex(200, 50);
+  vertex(300, 100);
+  vertex(250, 200);
+  vertex(150, 200);
+endShape(CLOSE);  // CLOSE connects last vertex to first
+```
+
+### Shape modes
+
+```javascript
+beginShape();          // default: polygon connecting all vertices
+beginShape(POINTS);    // individual points
+beginShape(LINES);     // pairs of vertices as lines
+beginShape(TRIANGLES); // triplets as triangles
+beginShape(TRIANGLE_FAN);
+beginShape(TRIANGLE_STRIP);
+beginShape(QUADS);     // groups of 4
+beginShape(QUAD_STRIP);
+```
+
+### Contours (holes in shapes)
+
+```javascript
+beginShape();
+  // outer shape
+  vertex(100, 100);
+  vertex(300, 100);
+  vertex(300, 300);
+  vertex(100, 300);
+  // inner hole
+  beginContour();
+    vertex(150, 150);
+    vertex(150, 250);
+    vertex(250, 250);
+    vertex(250, 150);
+  endContour();
+endShape(CLOSE);
+```
+
+## Bezier Curves
+
+### Cubic Bezier
+
+```javascript
+bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
+// x1,y1 = start point
+// cx1,cy1 = first control point
+// cx2,cy2 = second control point
+// x2,y2 = end point
+```
+
+### Bezier in custom shapes
+
+```javascript
+beginShape();
+  vertex(100, 200);
+  bezierVertex(150, 50, 250, 50, 300, 200);
+  // control1, control2, endpoint
+endShape();
+```
+
+### Quadratic Bezier
+
+```javascript
+beginShape();
+  vertex(100, 200);
+  quadraticVertex(200, 50, 300, 200);
+  // single control point + endpoint
+endShape();
+```
+
+### Interpolation along Bezier
+
+```javascript
+let x = bezierPoint(x1, cx1, cx2, x2, t);  // t = 0..1
+let y = bezierPoint(y1, cy1, cy2, y2, t);
+let tx = bezierTangent(x1, cx1, cx2, x2, t); // tangent
+```
+
+## Catmull-Rom Splines
+
+```javascript
+curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);
+// cpx1,cpy1 = control point before start
+// x1,y1 = start point (visible)
+// x2,y2 = end point (visible)
+// cpx2,cpy2 = control point after end
+
+curveVertex(x, y);  // in beginShape() — smooth curve through all points
+curveTightness(0);  // 0 = Catmull-Rom, 1 = straight lines, -1 = loose
+```
+
+### Smooth curve through points
+
+```javascript
+let points = [/* array of {x, y} */];
+beginShape();
+  curveVertex(points[0].x, points[0].y); // repeat first for tangent
+  for (let p of points) {
+    curveVertex(p.x, p.y);
+  }
+  curveVertex(points[points.length-1].x, points[points.length-1].y); // repeat last
+endShape();
+```
+
+## p5.Vector
+
+Essential for physics, particle systems, and geometric computation.
+
+```javascript
+let v = createVector(x, y);
+
+// Arithmetic (modifies in place)
+v.add(other);        // vector addition
+v.sub(other);        // subtraction
+v.mult(scalar);      // scale
+v.div(scalar);       // inverse scale
+v.normalize();       // unit vector (length 1)
+v.limit(max);        // cap magnitude
+v.setMag(len);       // set exact magnitude
+
+// Queries (non-destructive)
+v.mag();             // magnitude (length)
+v.magSq();           // squared magnitude (faster, no sqrt)
+v.heading();         // angle in radians
+v.dist(other);       // distance to other vector
+v.dot(other);        // dot product
+v.cross(other);      // cross product (3D)
+v.angleBetween(other); // angle between vectors
+
+// Static methods (return new vector)
+p5.Vector.add(a, b);      // a + b → new vector
+p5.Vector.sub(a, b);      // a - b → new vector
+p5.Vector.fromAngle(a);   // unit vector at angle
+p5.Vector.random2D();     // random unit vector
+p5.Vector.lerp(a, b, t);  // interpolate
+
+// Copy
+let copy = v.copy();
+```
+
+## Signed Distance Fields (2D)
+
+SDFs return the distance from a point to the nearest edge of a shape. Negative inside, positive outside. Useful for smooth shapes, glow effects, boolean operations.
+
+```javascript
+// Circle SDF
+function sdCircle(px, py, cx, cy, r) {
+  return dist(px, py, cx, cy) - r;
+}
+
+// Box SDF
+function sdBox(px, py, cx, cy, hw, hh) {
+  let dx = abs(px - cx) - hw;
+  let dy = abs(py - cy) - hh;
+  return sqrt(max(dx, 0) ** 2 + max(dy, 0) ** 2) + min(max(dx, dy), 0);
+}
+
+// Line segment SDF
+function sdSegment(px, py, ax, ay, bx, by) {
+  let pa = createVector(px - ax, py - ay);
+  let ba = createVector(bx - ax, by - ay);
+  let t = constrain(pa.dot(ba) / ba.dot(ba), 0, 1);
+  let closest = p5.Vector.add(createVector(ax, ay), p5.Vector.mult(ba, t));
+  return dist(px, py, closest.x, closest.y);
+}
+
+// Smooth boolean union
+function opSmoothUnion(d1, d2, k) {
+  let h = constrain(0.5 + 0.5 * (d2 - d1) / k, 0, 1);
+  return lerp(d2, d1, h) - k * h * (1 - h);
+}
+
+// Rendering SDF as glow
+let d = sdCircle(x, y, width/2, height/2, 200);
+let glow = exp(-abs(d) * 0.02);  // exponential falloff
+fill(glow * 255);
+```
+
+## Useful Geometry Patterns
+
+### Regular Polygon
+
+```javascript
+function regularPolygon(cx, cy, r, sides) {
+  beginShape();
+  for (let i = 0; i < sides; i++) {
+    let a = TWO_PI * i / sides - HALF_PI;
+    vertex(cx + cos(a) * r, cy + sin(a) * r);
+  }
+  endShape(CLOSE);
+}
+```
+
+### Star Shape
+
+```javascript
+function star(cx, cy, r1, r2, npoints) {
+  beginShape();
+  let angle = TWO_PI / npoints;
+  let halfAngle = angle / 2;
+  for (let a = -HALF_PI; a < TWO_PI - HALF_PI; a += angle) {
+    vertex(cx + cos(a) * r2, cy + sin(a) * r2);
+    vertex(cx + cos(a + halfAngle) * r1, cy + sin(a + halfAngle) * r1);
+  }
+  endShape(CLOSE);
+}
+```
+
+### Rounded Line (Capsule)
+
+```javascript
+function capsule(x1, y1, x2, y2, weight) {
+  strokeWeight(weight);
+  strokeCap(ROUND);
+  line(x1, y1, x2, y2);
+}
+```
+
+### Soft Body / Blob
+
+```javascript
+function blob(cx, cy, baseR, noiseScale, noiseOffset, detail = 64) {
+  beginShape();
+  for (let i = 0; i < detail; i++) {
+    let a = TWO_PI * i / detail;
+    let r = baseR + noise(cos(a) * noiseScale + noiseOffset,
+                          sin(a) * noiseScale + noiseOffset) * baseR * 0.4;
+    vertex(cx + cos(a) * r, cy + sin(a) * r);
+  }
+  endShape(CLOSE);
+}
+```
+
+## Clipping and Masking
+
+```javascript
+// Clip shape — everything drawn after is masked by the clip shape
+beginClip();
+  circle(width/2, height/2, 400);
+endClip();
+// Only content inside the circle is visible
+image(myImage, 0, 0);
+
+// Or functional form
+clip(() => {
+  circle(width/2, height/2, 400);
+});
+
+// Erase mode — cut holes
+erase();
+  circle(mouseX, mouseY, 100);  // this area becomes transparent
+noErase();
+```