Why?What?LoopsTemplateThe CursorShapesColoursVariables / Numbers / TimeConditions11/3 MoiréTransformArcs / Beziers / CurvesImage BasicsImage SlicingImage Pixels11/10 GlitchCameraAudioTypography17/11 TypographyRecap24/11 SketchingSave Images and Image SequencesNoiseLines and Curves01/12 Exporting High Res Images01/19 Exporting Video Frames
12/08 Patterns
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.translate(cw / 2, ch / 2)
s.ellipse(0, 0, cw, ch)
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 () {
s.noFill()
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.translate(cw / 2, ch / 2)
let size = s.random(0, 50)
s.ellipse(0, 0, size, size)
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 noiseScale = 0.01
s.setup = function () {
s.createCanvas(w, h);
s.noLoop();
};
s.draw = function () {
s.noFill()
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.translate(cw / 2, ch / 2)
let size = s.noise(x * noiseScale, y * noiseScale) * 50
s.ellipse(0, 0, size, size)
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.
