top of page
Search

Creative Coding Final Work



Fragment Shader Learning


My coding：



Learning target：


1. Learn the application of glsl in the three.js framework.

2. Learn basic data types

3. Use some functions:

sin(),cos(),tan(),asin(),acos(),atan(),pow(),exp(),log(),sqrt(),abs(),sign(),

floor(),fract(),mod(),min(), max(),step(),smoothstep()



Rreference


Useful littile function -


The book of Shaders -


Cdnjs libraries -



Learning process


In fact, I just discovered some interesting usages, but I don't have enough time to make more dazzling effects on final work. Most of my time is spent on understanding the code. I enjoy this process of exploration, but the results I have made so far are not my most satisfactory.


1. I understand the difference between step() and smoothstep()

The step(): interpolation receives two parameters. The first one is the limit or

threshold, while the second one is the value we want to check or pass. Any

value under the limit will return 0.0 while everything above the limit will return 1.0.


Smoothstep(): Given a range of two numbers and a value, this function will

interpolate the value between the defined range. The two first parameters are for the

beginning and end of the transition, while the third is for the value to interpolate.


2. How to mix colors

basic coding

  vec3 colorA = vec3(0.149,0.143,0.687);
  vec3 colorB = vec3(1.156,0.833,0.225);
  voin main (){
  vect color = vec(0,0);
  
  float pct = abs(sin(time));
  
  color = mix (colorA, colorB，pct);
  
  gl_FragColor = vec4(color,1.0);

HSB (Hue, Saturation and Brightness): rgb2hsv() and hsv2rgb() functions

By mapping the position on the x axis to the Hue and the position on the y axis to

the Brightness, we obtain a nice spectrum of visible colors. This spatial distribution

of color can be very handy; it's more intuitive to pick a color with HSB than with

RGB.


YUV colour

YUV is a color space used for analog encoding of photos and videos that takes into

account the range of human perception to reduce the bandwidth of chrominance

components.


3. Learn to draw simple graphics

this part of the study is very helpful to my project.

What is distance field? Effect: Add graphics or apply effects like transition borders.

Move rotate and zoom? 2D Matrices - The working mechanism of the two-dimensional matrix: Rotate and move objects by transforming the coordinate system


First pracitce


Second pracitce



I added a rotation effect to rotate around the center of the screen. But the overall

effect is not good, so commented out.

mat2 rotate2d(float _angle){
     return mat2(cos(_angle),-sin(_angle),
     sin(_angle),cos(_angle));
     }

Using the chaos, separate the integer and decimal parts of the coordinate system,

use step and smoothstep to output random changes, and define a frequency that follows the time function.

float random (in float x) {
      return fract(sin(x));
     }
float random (in vec2 st) {
      return fract(sin(dot(st.xy, vec2(time*0.001,78.233)))
       * 43758.5453123);
     }
float randomSerie(float x, float freq, float t) {
      return smoothstep(0.5,random(floor(x*freq)-floor(t)),x);
      return step(0.5,random( floor(x*freq)-floor(t);

Change the color: YUV colour 

 mat3 yuv2rgb = mat3(1.0, 0.2, 0.13983,
                     1.0, 1.39465, -0.58060,
                     1.0, 3.03211, 0.134) * mouse.x;



Future development


1. Learn noise: The randomness of nature.Write my own float noise (float x) function.

2. Learn 3D graphic and vertex shader


댓글

bottom of page