Forked from moe/exampleP5sketch
Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { sketch } from "https://esm.town/v/moe/p5"
import type * as p5 from "npm:@types/p5"
export const title = "Lost Keys 🎹"
export default sketch(import.meta.url, title)
let canvasSize
let numberOfSquares
let gridSize
let canvasGap
let effectiveCanvasSize
let shiftRate
let minInsetFactor
let maxInsetFactor
let hueBase
export function setup() {
canvasSize = 800
numberOfSquares = Math.floor(random(4, 10))
// shiftRate = random(0.0, 0.4)
// minInsetFactor = 0.01;
// maxInsetFactor = 0.1;
// hueBase = random(360);
canvasGap = canvasSize * 0.05
effectiveCanvasSize = canvasSize - 2 * canvasGap
gridSize = effectiveCanvasSize / numberOfSquares
createCanvas(canvasSize, canvasSize)
colorMode(HSL, 360, 100, 100)
// noLoop();
// saveGif("p5js-" + new Date().getTime(), 12);
}
export function draw() {
background(0)
// hueBase += 0.001;
// if (hueBase > 1) hueBase -= 1;
for (let x = 0; x < numberOfSquares; x++) {
for (let y = 0; y < numberOfSquares; y++) {
let x1 = x * gridSize + canvasGap
let y1 = y * gridSize + canvasGap
drawSquare(x1, y1)
}
}
}
function drawSquare(x, y) {
let inset = gridSize * 0.06
let size = gridSize - inset
let centerX = x + size / 2 + inset / 2
let centerY = y + size / 2 + inset / 2
let angles = [0, TWO_PI * 0.5, TWO_PI * 0.25, TWO_PI * 0.75]
// let angle = random(angles);
let angleNoiseScale = 10
let angleNoise = noise(x * angleNoiseScale, y * angleNoiseScale)
let angle = angles[floor(angleNoise * angles.length)]
push()
translate(centerX, centerY)
rotate(angle)
let noiseScale = 0.002
let shiftNoise = noise(x + frameCount * noiseScale, y + frameCount * noiseScale)
let shift = size * shiftNoise
// let shift = size * random(shiftRate, 1-shiftRate);
// let hue = ((noise(x * noiseScale, y * noiseScale) + hueBase) % 1) * 360;
noStroke()
// fill(hue, 100, 60);
// fill(100, 50, 50);
fill(255)
beginShape()
vertex(-size / 2 + shift + inset / 2, -size / 2) // Top-left corner
vertex(size / 2, -size / 2) // Top-right corner
vertex(size / 2, size / 2) // Bottom-right corner
vertex(-size / 2 + (size - shift) + inset / 2, size / 2) // Bottom-left corner
endShape(CLOSE)
fill(13)
beginShape()
vertex(-size / 2, -size / 2) // Top-left corner
vertex(size / 2 - (size - shift) - inset / 2, -size / 2) // Top-right corner
vertex(size / 2 - shift - inset / 2, size / 2) // Bottom-right corner
vertex(-size / 2, size / 2) // Bottom-left corner
endShape(CLOSE)
pop()
}
export function keyPressed() {
if (key == "i") {