Skip to content

Commit b31e4e7

Browse files
aceslowmanaceslowman
committed
adding text and examples
1 parent d51a42f commit b31e4e7

File tree

6 files changed

+304
-80
lines changed

6 files changed

+304
-80
lines changed

‎src/assets/learn/shaderIntro/Montserrat-SemiBold.ttf

194 KB
Binary file not shown.

‎src/assets/learn/shaderIntro/shader.frag

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
precision mediump float;
2+
3+
varying vec2 vTexCoord;
4+
5+
uniform sampler2D tex0;
6+
uniform vec2 userMouse;
7+
uniform float time;
8+
9+
/*
10+
the fragment shader has to have a main() function, where you will do most of your
11+
programming. main() is responsible for setting the color of the current pixel, by
12+
assigning a vec4 (r,g,b,a) to the built-in gl_FragColor.
13+
*/
14+
void main() {
15+
vec2 uv = vTexCoord;
16+
17+
// uv.x =
18+
// uv.x *= 1.0 - (sin(uv.x + (time/1000.0))) / 20.0;
19+
// uv.y += (cos(uv.y + (time/1000.0))) / 10.0;
20+
21+
vec4 src = texture2D(tex0, vec2(uv.x,1.0-uv.y));
22+
23+
float horizontal = uv.x;
24+
float vertical = uv.y;
25+
26+
// uv.x *= 2.0;
27+
// uv.x = mod(uv.x,1.0);
28+
// uv.y *= 2.0;
29+
// uv.y = mod(uv.y,1.0);
30+
31+
// uv.x = sin(uv.x);
32+
// uv.y = cos(uv.y);
33+
34+
// uv.x = step(uv.x,0.5);
35+
// uv.y = step(uv.y,0.5);
36+
37+
float value = 1.0 - distance(uv, userMouse) * 1.5;
38+
39+
value = clamp(value,0.0,1.0);
40+
41+
42+
vec3 myColor = vec3(value) * vec3(uv.x,uv.y,value);
43+
44+
// add the text on top and mask with the distance value
45+
myColor += src.rgb * value;
46+
47+
float line = step(value,mod(time/1000.0,1.0));
48+
49+
// myColor += line;
50+
51+
// and now this color is to the current pixel
52+
gl_FragColor = vec4(myColor,1.0);
53+
}

‎src/assets/learn/shaderIntro/shader.vert

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
attribute vec3 aPosition;
2+
attribute vec2 aTexCoord;
3+
varying vec2 vTexCoord;
4+
5+
/*
6+
all vertex shaders need a main() function. this function needs to have a value assigned
7+
to gl_Position
8+
9+
'void' means that this function doesn't return anything
10+
*/
11+
void main() {
12+
vTexCoord = aTexCoord;
13+
14+
// copy the position data into a vec4, using 1.0 as the w component
15+
vec4 positionVec4 = vec4(aPosition, 1.0);
16+
17+
// scale the rect by two, and move it to the center of the screen
18+
// if we don't do this, it will appear with its bottom left corner in the center of the sketch
19+
// try commenting this line out to see what happens
20+
positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
21+
22+
// send the vertex information on to the fragment shader
23+
gl_Position = positionVec4;
24+
}

‎src/assets/learn/shaderIntro/titleExample.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>Shader Title Example</title>
4+
<script src="../../../assets/js/p5.min.js"></script>
5+
<!-- uncomment lines below to include extra p5 libraries -->
6+
<!--<script src="../addons/p5.sound.js"></script>-->
7+
<script src="titleExample.js"></script>
8+
<!-- this line removes any default padding and style. you might only need one of these values set. -->
9+
<style>
10+
body {
11+
padding: 0;
12+
margin: 0;
13+
overflow: hidden;
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
</body>
24+
</html>

‎src/assets/learn/shaderIntro/titleExample.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
let myShader;
2+
3+
let textGraphics;
4+
5+
let externalFont;
6+
7+
function preload() {
8+
// load each shader file (don't worry, we will come back to these!)
9+
myShader = loadShader('shader.vert', 'shader.frag');
10+
11+
externalFont = loadFont('Montserrat-SemiBold.ttf');
12+
}
13+
14+
function setup() {
15+
// the canvas has to be created with WEBGL mode
16+
createCanvas(windowWidth, windowHeight, WEBGL);
17+
18+
textGraphics = createGraphics(windowWidth, windowHeight);
19+
}
20+
21+
function draw() {
22+
background(255);
23+
24+
textGraphics.textFont(externalFont);
25+
textGraphics.fill(255);
26+
textGraphics.textSize(48);
27+
textGraphics.textAlign(CENTER, CENTER);
28+
textGraphics.text('Introduction to Shaders', width/2, height/2);
29+
30+
// shader() sets the active shader, which will be applied to what is drawn next
31+
shader(myShader);
32+
33+
myShader.setUniform('tex0', textGraphics);
34+
myShader.setUniform('time', millis());
35+
myShader.setUniform('userMouse', [mouseX/width, 1.0-mouseY/height]);
36+
37+
// apply the shader to a rectangle taking up the full canvas
38+
rect(0,0,width,height);
39+
}

0 commit comments

Comments
 (0)