Skip to content

Commit 97b1cbb

Browse files
kentquirkkentquirk
committed
Publish layers
1 parent eeaf5e7 commit 97b1cbb

File tree

5 files changed

+169
-1
lines changed

5 files changed

+169
-1
lines changed

‎docs/_images/layersonlayers.png‎

278 KB
Loading

‎docs/index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,20 @@ <h1>P5 experiments</h1>
3838
// "subtitle": "",
3939
// "body": "",
4040
// },
41+
{
42+
"name": "layersonlayers",
43+
"image": "_images/layersonlayers.png",
44+
"alt": "Brightly colored circles, triangles, and squares on a red background, showing fading trails of their past motion.",
45+
"caption": "Genuary 2, 2025",
46+
"title": "Layers on Layers on Layers",
47+
"subtitle": "(that's the whole prompt)",
48+
"body": "Simple shapes, simple motion, but we don't clear the screen each frame, so we see layers of the movement history."
49+
},
4150
{
4251
"name": "vortech",
4352
"image": "_images/vortech.png",
4453
"alt": "An image viewed through a Voronoi mesh and colored with only vertical and horizontal lines.",
45-
"caption": "January 1, 2025",
54+
"caption": "Genuary 1, 2025",
4655
"title": "Vortech",
4756
"subtitle": "(Only vertical and horizontal lines.)",
4857
"body": "This is a Voronoi diagram overlaying an image, where each cell is colored with only vertical and horizontal lines. Doesn't really work (yet) on mobile, sorry.",

‎docs/layersonlayers/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Layers On Layers</title>
8+
9+
<link rel="stylesheet" type="text/css" href="style.css">
10+
11+
<!-- <script src="libraries/p5.min.js"></script>
12+
<script src="libraries/p5.sound.min.js"></script> -->
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
14+
<script src="https://p5play.org/v3/planck.min.js"></script>
15+
<script src="https://p5play.org/v3/p5play.js"></script>
16+
<script src="sketch.js"></script>
17+
</head>
18+
19+
<body>
20+
<a href="..">back</a>
21+
<h1>Layers On Layers</h1>
22+
<p>
23+
Simple motion, but we don't clear the screen each frame, just put a mostly-transparent rectangle over it.
24+
</p>
25+
<div id="sketch-holder">
26+
</div>
27+
<h2>Controls</h2>
28+
<ul>
29+
<li><b>p</b> -- pause and unpause the sketch.</li>
30+
<li><b>r</b> -- restart the sketch.</li>
31+
</p>
32+
</body>
33+
</html>

‎docs/layersonlayers/sketch.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
let paused = false;
2+
let n = 20;
3+
let shapes = [];
4+
let bgcolor;
5+
6+
class Shape {
7+
constructor() {
8+
this.x = random(width);
9+
this.y = random(height);
10+
this.rho = random(0, 2 * PI/10);
11+
this.size = random(10, 100);
12+
this.color = color(random(255), random(255), random(255));
13+
this.shape = random(['circle', 'square', 'triangle']);
14+
this.angle = random(0, 2 * PI);
15+
this.speed = random(-5, 5);
16+
this.alive = true;
17+
}
18+
19+
update() {
20+
this.x += this.speed * cos(this.angle);
21+
this.y += this.speed * sin(this.angle);
22+
this.angle += this.rho;
23+
24+
if (this.x > width + this.size || this.x < -this.size || this.y > height + this.size || this.y < -this.size) {
25+
this.alive = false;
26+
}
27+
}
28+
29+
display() {
30+
if (!this.alive) {
31+
return false;
32+
}
33+
fill(this.color);
34+
push();
35+
translate(this.x, this.y);
36+
rotate(this.angle * 2);
37+
switch (this.shape) {
38+
case 'circle':
39+
ellipse(0, 0, this.size, this.size);
40+
break;
41+
case 'square':
42+
rect(0, 0, this.size, this.size);
43+
break;
44+
case 'triangle':
45+
triangle(0, 0, this.size, 0, this.size / 2, this.size);
46+
break;
47+
}
48+
pop();
49+
return true;
50+
}
51+
}
52+
53+
function restart() {
54+
clear();
55+
shapes = [];
56+
bgcolor = color(random(255), random(255), random(255), 5);
57+
}
58+
59+
function windowResized() {
60+
resizeCanvas(windowWidth, windowHeight);
61+
restart();
62+
}
63+
64+
function keyTyped() {
65+
// this only works for single character keys
66+
switch (key) {
67+
case 'p':
68+
paused = !paused;
69+
break;
70+
case 'r':
71+
restart();
72+
break;
73+
}
74+
}
75+
76+
function setup() {
77+
let canvas = createCanvas(windowWidth, windowHeight);
78+
canvas.parent('sketch-holder');
79+
restart();
80+
}
81+
82+
function draw() {
83+
// Draw a black background with a low alpha to create a trail effect
84+
background(bgcolor);
85+
86+
if (!paused) {
87+
// create a random shape every n frames
88+
if (frameCount % n == 0) {
89+
shapes.push(new Shape());
90+
}
91+
if (shapes.length > 50) {
92+
restart();
93+
}
94+
for (let i = shapes.length - 1; i >= 0; i--) {
95+
shapes[i].update();
96+
if (!shapes[i].display()) {
97+
shapes.splice(i, 1);
98+
}
99+
}
100+
}
101+
102+
}

‎docs/layersonlayers/style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
html, body {
2+
margin-left: 20px;
3+
margin-right: 20px;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: 'Roboto', sans-serif;
9+
font-size: 18px;
10+
line-height: 1.5;
11+
color: #333;
12+
background-color: #fff;
13+
}
14+
15+
canvas {
16+
display: block;
17+
}
18+
19+
#sketch-holder {
20+
margin: 0;
21+
display: flex;
22+
max-width: 100%;
23+
justify-content: center;
24+
}

0 commit comments

Comments
 (0)