Public
Edited
Mar 7, 2023
tiltwarpRegular = await FileAttachment("TiltWarp-Regular.ttf").url()
p5(sketch => {
const height = 400;
const size = 280;
let mouseX = 0;
let font;
let points = [];
let bbox;
let simple = [];
let filled = [];
const y = height/2 + 50;
// const text = 'MIT MEDIA';
const text = 'MIT';
let isMouseHover = false;
sketch.preload = () => {font = sketch.loadFont(tiltwarpRegular);};
sketch.setup = function() {
const renderer = sketch.createCanvas(width, height);
sketch.background("#ffffff");
// sketch.rectMode(sketch.CENTER);
renderer.elt.addEventListener("mouseleave", function (event) {
isMouseHover = false
}, false);
renderer.elt.addEventListener("mouseover", function (event) {
isMouseHover = true
}, false);
sketch.textAlign(sketch.CENTER, sketch.BASELINE);
sketch.textSize(size);
sketch.textFont(font);
points = font.textToPoints(text, width/2, y, size, {
sampleFactor: 5,
simplifyThreshold: 0
});
bbox = font.textBounds(text, width/2, y, size);
let ys = points.map(p => p.y);
ys = [...new Set(ys)].sort();
const ymax = Math.max(...ys);
const ymin = Math.min(...ys);
// for (let i = 0; i < ys.length; i++) {
// const row = points.filter(p => (p.y == ys[i]));
// let x = 0;
// for (let xsi = 0; xsi<row.length; xsi++) {
// const xc = row[xsi];
// if (xc.x > x+10) {
// simple.push(xc);
// }
// x = xc.x;
// }
// }
// console.log(simple);
const incr = 6;
for (let i = ymin; i <= ymax; i += incr) {
const row = points.filter(p => (p.y >= i && p.y < i+incr));
let xs = row.map(p => p.x);
xs = [...new Set(xs)].sort();
const xl = Math.min(...xs);
const xr = Math.max(...xs);
let x = xl;
let fill = true;
for (let xsi = 0; xsi<xs.length; xsi++) {
const xc = xs[xsi];
if (xc > x+1) {
while (fill && x < xc) {
filled.push({x: x, y: i, aug: row.length});
x += incr;
}
fill = !fill;
}
x = xc;
}
}
console.log(filled);
};
sketch.draw = function() {
if (isMouseHover) {
mouseX = sketch.mouseX;
}
sketch.background("#ffffff");
sketch.fill(0, 102, 153, 170);
sketch.noStroke();
// sketch.text(text, width/2, y);
// sketch.fill(0,0,0,0);
// sketch.stroke(255,0,0);
// sketch.rect(bbox.x, bbox.y, bbox.w, bbox.h);
// let bx = -bbox.x * width / bbox.w;
// let by = -bbox.y * height / bbox.h
// sketch.translate(sketch.map(mouseX, 0, width, 0, bx), 0);
sketch.translate(-bbox.w/2, 0);
// for (let i = 0; i < points.length; i++) {
// let p = points[i];
// sketch.circle(p.x, p.y, 4);
// }
// for (let i = 0; i < simple.length; i++) {
// let p = simple[i];
// sketch.circle(p.x, p.y, 5);
// }
// for (let i = 0; i < filled.length; i++) {
// let p = filled[i];
// sketch.circle(p.x, p.y, 1);
// }
const a = sketch.map(mouseX, 0, width, 0, 100);
for (let i = 0; i < filled.length; i++) {
let p = filled[i];
let cap = Math.max(p.y, height/2);
let s = a*sketch.map(cap, height/2, height*0.7, 0, 1);
let px = p.x + s*sketch.map(sketch.noise(mouseX+i*2),0,1,-1,1);
let py = p.y + s*sketch.map(sketch.noise(mouseX+i*2+1),0,1,-1,1);
sketch.circle(px, py, 4);
}
}
})
import {p5} from "@tmcw/p5"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
