From 56901035be783d15813d41b6a0e3d6b6d7c30fea Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Wed, 20 Jul 2022 14:38:23 -0600 Subject: [PATCH 1/5] added a simple feedback example --- .../examples/en/20_3D/12_simple_feedback.js | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/data/examples/en/20_3D/12_simple_feedback.js diff --git a/src/data/examples/en/20_3D/12_simple_feedback.js b/src/data/examples/en/20_3D/12_simple_feedback.js new file mode 100644 index 0000000000..041ba4e4b9 --- /dev/null +++ b/src/data/examples/en/20_3D/12_simple_feedback.js @@ -0,0 +1,42 @@ +/* + * @name Simple Feedback + * @arialabel An example of a simple feedback effect using two buffers. + * @description A simple feedback effect can be achieved through WEBGL mode and two graphics buffers. + */ + +let pg, swap; + +function setup() { + createCanvas(710, 400); + + // this will hold our main graphic + pg = createGraphics(710, 400, WEBGL); + // this will hold the previous frame + swap = createGraphics(710, 400, WEBGL); +} + +function draw() { + // draw the previous frame + pg.texture(swap); + pg.noStroke(); + pg.plane(width, height); + + // draw our circle graphic on top + pg.fill(255); + pg.ellipse(Math.sin(millis()/200)*5, Math.cos(millis()/200)*5, 150, 150); + + // draw a slightly scaled up copy of the texture + swap.push(); + swap.scale(1.1, 1.1); + swap.texture(pg); + swap.noStroke(); + swap.plane(width, height); + swap.pop(); + + // an opaque rectangle is drawn over top to control the feedback decay + swap.fill(0, 50); + swap.rect(-width / 2, -height / 2, width, height); + + // draw the output to the screen + image(swap, 0, 0); +} From 151d7453a446163409115d1e6a4ec14e3bc140d8 Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Mon, 25 Jul 2022 10:47:08 -0600 Subject: [PATCH 2/5] added describe to example --- src/data/examples/en/20_3D/12_simple_feedback.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/data/examples/en/20_3D/12_simple_feedback.js b/src/data/examples/en/20_3D/12_simple_feedback.js index 041ba4e4b9..f6c1c87bf4 100644 --- a/src/data/examples/en/20_3D/12_simple_feedback.js +++ b/src/data/examples/en/20_3D/12_simple_feedback.js @@ -13,6 +13,10 @@ function setup() { pg = createGraphics(710, 400, WEBGL); // this will hold the previous frame swap = createGraphics(710, 400, WEBGL); + + describe( + 'a WebGL example that achieves a simple feedback effect, displaying a slowly moving, radiating white circle.' + ); } function draw() { From b488e12fd1eddfc699a79ae57b9944858bb71084 Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Thu, 28 Jul 2022 11:08:37 -0600 Subject: [PATCH 3/5] added sphere and reset, edited text --- .../examples/en/20_3D/12_simple_feedback.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/data/examples/en/20_3D/12_simple_feedback.js b/src/data/examples/en/20_3D/12_simple_feedback.js index f6c1c87bf4..2f18064264 100644 --- a/src/data/examples/en/20_3D/12_simple_feedback.js +++ b/src/data/examples/en/20_3D/12_simple_feedback.js @@ -9,25 +9,32 @@ let pg, swap; function setup() { createCanvas(710, 400); - // this will hold our main graphic - pg = createGraphics(710, 400, WEBGL); // this will hold the previous frame + pg = createGraphics(710, 400, WEBGL); + // this will hold our main graphic swap = createGraphics(710, 400, WEBGL); describe( - 'a WebGL example that achieves a simple feedback effect, displaying a slowly moving, radiating white circle.' + 'a WebGL example that achieves a simple feedback effect, displaying a slowly moving, radiating white sphere.' ); } function draw() { // draw the previous frame pg.texture(swap); - pg.noStroke(); + pg.noStroke(); pg.plane(width, height); - // draw our circle graphic on top + // p5.Graphics sometimes requires us to use reset() before drawing + pg.reset(); + + // draw our sphere on top + pg.push(); + // slowly move the sphere in a circle + pg.translate(sin(millis() / 200) * 5, cos(millis() / 200) * 5, 0); pg.fill(255); - pg.ellipse(Math.sin(millis()/200)*5, Math.cos(millis()/200)*5, 150, 150); + pg.sphere(90); + pg.pop(); // draw a slightly scaled up copy of the texture swap.push(); From db426cb5910bc2c3e1f1179ee4381c23d45a036d Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Mon, 1 Aug 2022 15:23:38 -0600 Subject: [PATCH 4/5] edited text for clarity and moved reset() to top of draw() --- src/data/examples/en/20_3D/12_simple_feedback.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/data/examples/en/20_3D/12_simple_feedback.js b/src/data/examples/en/20_3D/12_simple_feedback.js index 2f18064264..23965f7249 100644 --- a/src/data/examples/en/20_3D/12_simple_feedback.js +++ b/src/data/examples/en/20_3D/12_simple_feedback.js @@ -20,14 +20,14 @@ function setup() { } function draw() { + // clears and resets the p5.Graphics so that 3D objects draw correctly + pg.reset(); + // draw the previous frame pg.texture(swap); pg.noStroke(); pg.plane(width, height); - // p5.Graphics sometimes requires us to use reset() before drawing - pg.reset(); - // draw our sphere on top pg.push(); // slowly move the sphere in a circle From 636597bc709c43f1f4bc54813da70b7eae637d1e Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Sun, 9 Oct 2022 11:07:25 -0600 Subject: [PATCH 5/5] updated text and describe --- src/data/examples/en/20_3D/12_simple_feedback.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/data/examples/en/20_3D/12_simple_feedback.js b/src/data/examples/en/20_3D/12_simple_feedback.js index 23965f7249..7cc66de477 100644 --- a/src/data/examples/en/20_3D/12_simple_feedback.js +++ b/src/data/examples/en/20_3D/12_simple_feedback.js @@ -1,7 +1,10 @@ /* * @name Simple Feedback * @arialabel An example of a simple feedback effect using two buffers. - * @description A simple feedback effect can be achieved through WEBGL mode and two graphics buffers. + * @description A simple feedback effect that is achieved by using two WebGL graphics buffers. + * This effect works by drawing the previous frame to a second + * createGraphics() buffer, which can be blended with the current frame. This + * takes advantage of texture mapping in WebGL. */ let pg, swap; @@ -15,7 +18,7 @@ function setup() { swap = createGraphics(710, 400, WEBGL); describe( - 'a WebGL example that achieves a simple feedback effect, displaying a slowly moving, radiating white sphere.' + 'a slowly oscillating, radiating white sphere that fades into a dark gray background through a feedback visual effect' ); }