Skip to content

Commit 7208bc6

Browse files
hsabstalgiag
authored andcommitted
shader() | setUniform() examples [WebGL] (#3725)
* [WebGL] shader() | setUniform() {Examples} * [WebGL] setUniform() fix indent
1 parent 5178ffd commit 7208bc6

File tree

3 files changed

+131
-0
lines changed

3 files changed

+131
-0
lines changed
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Code adopted from "Creating a Gradient Color in Fragment Shader"
2+
// by Bahadır on stackoverflow.com
3+
// https://stackoverflow.com/questions/47376499/creating-a-gradient-color-in-fragment-shader
4+
5+
6+
precision highp float; varying vec2 vPos;
7+
uniform vec2 offset;
8+
uniform vec3 colorCenter;
9+
uniform vec3 colorBackground;
10+
11+
void main() {
12+
13+
vec2 st = vPos.xy + offset.xy;
14+
15+
// color1 = vec3(1.0,0.55,0);
16+
// color2 = vec3(0.226,0.000,0.615);
17+
18+
float mixValue = distance(st,vec2(0,1));
19+
vec3 color = mix(colorCenter,colorBackground,mixValue);
20+
21+
gl_FragColor = vec4(color,mixValue);
22+
}

src/webgl/material.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,66 @@ p5.prototype.createShader = function(vertSrc, fragSrc) {
188188
* @chainable
189189
* @param {p5.Shader} [s] the desired <a href="#/p5.Shader">p5.Shader</a> to use for rendering
190190
* shapes.
191+
*
192+
* @example
193+
* <div modernizr='webgl'>
194+
* <code>
195+
* // Click within the image to toggle
196+
* // the shader used by the quad shape
197+
* // Note: for an alternative approach to the same example,
198+
* // involving changing uniforms please refer to:
199+
* // https://p5js.org/reference/#/p5.Shader/setUniform
200+
*
201+
* let redGreen;
202+
* let orangeBlue;
203+
* let showRedGreen = false;
204+
*
205+
* function preload() {
206+
* // note that we are using two instances
207+
* // of the same vertex and fragment shaders
208+
* redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
209+
* orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
210+
* }
211+
*
212+
* function setup() {
213+
* createCanvas(100, 100, WEBGL);
214+
*
215+
* // initialize the colors for redGreen shader
216+
* shader(redGreen);
217+
* redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
218+
* redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
219+
*
220+
* // initialize the colors for orangeBlue shader
221+
* shader(orangeBlue);
222+
* orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
223+
* orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
224+
*
225+
* noStroke();
226+
* }
227+
*
228+
* function draw() {
229+
* // update the offset values for each shader,
230+
* // moving orangeBlue in vertical and redGreen
231+
* // in horizontal direction
232+
* orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
233+
* redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
234+
*
235+
* if (showRedGreen === true) {
236+
* shader(redGreen);
237+
* } else {
238+
* shader(orangeBlue);
239+
* }
240+
* quad(-1, -1, 1, -1, 1, 1, -1, 1);
241+
* }
242+
*
243+
* function mouseClicked() {
244+
* showRedGreen = !showRedGreen;
245+
* }
246+
* </code>
247+
* </div>
248+
*
249+
* @alt
250+
* canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
191251
*/
192252
p5.prototype.shader = function(s) {
193253
this._assert3d('shader');

src/webgl/p5.Shader.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,55 @@ p5.Shader.prototype.useProgram = function() {
277277
* @param {Object|Number|Boolean|Number[]} data the data to be associated
278278
* with that uniform; type varies (could be a single numerical value, array,
279279
* matrix, or texture / sampler reference)
280+
*
281+
* @example
282+
* <div modernizr='webgl'>
283+
* <code>
284+
* // Click within the image to toggle the value of uniforms
285+
* // Note: for an alternative approach to the same example,
286+
* // involving toggling between shaders please refer to:
287+
* // https://p5js.org/reference/#/p5/shader
288+
*
289+
* let grad;
290+
* let showRedGreen = false;
291+
*
292+
* function preload() {
293+
* // note that we are using two instances
294+
* // of the same vertex and fragment shaders
295+
* grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
296+
* }
297+
*
298+
* function setup() {
299+
* createCanvas(100, 100, WEBGL);
300+
* shader(grad);
301+
* noStroke();
302+
* }
303+
*
304+
* function draw() {
305+
* // update the offset values for each scenario,
306+
* // moving the "grad" shader in either vertical or
307+
* // horizontal direction each with differing colors
308+
*
309+
* if (showRedGreen === true) {
310+
* grad.setUniform('colorCenter', [1, 0, 0]);
311+
* grad.setUniform('colorBackground', [0, 1, 0]);
312+
* grad.setUniform('offset', [sin(millis() / 2000), 1]);
313+
* } else {
314+
* grad.setUniform('colorCenter', [1, 0.5, 0]);
315+
* grad.setUniform('colorBackground', [0.226, 0, 0.615]);
316+
* grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
317+
* }
318+
* quad(-1, -1, 1, -1, 1, 1, -1, 1);
319+
* }
320+
*
321+
* function mouseClicked() {
322+
* showRedGreen = !showRedGreen;
323+
* }
324+
* </code>
325+
* </div>
326+
*
327+
* @alt
328+
* canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
280329
*/
281330
p5.Shader.prototype.setUniform = function(uniformName, data) {
282331
//@todo update all current gl.uniformXX calls

0 commit comments

Comments
 (0)