adapt size to a real canvas and invert contrast

nclslbrn · Feb 6, 2025 · f783eba · f783eba
1 parent 3787d3b
commit f783eba
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/sketch/triangles-and-nothing-else/glsl/triangles.frag b/sketch/triangles-and-nothing-else/glsl/triangles.frag
@@ -28,13 +28,13 @@ vec2 rotate2D (vec2 _st, float _angle) {
 
 void main() {
     vec2 st = gl_FragCoord.xy / u_resolution.xy;
-    st *= 1.05;
+    st *= 1.2;
 
-    vec3 color = vec3(.85);
+    vec3 color = vec3(.05);
 
     for (int i = 0; i <= int(MAX_CELL); i++) {
         if (i < u_numCell) {
-            vec2 cellPos = vec2(0.025) + vec2(u_cell[i].xy);
+            vec2 cellPos = vec2(0.1) + vec2(u_cell[i].xy);
             vec2 cellSiz = vec2(u_cell[i].zw);
             vec2 stToCell = st - cellPos;
 
@@ -46,7 +46,7 @@ void main() {
                         vec2 _st = fract(((st-cellPos)/cellSiz)*2.);
                         _st = rotate2D(_st, PI*(float(i)*.5));
                         float tri = step(_st.x, _st.y);
-                        color = vec3(mix(0.15, 0.85, tri));
+                        color = vec3(mix(0.05, 0.85, tri));
                     }
                 }
             }

diff --git a/sketch/triangles-and-nothing-else/index.js b/sketch/triangles-and-nothing-else/index.js
@@ -8,13 +8,13 @@ import p5 from 'p5'
 const containerElement = document.getElementById('windowFrame'),
     loader = document.getElementById('loading'),
     dpr = Math.round(window.devicePixelRatio) || 1,
-    S = 1200
+    S = [1500, 2060]
 
 let canvas, numSplit, grid, shader
 
 const sketch = (p5) => {
     p5.setup = () => {
-        canvas = p5.createCanvas(S, S, p5.WEBGL)
+        canvas = p5.createCanvas(S[0], S[1], p5.WEBGL)
         shader = p5.createShader(vertSrc, fragSrc)
         p5.noStroke()
         p5.noLoop()
@@ -23,7 +23,7 @@ const sketch = (p5) => {
     p5.draw = () => {
         p5.blendMode()
         p5.shader(shader)
-        shader.setUniform('u_resolution', [S * dpr, S * dpr])
+        shader.setUniform('u_resolution', [S[0] * dpr, S[1] * dpr])
         shader.setUniform('u_numCell', grid.length)
         shader.setUniform('u_cell', grid.flat())
         p5.rect(S * -0.5, S * -0.5, S, S)
@@ -53,7 +53,7 @@ const sketch = (p5) => {
     }
     sketch.capture = () => p5.saveCanvas(canvas, 'Triangles-and-nothing-else.jpg')
     sketch.shuffle = () => {
-        numSplit = 2 + Math.ceil(Math.random() * 15)
+        numSplit = 2 + Math.ceil(Math.random() * 8)
         grid = [[0.5, 0.5, 1, 1]]
         for (let i = 0; i < numSplit; i++)
             grid = sketch.splitCell(