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 year’s topic is Siamese Fighting Fish (Betta splendens, also known simply as Betta)! They are fresh water fishes that live in Southeast Asia, and are among the most popular aquarium fish due to their morphology and low-maintenance. They are highly territorial fish that were originally bred for fighting matches, The males will make bubble nests and will take care of the eggs and larva at the beginning of their lifes. Despite being often kept with few or no plants, they prefer heavy vegetation in their environment.

Instructions

For the submission deadline please check Moodle!

Submit on Moodle (as a single Zip):

1. Reference betta 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】Name of the betta (if applicable)

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 Bettas