Skip to content

Commit 4020b6b

Browse files
kfahn22kfahn22
committed
adding sketch + train tiles
1 parent a638b23 commit 4020b6b

File tree

18 files changed

+342
-0
lines changed

18 files changed

+342
-0
lines changed

‎tile_generator/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
<meta charset="utf-8" />
8+
9+
</head>
10+
<body>
11+
<script src="sketch.js"></script>
12+
</body>
13+
</html>

‎tile_generator/sketch.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// This sketch generates tiles that can be used with the wave function collapse algorithm
2+
3+
//let textureImg;
4+
5+
// a shader variable
6+
let theShader;
7+
8+
function preload(){
9+
// load the shader
10+
// monochromatic image works best
11+
// textureImg = loadImage("Assets/blue.PNG");
12+
theShader = loadShader('starter.vert', 'starter.frag');
13+
}
14+
15+
function setup() {
16+
pixelDensity(1);
17+
// shaders require WEBGL mode to work
18+
createCanvas(600, 600, WEBGL);
19+
noStroke();
20+
}
21+
22+
function draw() {
23+
background(0);
24+
25+
// send resolution of sketch into shader
26+
theShader.setUniform('u_resolution', [width, height]);
27+
theShader.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);
28+
theShader.setUniform("iFrame", frameCount);
29+
theShader.setUniform("iTime", millis()/1000.);
30+
//theShader.setUniform("tex0", textureImg);
31+
32+
// shader() sets the active shader with our shader
33+
shader(theShader);
34+
//model(cubeObj);
35+
// rect gives us some geometry on the screen
36+
rect(0,0,width, height);
37+
38+
}
39+
40+
function mousePressed() {
41+
saveFrames('uv', 'png', 1, 1);
42+
43+
}

