Reposted by Aleen Rotor
p5 did a talk about its JavaScript shader system at Libre Graphics Meeting earlier this week. recording just got put online if anyone wants to check it out! www.youtube.com/watch?v=uJX9...
youtube.com
Uplink 2026 - Beginner-Friendly Shader Programming in p5.js v2
YouTube video by media.ccc.de
![code using default PI and HALF_PI p5.js predefined variables:
for (let i = 0; i < N + 1; i++) {
for (let j = 0; j < M + 2; j++) {
stroke(COLORS[int(random(0, COLORS.length))])
arc(i * SIZE + MARGIN, j * SIZE + MARGIN, SIZE - RATIO, SIZE - RATIO, 0, HALF_PI)
stroke(COLORS[int(random(0, COLORS.length - 1))])
arc(i * SIZE + MARGIN, j * SIZE + MARGIN, SIZE - RATIO, SIZE - RATIO, PI, -HALF_PI)
}
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:pvscoop4vkedxqbafa4phdo4/bafkreid3ykop7b234ju6fntgpc2xf7tmnugtey5ivlydk5ryyyr2przidi)
![Code changing default PI and HALF_PI values
PI = 4
HALF_PI = PI / 2
for (let i = 0; i < N + 1; i++) {
for (let j = 0; j < M + 2; j++) {
stroke(COLORS[int(random(0, COLORS.length))])
arc(i * SIZE + MARGIN, j * SIZE + MARGIN, SIZE - RATIO, SIZE - RATIO, 0, HALF_PI)
stroke(COLORS[int(random(0, COLORS.length - 1))])
arc(i * SIZE + MARGIN, j * SIZE + MARGIN, SIZE - RATIO, SIZE - RATIO, PI, -HALF_PI)
}
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:pvscoop4vkedxqbafa4phdo4/bafkreidt4pjctiaaej4ojejj3xinetx622ruiaye5maxjawx5hptzm2n74)
![function setup() {
const WIDTH = TAU * TAU * TAU * TAU
const HEIGHT = TAU * TAU * TAU * TAU
const START = TAU - TAU
const BASE = TAU / TAU
const SIZE = TAU + TAU + TAU
const COLORS = [
"#AAAFFF",
"#BBBFFF",
"#CCCFFF",
"#DDDFFF",
"#EEEFFF",
"#FFFAAA",
"#FFFBBB",
"#FFFCCC",
"#FFFDDD",
"#FFFEEE"
]
createCanvas(WIDTH, HEIGHT)
background(COLORS[START])
noStroke()
for (let i = START; i < WIDTH; i += SIZE) {
for (let j = START; j < HEIGHT; j += SIZE) {
const a = parseInt((i + BASE) % (COLORS.length - BASE))
const b = parseInt((j + BASE) % (COLORS.length - BASE))
const c = parseInt((i + BASE + BASE) % (COLORS.length - BASE))
fill(COLORS[c])
circle(i, j, SIZE)
fill(COLORS[a])
circle(i + TAU, j - TAU, SIZE)
fill(COLORS[b])
circle(i - TAU, j + TAU, SIZE)
}
}
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:pvscoop4vkedxqbafa4phdo4/bafkreiavi6zhgf5it4oegfxa5zuzt3x5kaspy4fk5ojpvopryqkmnrr4sm)
