From c5d07a9f42f26e437f3c3007a815a261f271973d Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Mon, 25 Jul 2022 10:26:42 -0600 Subject: [PATCH 1/4] fixed issue where example graphic was positioned in the corner of the sketch. also added describe() and a small amount of text. --- src/data/examples/assets/uniforms.frag | 2 +- src/data/examples/en/20_3D/10_passing_shader_uniforms.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/data/examples/assets/uniforms.frag b/src/data/examples/assets/uniforms.frag index bf2ad1bc5d..b344fe7cd8 100644 --- a/src/data/examples/assets/uniforms.frag +++ b/src/data/examples/assets/uniforms.frag @@ -54,7 +54,7 @@ vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col){ void main() { - vec2 center = resolution * 1.0; // draw the shape at the center of the screen + vec2 center = resolution * 0.5; // draw the shape at the center of the screen float size = resolution.y * 0.5; // make the shape a quarter of the screen height float sides = mod(floor(mouse), 7.0) + 3.0; // slowly increase the sides, when it reaches 10 sides, go back down to 3 float rotation = time; // rotation is in radians, but for time it doesnt really matter diff --git a/src/data/examples/en/20_3D/10_passing_shader_uniforms.js b/src/data/examples/en/20_3D/10_passing_shader_uniforms.js index c01ea5da83..64f3a8f316 100644 --- a/src/data/examples/en/20_3D/10_passing_shader_uniforms.js +++ b/src/data/examples/en/20_3D/10_passing_shader_uniforms.js @@ -17,6 +17,8 @@ // shaders require WEBGL mode to work createCanvas(710, 400, WEBGL); noStroke(); + + describe('a 2d example containing a sage green polygon, rotating in the middle of the sketch. As the mouse moves horizontally, the number of sides for the polygon change.') } function draw() { @@ -24,6 +26,7 @@ shader(theShader); // lets send the resolution, mouse, and time to our shader + // the mouse x position will change the number of sides // before sending mouse + time we modify the data so it's more easily usable by the shader theShader.setUniform('resolution', [width, height]); theShader.setUniform('mouse', map(mouseX, 0, width, 0, 7)); From 8a8fd3a7e8119708f6358f736d15aa2052bd10bc Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Mon, 25 Jul 2022 10:27:27 -0600 Subject: [PATCH 2/4] added ellipsoid to example. also added describe(). --- src/data/examples/en/20_3D/00_geometries.js | 35 ++++++++++++++------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/src/data/examples/en/20_3D/00_geometries.js b/src/data/examples/en/20_3D/00_geometries.js index 09afb9a92e..2f9fac4ea3 100644 --- a/src/data/examples/en/20_3D/00_geometries.js +++ b/src/data/examples/en/20_3D/00_geometries.js @@ -1,61 +1,74 @@ /* * @name Geometries - * @arialabel Six 3D shapes in neon gradient rotating on a white background. Shapes include cube, cylinder, ring, pyramid, sphere, and a plane. - * @description There are six 3D primitives in p5 now. + * @arialabel Seven 3D shapes in neon gradient rotating on a white background. Shapes include cube, cylinder, ring, pyramid, sphere, plane, and ellipsoid. + * @description There are seven 3D primitives in p5 now. */ + function setup() { createCanvas(710, 400, WEBGL); + + describe( + 'a 3d example containing seven primitive objects, a plane, box, cylinder, cone, torus, sphere, and ellipsoid.' + ); } function draw() { background(250); - translate(-240, -100, 0); normalMaterial(); push(); + translate(-240, -100, 0); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); plane(70); pop(); - translate(240, 0, 0); push(); + translate(0, -100, 0); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); box(70, 70, 70); pop(); - translate(240, 0, 0); push(); + translate(240, -100, 0); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); cylinder(70, 70); pop(); - translate(-240 * 2, 200, 0); push(); + translate(-250, 100, 0); + rotateZ(frameCount * 0.01); + rotateX(frameCount * 0.01); + rotateY(frameCount * 0.01); + cone(50, 70); + pop(); + + push(); + translate(-75, 100, 0); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); - cone(70, 70); + torus(50, 20); pop(); - translate(240, 0, 0); push(); + translate(100, 100, 0); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); - torus(70, 20); + sphere(50); pop(); - translate(240, 0, 0); push(); + translate(275, 100, 0); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); - sphere(70); + ellipsoid(30, 40, 40); pop(); } From 2a67e0b8e27e57e3e2b73fd53899077730b38d8a Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Mon, 25 Jul 2022 10:28:06 -0600 Subject: [PATCH 3/4] added a spotLight to the example, added some text, and added describe() --- src/data/examples/en/20_3D/02_multiple_lights.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/data/examples/en/20_3D/02_multiple_lights.js b/src/data/examples/en/20_3D/02_multiple_lights.js index 7a9689965e..889d65f9d4 100644 --- a/src/data/examples/en/20_3D/02_multiple_lights.js +++ b/src/data/examples/en/20_3D/02_multiple_lights.js @@ -5,6 +5,10 @@ */ function setup() { createCanvas(710, 400, WEBGL); + + describe( + 'a 3d example containing a spinning box and a sphere, each lit with a number of different lights, including ambient (gray), directional (red), spotlight (green), and point (blue).' + ); } function draw() { @@ -13,8 +17,13 @@ function draw() { let locX = mouseX - height / 2; let locY = mouseY - width / 2; + // ambient light is gray ambientLight(50); + // directional light is red directionalLight(255, 0, 0, 0.25, 0.25, 0); + // spotlight is green + spotLight(0, 255, 0, 150, 0, 250, 0, 0, -1); + // point light is blue pointLight(0, 0, 255, locX, locY, 250); push(); @@ -27,5 +36,5 @@ function draw() { translate(width / 4, 0, 0); ambientMaterial(250); - sphere(120, 64); + sphere(120, 24); } From fe98b093066767dd0e475a579f5fa2034f930370 Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Fri, 3 Feb 2023 17:33:39 -0700 Subject: [PATCH 4/4] now accounting for displayDensity when defining shader uniform --- src/data/examples/en/20_3D/10_passing_shader_uniforms.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/examples/en/20_3D/10_passing_shader_uniforms.js b/src/data/examples/en/20_3D/10_passing_shader_uniforms.js index 64f3a8f316..a4fef05fac 100644 --- a/src/data/examples/en/20_3D/10_passing_shader_uniforms.js +++ b/src/data/examples/en/20_3D/10_passing_shader_uniforms.js @@ -28,7 +28,7 @@ // lets send the resolution, mouse, and time to our shader // the mouse x position will change the number of sides // before sending mouse + time we modify the data so it's more easily usable by the shader - theShader.setUniform('resolution', [width, height]); + theShader.setUniform('resolution', [width * displayDensity(), height * displayDensity()]); theShader.setUniform('mouse', map(mouseX, 0, width, 0, 7)); theShader.setUniform('time', frameCount * 0.01);