Skip to content

Commit

Permalink
Merge pull request #10 from tetunori/live-editor
Browse files Browse the repository at this point in the history 
Support Live editor
  • Loading branch information
@tetunori
tetunori authored Oct 1, 2022
2 parents 7aef6e0 + 64c2b89 commit 74a8be2
Show file tree
Hide file tree
Showing 77 changed files with 411 additions and 5,870 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Samples for "Math of Real-time Graphics"📚
Version 0.6.0
Version 0.7.0
<img src="./images/screenShot1.png" width="800px">

# Description
Expand Down
16 changes: 3 additions & 13 deletions website/docs/chapter0/0_0_helloWorld.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,7 @@ sidebar_position: 1
# 0_0_helloWorld
## Code 0.2, Figure 0.2:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch0/0_0_helloWorld.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch0/0_0_helloWorld.frag'
/>

```glsl showLineNumbers title="0_0_helloWorld.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
void main(){
fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
```
<LiveGlslCodeBlock fragName='0_0_helloWorld.frag' fragCode={code} />
18 changes: 3 additions & 15 deletions website/docs/chapter0/0_1_helloWorld.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,7 @@ sidebar_position: 2
# 0_1_helloWorld
## Code 0.4, Figure 0.4:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch0/0_1_helloWorld.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch0/0_1_helloWorld.frag'
/>

```glsl showLineNumbers title="0_1_helloWorld.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
fragColor = vec4(1.0, pos, 1.0);
}
```
<LiveGlslCodeBlock fragName='0_1_helloWorld.frag' fragCode={code} />
21 changes: 3 additions & 18 deletions website/docs/chapter1/1_0_lerp.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,7 @@ sidebar_position: 1
# 1_0_lerp
## Code 1.1, Figure 1.2:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch1/1_0_lerp.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch1/1_0_lerp.frag'
/>

```glsl showLineNumbers title="1_0_lerp.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
vec3 RED = vec3(1.0, 0.0, 0.0);
vec3 BLUE = vec3(0.0, 0.0, 1.0);
vec3 col = mix(RED, BLUE, pos.x);
fragColor = vec4(col, 1.0);
}
```
<LiveGlslCodeBlock fragName='1_0_lerp.frag' fragCode={code} />
26 changes: 3 additions & 23 deletions website/docs/chapter1/1_1_lerpTriple.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,7 @@ sidebar_position: 2
# 1_1_lerpTriple
## Code 1.2, Figure 1.3:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch1/1_1_lerpTriple.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch1/1_1_lerpTriple.frag'
/>

```glsl showLineNumbers title="1_1_lerpTriple.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
vec3[3] col3 = vec3[](
vec3(1.0, 0.0, 0.0),
vec3(0.0, 0.0, 1.0),
vec3(0.0, 1.0, 0.0)
);
pos.x *= 2.0;
int ind = int(pos.x);
vec3 col = mix(col3[ind], col3[ind + 1], fract(pos.x));
fragColor = vec4(col, 1.0);
}
```
<LiveGlslCodeBlock fragName='1_1_lerpTriple.frag' fragCode={code} />
29 changes: 3 additions & 26 deletions website/docs/chapter1/1_2_bilerp.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,7 @@ sidebar_position: 3
# 1_2_bilerp
## Code 1.3, Figure 1.4:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch1/1_2_bilerp.frag'
/>

```glsl showLineNumbers title="1_2_bilerp.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform float u_time;
uniform vec2 u_resolution;
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
vec3[4] col4 = vec3[](
vec3(1.0, 0.0, 0.0),
vec3(0.0, 0.0, 1.0),
vec3(0.0, 1.0, 0.0),
vec3(1.0, 1.0, 0.0)
);
vec3 col = mix(mix(col4[0], col4[1], pos.x), mix(col4[2], col4[3], pos.x), pos.y);
fragColor = vec4(col, 1.0);
}
```
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch1/1_2_bilerp.frag';

<LiveGlslCodeBlock fragName='1_2_bilerp.frag' fragCode={code} />
37 changes: 3 additions & 34 deletions website/docs/chapter1/1_3_posterization.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,7 @@ sidebar_position: 4
# 1_3_posterization
## Code 1.4, 1.5, Figure 1.6, 1.8:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch1/1_3_posterization.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch1/1_3_posterization.frag'
/>

```glsl showLineNumbers title="1_3_posterization.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
uniform float u_time;
int channel;
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
vec3[4] col4 = vec3[](
vec3(1.0, 0.0, 0.0),
vec3(1.0, 1.0, 0.0),
vec3(1.0, 0.0, 1.0),
vec3(1.0, 1.0, 1.0)
);
float n = 4.0;
pos *= n;
channel = int(2.0 * gl_FragCoord.x / u_resolution.x);
if (channel == 0){ //left: step
pos = floor(pos) + step(0.5, fract(pos));
} else { //right: smoothstep
float thr = 0.25 * sin(u_time);
pos = floor(pos) + smoothstep(0.25 + thr, 0.75 - thr, fract(pos));
}
pos /= n;
vec3 col = mix(mix(col4[0], col4[1], pos.x), mix(col4[2], col4[3], pos.x), pos.y);
fragColor = vec4(col, 1.0);
}
```
<LiveGlslCodeBlock fragName='1_3_posterization.frag' fragCode={code} />
48 changes: 3 additions & 45 deletions website/docs/chapter1/1_4_polar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,49 +5,7 @@ sidebar_position: 5
# 1_4_polar
## Code 1.6, 1.7, 1.8, Figure 1.10:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch1/1_4_polar.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch1/1_4_polar.frag'
/>

