p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
s.setup = function () {
s.createCanvas(w, h);
s.noLoop();
};
s.draw = function () {
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.line(5, ch / 2, cw - 5, ch / 2)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
})
p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
s.setup = function () {
s.createCanvas(w, h);
s.noLoop();
};
s.draw = function () {
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.rotate(s.random(0, 180))
s.line(5, ch / 2, cw - 5, ch / 2)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
})
p5((s) => {
let w = 600; // width
let h = 200; // height
s.setup = function () {
s.createCanvas(w, h);
};
s.draw = function () {
s.clear()
s.strokeWeight(5)
// first line (light blue): random
let x1 = s.random(0, 600)
s.stroke("#f00")
s.line(x1, 0, x1, h)
// second line (dark blue): noise
let x2 = s.noise(s.frameCount * 0.01) * 600
s.stroke("#00f")
s.line(x2, 0, x2, h)
};
})
p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
let noiseScale = 0.0001
s.setup = function () {
s.createCanvas(w, h);
s.noLoop();
};
s.draw = function () {
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.rotate(s.noise(x * noiseScale, y * noiseScale) * 180)
s.line(5, ch / 2, cw - 5, ch / 2)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
})
p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
let noiseScaleSpace = 0.0001
let noiseScaleTime = 0.0005
s.setup = function () {
s.createCanvas(w, h);
};
s.draw = function () {
s.clear()
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.rotate(s.noise(x * noiseScaleSpace, y * noiseScaleSpace, s.frameCount * noiseScaleTime) * 180)
s.line(5, ch / 2, cw - 5, ch / 2)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
})
import {p5} from "@thometnanni/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.
