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 Butterflies! They are winged insects from the lepidopteran suborder Rhopalocera, characterized by large, often brightly coloured wings that often fold together when at rest, and a conspicuous, fluttering flight. The group comprises the superfamilies Hedyloidea (moth-butterflies in the Americas) and Papilionoidea (all others). The oldest butterfly fossils have been dated to the Paleocene, about 56 million years ago, though they likely originated in the Late Cretaceous, about 101 million years ago.

Instructions

For the submission deadline please check Moodle!

Submit on Moodle (as a single Zip):

1. Reference butterfly 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 butterfly

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)
// butterfly: Monarch Butterfly
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 Butterflies