```glsl showLineNumbers title="1_4_polar.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform float u_time;
uniform vec2 u_resolution;
const float PI = 3.1415926;
float atan2(float y, float x){
if (x == 0.0){
return sign(y) * PI / 2.0;
} else {
return atan(y, x);
}
// or use "?:" as follows:
// return x == 0.0 ? sign(y) * PI / 2.0 : atan(y, x);
}
vec2 xy2pol(vec2 xy){
return vec2(atan2(xy.y, xy.x), length(xy));
}
vec2 pol2xy(vec2 pol){
return pol.y * vec2(cos(pol.x), sin(pol.x));
}
vec3 tex(vec2 st){
vec3[3] col3 = vec3[](
vec3(0.0, 0.0, 1.0),
vec3(1.0, 0.0, 0.0),
vec3(1.0)
);
st.s = st.s / PI + 1.0;
int ind = int(st.s) ;
vec3 col = mix(col3[ind % 2], col3[(ind + 1) % 2], fract(st.s));
return mix(col3[2], col, st.t);
}
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
pos = 2.0 * pos.xy - vec2(1.0);
pos = xy2pol(pos);
fragColor = vec4(tex(pos), 1.0);
}
```
<LiveGlslCodeBlock fragName='1_4_polar.frag' fragCode={code} />
47 changes: 3 additions & 44 deletions website/docs/chapter1/1_5_polarRot.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,7 @@ sidebar_position: 6
# 1_5_polarRot
## Code 1.9, Figure 1.11:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch1/1_5_polarRot.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch1/1_5_polarRot.frag'
/>

```glsl showLineNumbers title="1_5_polarRot.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform float u_time;
uniform vec2 u_resolution;
const float PI = 3.14159265;
float atan2(float y, float x){
if (x == 0.0){
return sign(y) * PI / 2.0;
} else {
return atan(y, x);
}
}
vec2 xy2pol(vec2 xy){
return vec2(atan2(xy.y, xy.x), length(xy));
}
vec2 pol2xy(vec2 pol){
return pol.y * vec2(cos(pol.x), sin(pol.x));
}
vec3 tex(vec2 st){
float time = 0.2 * u_time;
vec3 circ = vec3(pol2xy(vec2(time, 0.5)) + 0.5, 1.0);
vec3[3] col3 = vec3[](
circ.rgb, circ.gbr, circ.brg
);
st.s = st.s / PI + 1.0;
st.s += time;
int ind = int(st.s);
vec3 col = mix(col3[ind % 2], col3[(ind + 1) % 2], fract(st.s));
return mix(col3[2], col, st.t);
}
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
pos = 2.0 * pos - vec2(1.0);
pos = xy2pol(pos);
fragColor = vec4(tex(pos), 1.0);
}
```
<LiveGlslCodeBlock fragName='1_5_polarRot.frag' fragCode={code} />
41 changes: 3 additions & 38 deletions website/docs/chapter1/1_6_hsv2rgb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,7 @@ sidebar_position: 7
# 1_6_hsv2rgb
## Code 1.10, Figure 1.12:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch1/1_6_hsv2rgb.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch1/1_6_hsv2rgb.frag'
/>

```glsl showLineNumbers title="1_6_hsv2rgb.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform float u_time;
uniform vec2 u_resolution;
const float PI = 3.1415926;
float atan2(float y, float x){
if (x == 0.0){
return sign(y) * PI / 2.0;
} else {
return atan(y, x);
}
}
vec2 xy2pol(vec2 xy){
return vec2(atan2(xy.y, xy.x), length(xy));
}
vec2 pol2xy(vec2 pol){
return pol.y * vec2(cos(pol.x), sin(pol.x));
}
vec3 hsv2rgb(vec3 c){ // fork from https://www.shadertoy.com/view/MsS3Wc
vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
return c.z * mix(vec3(1.0), rgb, c.y);
}
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
pos = 2.0 * pos.xy - vec2(1.0);
pos = xy2pol(pos);
pos.x = mod(0.5 * pos.x / PI, 1.0);
fragColor.rgb = hsv2rgb(vec3(pos, 1.0));
fragColor.a = 1.0;
}
```
<LiveGlslCodeBlock fragName='1_6_hsv2rgb.frag' fragCode={code} />
33 changes: 3 additions & 30 deletions website/docs/chapter2/2_0_legacy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,7 @@ sidebar_position: 1
# 2_0_legacy
## Code 2.1, Figure 2.2:

import GLSLCanvasBox from "../../static/js/glslcanvas-box";
import LiveGlslCodeBlock from "../../static/js/liveGLSLCodeBlock";
import code from '!!raw-loader!/frags/ch2/2_0_legacy.frag';

<GLSLCanvasBox
baseUrl='/MathOfRealTimeGraphics-samples' fragUrl='/frags/ch2/2_0_legacy.frag'
/>

```glsl showLineNumbers title="2_0_legacy.frag"
#version 300 es
precision highp float;
out vec4 fragColor;
uniform float u_time;
uniform vec2 u_resolution;
int channel;
float fractSin11(float x){ // 1 in, 1 out
return fract(1000.0 * sin(x));
}
float fractSin21(vec2 xy){ // 2 in, 1 out
return fract(sin(dot(xy, vec2(12.9898, 78.233))) * 43758.5453123);
}
void main(){
vec2 pos = gl_FragCoord.xy;
pos += floor(60.0 * u_time);
channel = int(2.0 * gl_FragCoord.x / u_resolution.x);
if (channel == 0){ //left
fragColor = vec4(fractSin11(pos.x));
} else { //right
fragColor = vec4(fractSin21(pos.xy / u_resolution.xy));
}
fragColor.a = 1.0;
}
```
<LiveGlslCodeBlock fragName='2_0_legacy.frag' fragCode={code} />
Loading

0 comments on commit 74a8be2

Please sign in to comment.