Add a lot of un-uploaded progress

Creativeguru97 · Jul 30, 2022 · 9aa62b4 · 9aa62b4
1 parent b5b5ed6
commit 9aa62b4
Show file tree

Hide file tree

Showing 86 changed files with 1,349 additions and 7 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/The Book of Shaders/.DS_Store b/The Book of Shaders/.DS_Store
diff --git a/The Book of Shaders/01_Hello_World/.DS_Store b/The Book of Shaders/01_Hello_World/.DS_Store
diff --git a/The Book of Shaders/01_Hello_World/index.html b/The Book of Shaders/01_Hello_World/index.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>drawContext</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
+  <script src="sketch.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+</body>
+</html>
diff --git a/The Book of Shaders/01_Hello_World/oneColor.frag b/The Book of Shaders/01_Hello_World/oneColor.frag
@@ -0,0 +1,10 @@
+/*Example:Color the entire background blue*/
+
+#ifdef GL_ES //a shader API which is automatically used by your GPU
+precision mediump float;//lowp / mediump/highp
+#endif
+
+void main() {
+    gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
+}
+//Normalizing values makes it easier to map values between variables.
diff --git a/The Book of Shaders/01_Hello_World/oneColor.vert b/The Book of Shaders/01_Hello_World/oneColor.vert
@@ -0,0 +1,12 @@
+#ifdef GL_ES
+precision mediump float;//lowp / mediump/highp
+#endif
+
+attribute vec3 aPosition;
+
+void main() {
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+  gl_Position = positionVec4;
+}
diff --git a/The Book of Shaders/01_Hello_World/sketch.js b/The Book of Shaders/01_Hello_World/sketch.js
@@ -0,0 +1,17 @@
+let theShader;
+
+function preload(){
+  theShader = loadShader('oneColor.vert', 'oneColor.frag');
+}
+
+function setup(){
+  createCanvas(600, 400, WEBGL);
+  noStroke();
+}
+
+function draw(){
+  shader(theShader);
+  rect(0, 0, width, height);
+
+  console.log('Frame rate: '+frameRate());
+}
diff --git a/The Book of Shaders/01_Hello_World/style.css b/The Book of Shaders/01_Hello_World/style.css
@@ -0,0 +1,3 @@
+body{
+  /* background-color: #47585c; /*color name: 錆鼠 さびねず*/ 
+}
diff --git a/The Book of Shaders/02_Uniforms/.DS_Store b/The Book of Shaders/02_Uniforms/.DS_Store
diff --git a/The Book of Shaders/02_Uniforms/index.html b/The Book of Shaders/02_Uniforms/index.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>drawContext</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
+  <script src="sketch.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+</body>
+</html>
diff --git a/The Book of Shaders/02_Uniforms/oneColor.frag b/The Book of Shaders/02_Uniforms/oneColor.frag
@@ -0,0 +1,12 @@
+/*Example:Color the entire background blue*/
+
+#ifdef GL_ES //a shader API which is automatically used by your GPU
+precision mediump float;//lowp / mediump/highp
+#endif
+
+uniform float u_time;
+
+void main() {
+    gl_FragColor = vec4(abs(sin(u_time)), 0.0, 0.0, 1.0);
+}
+//Normalizing values makes it easier to map values between variables.
diff --git a/The Book of Shaders/02_Uniforms/oneColor.vert b/The Book of Shaders/02_Uniforms/oneColor.vert
@@ -0,0 +1,12 @@
+#ifdef GL_ES
+precision mediump float;//lowp / mediump/highp
+#endif
+
+attribute vec3 aPosition;
+
+void main() {
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+  gl_Position = positionVec4;
+}
diff --git a/The Book of Shaders/02_Uniforms/sketch.js b/The Book of Shaders/02_Uniforms/sketch.js
@@ -0,0 +1,18 @@
+let theShader;
+
+function preload(){
+  theShader = loadShader('oneColor.vert', 'oneColor.frag');
+}
+
+function setup(){
+  createCanvas(600, 400, WEBGL);
+  noStroke();
+}
+
+function draw(){
+  theShader.setUniform('u_time', frameCount * 0.01);
+  shader(theShader);
+  rect(0, 0, width, height);
+
+  console.log('Frame rate: '+frameRate());
+}
diff --git a/The Book of Shaders/02_Uniforms/style.css b/The Book of Shaders/02_Uniforms/style.css
@@ -0,0 +1,3 @@
+body{
+  /* background-color: #47585c; /*color name: 錆鼠 さびねず*/ 
+}
diff --git a/The Book of Shaders/03_Uniforms&FragCoord/.DS_Store b/The Book of Shaders/03_Uniforms&FragCoord/.DS_Store
diff --git a/The Book of Shaders/03_Uniforms&FragCoord/index.html b/The Book of Shaders/03_Uniforms&FragCoord/index.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>drawContext</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
+  <script src="sketch.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+</body>
+</html>
diff --git a/The Book of Shaders/03_Uniforms&FragCoord/oneColor.frag b/The Book of Shaders/03_Uniforms&FragCoord/oneColor.frag
@@ -0,0 +1,20 @@
+/*Example:Color the entire background blue*/
+
+#ifdef GL_ES //a shader API which is automatically used by your GPU
+precision mediump float;//lowp / mediump/highp
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main() {
+  vec2 st = gl_FragCoord.xy / u_resolution;
+
+  float y = st.y * u_mouse.y;
+  float x = st.x * u_mouse.x;
+  float y2 = st.y;
+  float x2 = st.x*(sin(u_time)+1.0)/2.0;
+  gl_FragColor = vec4(x2, y2, 1.0, 1.0);
+}
+//Normalizing values makes it easier to map values between variables.
diff --git a/The Book of Shaders/03_Uniforms&FragCoord/oneColor.vert b/The Book of Shaders/03_Uniforms&FragCoord/oneColor.vert
@@ -0,0 +1,12 @@
+#ifdef GL_ES
+precision mediump float;//lowp / mediump/highp
+#endif
+
+attribute vec3 aPosition;
+
+void main() {
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+  gl_Position = positionVec4;
+}
diff --git a/The Book of Shaders/03_Uniforms&FragCoord/sketch.js b/The Book of Shaders/03_Uniforms&FragCoord/sketch.js
@@ -0,0 +1,22 @@
+let theShader;
+
+function preload(){
+  theShader = loadShader('oneColor.vert', 'oneColor.frag');
+}
+
+function setup(){
+  createCanvas(600, 400, WEBGL);
+  noStroke();
+}
+
+function draw(){
+  theShader.setUniform('u_resolution', [width, height]);
+  // theShader.setUniform('u_mouse', [mouseX, map(mouseY, 0, height, height, 0)]);
+  theShader.setUniform('u_mouse', [mouseX/width, map(mouseY, 0, height, height, 0)/height]);
+  theShader.setUniform('u_time', frameCount * 0.02);
+  shader(theShader);
+  rect(0, 0, width, height);
+
+  // console.log('Frame rate: '+frameRate());
+  // console.log((sin(frameCount/100)+1)/2);
+}
diff --git a/The Book of Shaders/03_Uniforms&FragCoord/style.css b/The Book of Shaders/03_Uniforms&FragCoord/style.css
@@ -0,0 +1,3 @@
+body{
+  /* background-color: #47585c; /*color name: 錆鼠 さびねず*/ 
+}
diff --git a/The Book of Shaders/04_ShapingFunctions/.DS_Store b/The Book of Shaders/04_ShapingFunctions/.DS_Store
diff --git a/The Book of Shaders/04_ShapingFunctions/index.html b/The Book of Shaders/04_ShapingFunctions/index.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>drawContext</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
+  <script src="sketch.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+</body>
+</html>
diff --git a/The Book of Shaders/04_ShapingFunctions/oneColor.frag b/The Book of Shaders/04_ShapingFunctions/oneColor.frag
@@ -0,0 +1,43 @@
+/*Example:Color the entire background blue*/
+
+#ifdef GL_ES //a shader API which is automatically used by your GPU
+precision mediump float;//lowp / mediump/highp
+#endif
+
+#define PI 3.14159265359
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float plot(vec2 st){
+  return smoothstep(0.0, 0.01, abs(st.y-st.x));//diagonally right line
+  // return smoothstep(0.0, 0.01, abs(-st.y+1.0-st.x));//diagonally left line
+}
+
+float plot2(vec2 st, float pct){
+  return smoothstep(pct-0.01, pct, st.y)-//Below the line
+          smoothstep(pct, pct+0.01, st.y);//Above the line
+}
+
+void main() {
+  vec2 st = gl_FragCoord.xy / u_resolution;
+
+  // float y = st.x;
+  // float y = pow(st.x, 2.0);
+  float y = pow(st.x, sin(u_time)+1.5);
+  // float y = step(0.5, st.x);
+  // float y = smoothstep(0.1, 0.9, st.x);
+  // float y = smoothstep(0.2, 0.5, st.x) - smoothstep(0.5, 0.8, st.x);
+  // float y = mod(st.x, 1.0);
+  // float y = sin(st.x*18.0)/5.0+0.5;
+  // float y = abs(sin(st.x*18.0))/5.0+0.5;
+  // float y = clamp(st.x, 0.4, 0.6);
+
+  //Plot a line
+  // float percentage = plot(st);
+  float percentage = plot2(st, y);
+  // color = (1.0-pct) * color+pct*vec3(1.0, 0.0, 1.0);
+  vec3 color = percentage*vec3(0.7, 0.8, 0.9);
+  gl_FragColor = vec4(color, 1.0);
+}
diff --git a/The Book of Shaders/04_ShapingFunctions/oneColor.vert b/The Book of Shaders/04_ShapingFunctions/oneColor.vert
@@ -0,0 +1,12 @@
+#ifdef GL_ES
+precision mediump float;//lowp / mediump/highp
+#endif
+
+attribute vec3 aPosition;
+
+void main() {
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+  gl_Position = positionVec4;
+}
diff --git a/The Book of Shaders/04_ShapingFunctions/sketch.js b/The Book of Shaders/04_ShapingFunctions/sketch.js
@@ -0,0 +1,22 @@
+let theShader;
+
+function preload(){
+  theShader = loadShader('oneColor.vert', 'oneColor.frag');
+}
+
+function setup(){
+  createCanvas(600, 600, WEBGL);
+  noStroke();
+}
+
+function draw(){
+  theShader.setUniform('u_resolution', [width, height]);
+  // theShader.setUniform('u_mouse', [mouseX, map(mouseY, 0, height, height, 0)]);
+  theShader.setUniform('u_mouse', [mouseX/width, map(mouseY, 0, height, height, 0)/height]);
+  theShader.setUniform('u_time', frameCount * 0.02);
+  shader(theShader);
+  rect(0, 0, width, height);
+
+  // console.log('Frame rate: '+frameRate());
+  // console.log((sin(frameCount/100)+1)/2);
+}
diff --git a/The Book of Shaders/04_ShapingFunctions/style.css b/The Book of Shaders/04_ShapingFunctions/style.css
@@ -0,0 +1,3 @@
+body{
+  /* background-color: #47585c; /*color name: 錆鼠 さびねず*/ 
+}
diff --git a/The Book of Shaders/05_Colors/.DS_Store b/The Book of Shaders/05_Colors/.DS_Store
diff --git a/The Book of Shaders/05_Colors/index.html b/The Book of Shaders/05_Colors/index.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>drawContext</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
+  <script src="sketch.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+</body>
+</html>
diff --git a/The Book of Shaders/05_Colors/oneColor.frag b/The Book of Shaders/05_Colors/oneColor.frag
@@ -0,0 +1,43 @@
+/*Example:Color the entire background blue*/
+
+#ifdef GL_ES //a shader API which is automatically used by your GPU
+precision mediump float;//lowp / mediump/highp
+#endif
+
+#define PI 3.14159265359
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+vec3 color_basis(){
+  vec3 yellow, magenta, green;
+  // Making Yellow
+  yellow.rg = vec2(1.0);// Assigning 1. to red and green channels
+  yellow[2] = 0.0;// Assigning 0. to blue channel
+  // Making Magenta
+  magenta = yellow.rbg;// Assign the channels with green and blue swapped
+
+  // Making Green
+  green.rgb = yellow.bgb; // Assign the blue channel of Yellow (0) to red and blue channels
+
+  return green;
+}
+
+vec3 color_mixture(){
+  vec3 colorA = vec3(0.149,0.141,0.912);
+  vec3 colorB = vec3(1.000,0.833,0.224);
+
+  float oscillate = abs(sin(u_time));
+  vec3 color = mix(colorA, colorB, oscillate);
+
+  return color;
+}
+
+void main() {
+  vec2 st = gl_FragCoord.xy / u_resolution;
+
+  // vec3 color = color_basis();
+  vec3 color = color_mixture();
+  gl_FragColor = vec4(color, 1.0);
+}
diff --git a/The Book of Shaders/05_Colors/oneColor.vert b/The Book of Shaders/05_Colors/oneColor.vert
@@ -0,0 +1,12 @@
+#ifdef GL_ES
+precision mediump float;//lowp / mediump/highp
+#endif
+
+attribute vec3 aPosition;
+
+void main() {
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+  gl_Position = positionVec4;
+}
diff --git a/The Book of Shaders/05_Colors/sketch.js b/The Book of Shaders/05_Colors/sketch.js
@@ -0,0 +1,22 @@
+let theShader;
+
+function preload(){
+  theShader = loadShader('oneColor.vert', 'oneColor.frag');
+}
+
+function setup(){
+  createCanvas(600, 600, WEBGL);
+  noStroke();
+}
+
+function draw(){
+  theShader.setUniform('u_resolution', [width, height]);
+  // theShader.setUniform('u_mouse', [mouseX, map(mouseY, 0, height, height, 0)]);
+  theShader.setUniform('u_mouse', [mouseX/width, map(mouseY, 0, height, height, 0)/height]);
+  theShader.setUniform('u_time', frameCount * 0.02);
+  shader(theShader);
+  rect(0, 0, width, height);
+
+  // console.log('Frame rate: '+frameRate());
+  // console.log((sin(frameCount/100)+1)/2);
+}
diff --git a/The Book of Shaders/05_Colors/style.css b/The Book of Shaders/05_Colors/style.css
@@ -0,0 +1,3 @@
+body{
+  /* background-color: #47585c; /*color name: 錆鼠 さびねず*/ 
+}
diff --git a/The Book of Shaders/06_GradientColor/.DS_Store b/The Book of Shaders/06_GradientColor/.DS_Store