Week 2 Shader


This is a result of experimentation. I just multiplied the canvas by 12, a line that was formed and commented out following along to class. Adding zeroes to 12 till it was 1.2 million, with no particular reason, just liked the result at 1200000.

My approach is usually pushing/decimating a quality, attribute, variable to see what happens and is saved based on interesting results.

I was trying to make a pattern design that I liked, satisfied with a result I went on to push some numbers to see what some lines of code actually do. Pushed the pattern to the point that it seemed to render blank and return to a result along the way that I liked.

I made a shapes shader but ended up animating it and although very pleased with the tweaked and experimented results it doesn’t open the same as it was made, though sometimes it does?

Throughout this lesson I grasped a lot more understanding of coding shaders. Review and iterations are likely approaches to further learning.

// Author: Joshua Linton
// Title: Breaking Patterns
// Reference: code is derived from following along to Shader Session: 2D Patterns, asynchronous lecture,
// from DIGF3011 - OCADU - Prof. J. Rotsztain

#ifdef GL_ES
precision mediump float;

uniform vec2 u_resolution;
uniform float u_time;

vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices) {
 st *= grid;
 indices = floor(st);
 st = fract(st);
 return st;

float drawRectangle(vec2 st, vec2 pos, vec2 size) {
 float result = 1.0;
 vec2 border = (1.0-size)/2.;
 st = st - pos + vec2(0.5);
 result = step( border.x, st.x);
 result *= step( border.x, 1.0-st.x);
 result *= step( border.y, st.y);
 result *= step( border.y, 1.-st.y);
 return result;

void main() {
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 st.x *= u_resolution.x/u_resolution.y;
 st *= 1200000.;
 //It is through this line that I have transformed a 64 by 24 grid with internal grids into this result.
 //Multiplying the canvas by 1.2 million.
 //This is quite typical, my immediate experimentation is always to begin adding zeroes to any number in formula.
 vec2 indices;
 st = createGrid( st, vec2(64., 24.), indices);
 vec3 color = vec3(0.);
 if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 0.){
 st = createGrid(st, vec2(5.0), indices);
 color = vec3(0.006,1.000,0.607);
 float b = drawRectangle(st, vec2(0.5), vec2(0.5));
 color = mix( color, vec3(0.2, 0.3, 0.9), b);
 } else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.0){
 color = vec3(0.605,0.942,1.000);
 } else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 1.0){
 st - createGrid(st, vec2(2.0), indices);
 color = vec3(0.000,0.800,0.716);
 float d = drawRectangle(st, vec2(0.5), vec2(0.5));
 color = mix( color, vec3(0.051,1.000,0.541), d);
 } else {
 color = vec3(1.000,0.910,0.018);

 gl_FragColor = vec4(color,1.0);

One thought on “Week 2 Shader”

  1. Fun approach to pushing the functionality to its logical end. Everything changes dramatically with the addition of that last zero.
    The BoS editor doesn’t provide a large enough window to show the kind of detail from a grid that large, so you’re seeing some very wild aliasing. I’m surprised to see two distinct patterns-at the top and the bottom.
    In the future, I encourage you to play with shapes a bit more in these sketches/exercises. For example, try addition additional shapes in the different grid cells.

Leave a Reply