‎tile_generator/starter.frag

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
// Frag shader creates tiles for wave function collapse
2+
3+
#ifdef GL_ES
4+
precision mediump float;
5+
#endif
6+
7+
// Pass in uniforms from the sketch.js file
8+
uniform vec2 u_resolution;
9+
uniform float iTime;
10+
uniform vec2 iMouse;
11+
uniform float iFrame;
12+
//uniform sampler2D tex0;
13+
14+
#define S smoothstep
15+
#define CG colorGradient
16+
#define PI 3.14159
17+
#define YELLOW vec3(252,236,82)/255.
18+
#define RASPBERRY vec3(230,40,179)/255.
19+
#define BLUE vec3(49,133, 252)/255.
20+
#define GREEN vec3(75,198,185)/255.
21+
#define DARK vec3(64,63,76)/255.
22+
23+
vec3 colorGradient(vec2 uv, vec3 col1, vec3 col2, float m) {
24+
float k = uv.y*m + m;
25+
vec3 col = mix(col1, col2, k);
26+
return col;
27+
}
28+
29+
// Rotation matrix
30+
mat2 Rot(float a) {
31+
float s=sin(a), c=cos(a);
32+
return mat2(c, -s, s, c);
33+
}
34+
35+
// Copied from Inigo Quilez
36+
float sdSegment( vec2 uv, vec2 a, vec2 b) {
37+
vec2 pa = uv-a, ba = b-a;
38+
float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
39+
return length( pa-ba*h );
40+
}
41+
42+
// Shape functions from Inigo Quilez
43+
float sdBox( vec2 uv, vec2 b )
44+
{
45+
vec2 d = abs(uv)-b;
46+
return length(max(d,0.0)) + min(max(d.x,d.y),0.0);
47+
}
48+
49+
float sdCircle( vec2 uv, float r) {
50+
return length(uv) - r;
51+
}
52+
float ndot(vec2 a, vec2 b ) { return a.x*b.x - a.y*b.y; }
53+
float sdRhombus( vec2 uv, vec2 b )
54+
{
55+
uv = abs(uv);
56+
float h = clamp( ndot(b-2.0*uv,b)/dot(b,b), -1.0, 1.0 );
57+
float d = length( uv-0.5*b*vec2(1.0-h,1.0+h) );
58+
return d * sign( uv.x*b.y + uv.y*b.x - b.x*b.y );
59+
}
60+
61+
62+
float Arc( vec2 uv, float r1, float r2) {
63+
return abs(sdCircle(uv, r1)) - r2;
64+
}
65+
66+
// From Inigo Quilez
67+
float sdRoundedBox( vec2 uv, vec2 b, vec4 r) {
68+
r.xy = (uv.x>0.0) ? r.xy : r.zw;
69+
r.x = (uv.y>0.0) ? r.x : r.y;
70+
vec2 q = abs(uv) - b + r.x;
71+
return min( max(q.x, q.y), 0.0) + length(max(q, 0.0) ) - r.x;
72+
}
73+
74+
vec3 sdTrack( vec2 uv, float r, vec3 col) {
75+
vec2 gv = uv;
76+
vec2 st = uv;
77+
vec2 md = uv;
78+
uv.y = abs(uv.y);
79+
float s1 = abs(sdRoundedBox( uv - vec2(.4, .4), vec2(.3, .3), vec4(.175, .175, .175, .25)) ) - r;
80+
float m1 = S(.008, .0, s1);
81+
float s2 = abs(sdRoundedBox( uv - vec2(.45, .45), vec2(.3, .3), vec4(.175, .175, .175, .22)) ) - r;
82+
float m2 = S(.008, .0, s2);
83+
float s3 = sdBox((Rot(PI* 3./4.)*(md - vec2(.195, .195)) - vec2(.0, .0)), vec2(.01, .05) );
84+
float m3 = S(.008, .0, s3);
85+
float s4 = sdBox((Rot(PI* 13./16.)*(uv - vec2(.25, .15)) - vec2(.0, .0)), vec2(.01, .05) );
86+
float m4 = S(.008, .0, s4);
87+
float s5 = sdBox((Rot(PI* 15./16.)*(uv - vec2(.32, .13)) - vec2(.0, .0)), vec2(.01, .05) );
88+
float m5 = S(.008, .0, s5);
89+
gv.x = abs(gv.x);
90+
float s6 = sdBox((uv - vec2(.46, .125)), vec2(.01, .05) );
91+
float m6 = S(.008, .0, s6);
92+
float s7 = sdBox((uv - vec2(.39, .125)), vec2(.01, .05) );
93+
float m7 = S(.008, .0, s7);
94+
float s8 = sdBox((Rot(PI* 1./4.)*(md - vec2(.195, -.195)) - vec2(.0, .0)), vec2(.01, .05) );
95+
float m8 = S(.008, .0, s8);
96+
float s9 = sdBox((Rot(PI* 11./16.)*(uv - vec2(.15, .25)) - vec2(.0, .0)), vec2(.01, .05) );
97+
float m9 = S(.008, .0, s9);
98+
float s10 = sdBox((Rot(PI* 9.5/16.)*(uv - vec2(.13, .32)) - vec2(.0, .0)), vec2(.01, .05) );
99+
float m10 = S(.008, .0, s10);
100+
float s11 = sdBox((vec2(gv.x, uv.y) - vec2(.125, .46)), vec2(.05, .01) );
101+
float m11 = S(.008, .0, s11);
102+
float s12 = sdBox((vec2(gv.x, uv.y) - vec2(.125, .39)), vec2(.05, .01) );
103+
float m12 = S(.008, .0, s12);
104+
st.y = abs(st.y);
105+
// Straight train tracks
106+
float s13 = sdBox(uv - vec2(-.15, 0.), vec2(.001, 1.));
107+
float m13 = S(.008, .0, s13);
108+
float s14 = sdBox(uv - vec2(-.10, 0.), vec2(.001, 1.));
109+
float m14 = S(.008, .0, s14);
110+
float s15 = sdBox((st - vec2(-.125, .04)), vec2(.05, .01) );
111+
float m15 = S(.008, .0, s15);
112+
float s16 = sdBox((st - vec2(-.125, .11)), vec2(.05, .01) );
113+
float m16 = S(.008, .0, s16);
114+
float s17 = sdBox((st - vec2(-.125, .18)), vec2(.05, .01) );
115+
float m17 = S(.008, .0, s17);
116+
float s18 = sdBox((st - vec2(-.125, .25)), vec2(.05, .01) );
117+
float m18 = S(.008, .0, s18);
118+
float s19 = sdBox((st - vec2(-.125, .32)), vec2(.05, .01) );
119+
float m19 = S(.008, .0, s19);
120+
float m = m1 + m2 + m3 + m4 + m5 + m6 + m7 + m8 + m9 + m10
121+
+ m11 + m12 + m13 + m14 + m15 + m16 + m17 + m18 + m19;
122+
return m * col;
123+
}
124+
125+
float sdT( vec2 uv, float width) {
126+
vec2 gv = uv * 8.;
127+
float s1 = sdBox( gv - vec2(2., 0.), vec2(2.0, width) );
128+
float m1 = S(.008, .0, s1);
129+
float s2 = sdBox(gv- vec2(0.,0.), vec2(width, 5.));
130+
float m2 = S(.008, .0, s2);
131+
return max(m1, m2);
132+
}
133+
134+
vec3 circleTile( vec2 uv, vec3 col1, vec3 col2, vec3 col3, float angle) {
135+
vec2 gv = Rot(angle) * uv;
136+
float s1 = Arc(gv - vec2(.5, 0.), .2, .025);
137+
float m1 = S(.008, .0, s1);
138+
float s2 = Arc(gv - vec2(.5, 0.), .1, .025);
139+
float m2 = S(.008, .0, s2);
140+
float s3= sdCircle(gv - vec2(.5, 0.), .025);
141+
float m3 = S(.008, .0, s3);
142+
return m1* col1 + m2 * col2 + m3 * col3;
143+
}
144+
145+
float sdCorner( vec2 uv) {
146+
vec2 gv = uv * 8.;
147+
float s1 = sdBox( gv - vec2(1.51, 0.), vec2(1.75, .24) );
148+
float m1 = S(.008, .0, s1);
149+
float s2 = sdBox(gv- vec2(0.,1.51), vec2(.24, 1.75));
150+
float m2 = S(.008, .0, s2);
151+
return max(m1, m2);
152+
}
153+
154+
vec3 sdTile( vec2 uv, vec3 col1, vec3 col2, vec3 col3, float angle, float width) {
155+
vec3 col = vec3(0);
156+
vec2 gv = Rot(angle) * uv;
157+
float m1 = sdT(gv, .25);
158+
float m2 = sdCorner(vec2(gv.x, abs(gv.y)) - vec2(.1,.1));
159+
float m3 = sdCorner(vec2(gv.x, abs(gv.y))- vec2(.2,.2));
160+
vec2 st = Rot(angle + PI) * uv;
161+
float s4 = sdBox(st - vec2(.1, .1), vec2(.025, .75));
162+
float m4 = S(.008, .0, s4);
163+
float s5 = sdBox(st - vec2(.2, .2), vec2(.025, .75));
164+
float m5 = S(.008, .0, s5);
165+
return col += m1*col1 + m2*col2 + m3*col3 + m4*col2 + m5*col3;
166+
}
167+
168+
169+
float opRhombus( vec2 uv, float r1, float r2) {
170+
return abs( sdRhombus(uv, vec2(r1)) )- r2;
171+
}
172+
173+
vec3 sdRhombusTile( vec2 uv, vec3 col1, vec3 col2, vec3 col3) {
174+
175+
float s1 = opRhombus(uv, .13, .025); //center
176+
float m1 = S(.008, .0, s1);
177+
178+
float s2 = opRhombus(uv, .23, .025); // middle
179+
float m2 = S(.008, .0, s2);
180+
181+
float s3 = opRhombus(uv, .33, .025); // outer
182+
float m3 = S(.008, .0, s3);
183+
vec3 col = vec3(0);
184+
return col += m1*col1 + m2*col2 + m3*col3;
185+
}
186+
187+
vec3 sdStripes( vec2 uv, vec3 col1, vec3 col2, vec3 col3, float angle, float width) {
188+
vec3 col = vec3(0);
189+
vec2 gv = Rot(angle) * uv;
190+
float s1 = sdBox(gv - vec2(.0, .0), vec2(.026, .75));
191+
float m1 = S(.008, .0, s1); // center
192+
float s2 = sdBox(vec2(abs(gv.x), gv.y) - vec2(.1, .1), vec2(.026, .75));
193+
float m2 = S(.008, .0, s2); // middle
194+
float s3 = sdBox(vec2(abs(gv.x), gv.y) - vec2(.2, .2), vec2(.026, .75));
195+
float m3 = S(.008, .0, s3); // outer
196+
return col += m1*col1 + m2*col2 + m3*col3 ;
197+
}
198+
199+
vec3 sdTexture( vec2 uv, float angle) {
200+
vec3 texture = texture2D(tex0, uv.xy*.5+0.5).rgb;
201+
vec2 gv = Rot(angle) * uv * 8.;
202+
float s1 = sdBox( gv - vec2(2.5, 0.), vec2(2.5, .75) );
203+
float m1 = S(.008, .0, s1);
204+
float s2 = sdBox(gv- vec2(0.0,0.0), vec2(.75, 10.));
205+
float m2 = S(.008, .0, s2);
206+
return max(m1, m2)*texture;
207+
}
208+
209+
void main()
210+
{
211+
vec2 uv = (gl_FragCoord.xy - .5*u_resolution.xy)/u_resolution.y;
212+
213+
vec3 col = vec3(0);
214+
215+
// Add background color -- BLANK
216+
col += DARK;
217+
218+
// Uncomment to check for symmetry
219+
float d1 = sdSegment(uv, vec2(-.5, .0), vec2(0.5, .0));
220+
float s1 = S(.008, .0, d1); // horizontal center line
221+
float d2 = sdSegment(uv, vec2(0., -.5), vec2(0., .5));
222+
float s2 = S(.008, .0, d2); // vertical center line
223+
//col += s1 + s2;
224+
225+
// Rhombus at center, same options as BLANK
226+
vec3 rhombus_tile = sdRhombusTile(uv, BLUE, RASPBERRY, GREEN);
227+
// vec3 rhombus_tile = sdRhombusTile(uv, BLUE, BLUE, BLUE);
228+
//col = max(col, rhombus_tile);
229+
230+
// Change a (angle) to get Up, Down, Right, Left
231+
// a = 0. vertical, a = 1. horizontal
232+
float a = 0.; // Right 0., Up 1., Left 2., Down 3.
233+
234+
// Create RIGHT, UP, LEFT, DOWN tiles
235+
// vec3 tile = sdTile(uv, BLUE, RASPBERRY, GREEN, PI* a/2., .25);
236+
vec3 tile = sdTile(uv, BLUE, BLUE, BLUE, PI* a/2., .25);
237+
//col = max(tile, col);
238+
239+
// Train tracks
240+
vec2 gv = Rot(a)*uv;
241+
vec3 t = sdTrack(gv, .001, BLUE);
242+
col += t;
243+
244+
// Horizontal and Vertical Stripes
245+
// vec3 vert_stripes = sdStripes(uv, BLUE, RASPBERRY, GREEN, PI*a/2., .25);
246+
// single color version
247+
vec3 vert_stripes = sdStripes(uv, BLUE, BLUE, BLUE, PI* a/2., .25);
248+
//col = max(hor_stripes, col);
249+
//col = max(vert_stripes, col);
250+
251+
// Cross with vertical and horizontal stripes
252+
// vec3 hor_stripes = sdStripes(uv, BLUE, RASPBERRY, GREEN, PI*a/2., .25);
253+
vec3 hor_stripes = sdStripes(uv, BLUE, BLUE, BLUE, PI*a/2., .25);
254+
255+
//col = max(max(vert_stripes,horizontal_stripes), col);
256+
257+
// Pass a image to add texture (has to be fairly uniform)
258+
vec3 texture = sdTexture(uv, 0.);
259+
// col = max(texture, col);
260+
261+
// Half circles
262+
vec3 c = circleTile(uv, GREEN, RASPBERRY, BLUE, PI* a/2.);
263+
// vec3 c = circleTile(uv, BLUE, BLUE, BLUE, PI* a/2.);
264+
// col = max(c, col);
265+
266+
gl_FragColor = vec4(col,1.0);
267+
}

‎tile_generator/starter.vert

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#ifdef GL_ES
2+
precision mediump float;
3+
#endif
4+
5+
// our vertex data
6+
attribute vec3 aPosition;
7+
8+
void main() {
9+
10+
// Copy the position data into a vec4, adding 1.0 as the w parameter
11+
12+
vec4 positionVec4 = vec4(aPosition, 1.0);
13+
14+
// Scale to make the output fit the canvas
15+
positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
16+
17+
// Send the vertex information on to the fragment shader
18+
gl_Position = positionVec4;
19+
}

‎tiles1/blank.png

7.58 KB
Loading

‎tiles1/down.png

50 KB
Loading

‎tiles1/left.png

57.5 KB
Loading

‎tiles1/right.png

57.8 KB
Loading

‎tiles1/up.png

49.5 KB
Loading

‎tiles2/.DS_Store

-6 KB
Binary file not shown.

0 commit comments

Comments
 (0)