Skip to content

Commit 2102a17

Browse files
kentquirkkentquirk
committed
publish subwaytextile
1 parent c526f53 commit 2102a17

File tree

5 files changed

+195
-0
lines changed

5 files changed

+195
-0
lines changed

‎docs/_images/subwaytextile.png‎

13.2 KB
Loading

‎docs/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,16 @@ <h1>P5 experiments</h1>
3838
// "subtitle": "",
3939
// "body": "",
4040
// },
41+
{
42+
"name": "subwaytextile",
43+
"image": "_images/subwaytextile.png",
44+
"alt": "A pattern of colored lines forming a grid that is similar to the patterns on the seats in a subway.",
45+
"caption": "Genuary 9, 2025",
46+
"title": "Subway Textile",
47+
"subtitle": "(The textile design patterns of public transport seating)",
48+
"body": "Vertical and horizontal stripes in 4 colors, with the spacing between them varying sinusoidally.",
49+
50+
},
4151
{
4252
"name": "iso",
4353
"image": "_images/iso.png",

‎docs/subwaytextile/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>Subway Textile</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>"The textile design patterns of public transport seating."</h1>
22+
<div id="sketch-holder">
23+
</div>
24+
<p>
25+
</p>
26+
<h2>Controls</h2>
27+
<ul>
28+
<li><b>p or touch</b> -- pause and unpause the sketch.</li>
29+
<li><b>r</b> -- restart the sketch.</li>
30+
</p>
31+
</body>
32+
</html>

‎docs/subwaytextile/sketch.js‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
let paused = false;
2+
let cover;
3+
4+
class Separations {
5+
constructor(wavelength, amplitude, c1, c2) {
6+
this.wavelength = wavelength;
7+
this.amplitude = amplitude;
8+
this.c1 = c1;
9+
this.c2 = c2;
10+
}
11+
12+
getSin(x) {
13+
return this.amplitude * sin(360 * x / this.wavelength);
14+
}
15+
16+
getSeparation(x) {
17+
return int(this.amplitude - Math.abs(this.getSin(x))) + 4;
18+
}
19+
20+
getColor(x) {
21+
return (this.getSin(x) < 0) ? this.c2 : this.c1;
22+
}
23+
}
24+
25+
function restart() {
26+
cover = new SeatCover();
27+
}
28+
29+
function windowResized() {
30+
resizeCanvas(windowWidth, windowHeight);
31+
restart();
32+
}
33+
34+
function touchStarted() {
35+
paused = !paused;
36+
}
37+
38+
function keyTyped() {
39+
switch (key) {
40+
case 'p':
41+
paused = !paused;
42+
break;
43+
case 'c':
44+
cover.change();
45+
cover.recolor();
46+
break;
47+
case 'r':
48+
restart();
49+
break;
50+
}
51+
}
52+
53+
function setup() {
54+
let canvas = createCanvas(windowWidth, windowHeight);
55+
canvas.parent('sketch-holder');
56+
frameRate(20);
57+
restart();
58+
}
59+
60+
class SeatCover {
61+
constructor() {
62+
this.hwavelength = height / 2;
63+
this.hamplitude = 8;
64+
this.vwavelength = width / 3;
65+
this.vamplitude = 6;
66+
// this.hcolor1 = color(200, 0, 0);
67+
// this.hcolor2 = color(222, 122, 0);
68+
// this.vcolor1 = color(50, 50, 220);
69+
// this.vcolor2 = color(120, 120, 120);
70+
this.hcolor1 = color(200, 0, 0, 200);
71+
this.hcolor2 = color(222, 50, 50, 182);
72+
this.vcolor1 = color(50, 50, 220, 208);
73+
this.vcolor2 = color(120, 120, 120, 228);
74+
}
75+
76+
change() {
77+
this.hwavelength = random([height / 2, height / 3, height / 4, height / 5]);
78+
this.hamplitude = int(random(12)) + 3;
79+
this.vwavelength = random([width / 2, width / 3, width / 4, width / 5]);
80+
this.vamplitude = int(random(12)) + 3;
81+
}
82+
83+
recolor() {
84+
this.hcolor1 = color(random(255), random(255), random(255), 200);
85+
this.hcolor2 = color(random(255), random(255), random(255), 200);
86+
this.vcolor1 = color(random(255), random(255), random(255), 200);
87+
this.vcolor2 = color(random(255), random(255), random(255), 200);
88+
}
89+
90+
draw() {
91+
let seph = new Separations(
92+
this.hwavelength,
93+
this.hamplitude,
94+
this.hcolor1,
95+
this.hcolor2
96+
);
97+
let sepv = new Separations(
98+
this.vwavelength,
99+
this.vamplitude,
100+
this.vcolor1,
101+
this.vcolor2
102+
);
103+
104+
let x = sepv.getSeparation(0);
105+
let y = seph.getSeparation(0);
106+
strokeWeight(2);
107+
while (x < width) {
108+
stroke(sepv.getColor(x));
109+
line(x, 0, x, height);
110+
x += sepv.getSeparation(x);
111+
}
112+
while (y < height) {
113+
stroke(seph.getColor(y));
114+
line(0, y, width, y);
115+
y += seph.getSeparation(y);
116+
}
117+
}
118+
}
119+
120+
function draw() {
121+
clear();
122+
background(200);
123+
124+
cover.draw();
125+
if (!paused && frameCount % 50 == 0) {
126+
cover.change();
127+
cover.recolor();
128+
}
129+
}

‎docs/subwaytextile/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)