In this project, you will be making a fragment shader based on a topic. You will have to design a generative design function in the shader to procedurally generate a design, without using any textures.

The projects will be made publicly on the class website. You can opt to use your real name or a pseudonym to remain anonymous if you prefer.

Topic

This years topic is Poison Dart Frogs! These frogs are members of the Dendrobatidae family and are native to Central and South America. Their bright colours are correlated with their toxicity.

Instructions

For the submission deadline please check Moodle!

Submit on Moodle (as a single Zip):

1. Reference poison dart frog image
2. Fragment shader code (use filename shader.glsl)

At the top of your shader please include a comment with:

1. Name you want to appear with your shader (can be real name or pseudonym)
2. 【optional】Scientific name of the poison dart frog

Hints:

• You can and probably should use the noise functions from webgl-noise
• Computation speed is not an issue
• Feel free to use any techniques either learned in class or elsewhere

Editor

You can edit and test your shader live here! To save your shader please click on the triangle icon in the bottom-right. Please note that your work here will not be saved! Make sure to download often or work offline and copy here to test!

// credit: jikihakase (will show up on website)
// frog: Epipedobates tricolor
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
   vec2 st = gl_FragCoord.xy/u_resolution.xy;
   float mask = 1.0;
   mask *= step( 0.3, distance( st.xy, vec2(0.5, 0.4) ) );
   mask *= step( 0.25, distance( st.xy, vec2(0.6, 0.7) ) );
   mask *= step( 0.25, distance( st.xy, vec2(0.4, 0.7) ) );
   colour_out = vec4( st.x, st.y, abs(sin(3.0*u_time)), 1.0 );
   colour_out *= 1.0-mask;
}

Some Examples of Poison Dart Frogs