iiinova — where your digital self keeps evolving

Vanessa Freudenberg @codefrau.bsky.social · 16/03/2025

You wouldn’t believe how long it took me to find my very obvious typo 🤦🏻‍♀️ The symptom was that the output looked red and white 🔴⚪️ when it was supposed to be rainbowey 🌈

$#version 300 es in ivec2 xyIdIx; // position in upper 16 bits, id and index in lower 16 bits uniform vec2 screenScale; // half width/height of screen uniform float spotSize; // size of spot uniform uint colorIdx; // start of spots in display table out vec3 v_color; // color of spot vec3 hue(float h) { h = mod(h, 1.0); float r = abs(h * 6.0 - 3.0) - 1.0; float g = 2.0 - abs(h * 6.0 - 2.0); float b = 2.0 - abs(h * 6.0 - 4.0); return clamp(vec3(r, g, b), 0.0, 1.0); } void main() { ivec2 pos = xyIdIx >> ivec2(16, 16); // sign extend 16 bits to 32 uint idx = uint(xyIdIx.y & 65536); // 16 bit index if (idx < colorIdx) { float fraction = float(idx) / float(colorIdx); // map to [0, 1) v_color = hue(float(idx) / float(colorIdx)); // color by table index } else { v_color = vec3(1.0); // default: white } gl_Position = vec4(vec2(pos) / screenScale, 0.0, 1.0); gl_PointSize = spotSize * 512.0 / max(screenScale.x, screenScale.y); }$

020

Vanessa Freudenberg @codefrau.bsky.social · 12/03/2025

“in terms of program debugging difficulty the problem was a lulu.” — Ivan Sutherland (1963!), “Sketchpad,” pg. 76

$In concept the edge detection problem is trivial. In terms of program time for lines and circles the problem is a small fraction of the total computational load of the system, but in terms of program debugging difficulty the problem was a lulu. For example, the computation of the intersection of a circle with any of the edges of the scope is easy, but computation of the intersection of a circle with all four edges may result in as many as eight intersections, same pairs of which maybe identical, the scope corners. Now which of these intersections are actually to be used as starts of circle arcs?$

010

Vanessa Freudenberg @codefrau.bsky.social · 06/03/2025

I figured out how to keep my fixed-aspect canvas centered but as-large-as-possible in pure CSS 🥳 (I didn’t want to use object-fit because it distorts JS event positions) Try it here (resize the window or turn your phone) codefrau.github.io/Smalltalk78/...

#canvas {
width: auto;
height: 100%;
}
@media (max-aspect-ratio: 4/3) {
#canvas {
width: 100%;
height: auto;
}
}

010

Vanessa Freudenberg @codefrau.bsky.social · 18/02/2025

Played a bit more – recursion is fun! 👸🏻🛡️ 🐢🐢🐢 🐢🐢 🐢 💃🏻 codepen.io/codefrau/pen...

findShieldBreak = (dmgs, shld, pos=0) =>
dmgs.length == 0 ? -1
: shld <= dmgs[0] ? pos
: findShieldBreak(dmgs.slice(1), shld - dmgs[0], pos + 1)

110

Vanessa Freudenberg @codefrau.bsky.social · 17/02/2025

findShieldBreak = (dmgs, shld) => dmgs.findIndex(dmg => (shld -= dmg) < 0) 👸🏻🛡️🔥🔥🔥🐉 codepen.io/codefrau/pen...

240

Vanessa Freudenberg @codefrau.bsky.social · 04/02/2025

That was fun! function evaluatePostfix(s) { let a = [] for (let c of s) a.push(isNaN(+c) ? eval(a.splice(-2).join(c)) : c); return a.pop() } My CodePen does the infix conversion first and evals at the end: codepen.io/codefrau/pen...

Screenshot of the codepen and its output

250

Vanessa Freudenberg @codefrau.bsky.social · 28/11/2024

Trying a new profile picture www.instagram.com/p/CvqRxdlPGsg/

Selfie of me smiling into the camera with asymmetric, purple hair, matching purple lipstick and glasses, in a navy summer dress with small flower ornaments, a golden necklace with a V pendant sitting on a bench in front of an ivy-covered wall

020