From 9d9a935f4bf7faa94bde090a22cfa73ea72c7bd3 Mon Sep 17 00:00:00 2001 From: TwoTicks Date: Thu, 11 Mar 2021 13:04:56 +0530 Subject: [PATCH 1/4] added graphing 2d example --- .../en/08_Math/20_Graphing2DEquations.js | 54 +++++++++++++++++++ .../es/08_Math/20_Graphing2DEquations.js | 54 +++++++++++++++++++ .../zh-Hans/08_Math/20_Graphing2DEquations.js | 54 +++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 src/data/examples/en/08_Math/20_Graphing2DEquations.js create mode 100644 src/data/examples/es/08_Math/20_Graphing2DEquations.js create mode 100644 src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js diff --git a/src/data/examples/en/08_Math/20_Graphing2DEquations.js b/src/data/examples/en/08_Math/20_Graphing2DEquations.js new file mode 100644 index 0000000000..6a51857cee --- /dev/null +++ b/src/data/examples/en/08_Math/20_Graphing2DEquations.js @@ -0,0 +1,54 @@ +/* + * @name Graphing 2D Equations + * @frame 710, 400 + * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman + */ +function setup() { + createCanvas(710, 400); + pixelDensity(1); +} + +function draw() { + loadPixels(); + var n = (mouseX * 10.0) / width; + var w = 16.0; // 2D space width + var h = 16.0; // 2D space height + var dx = w / width; // Increment x this amount per pixel + var dy = h / height; // Increment y this amount per pixel + var x = -w / 2; // Start x at -1 * width / 2 + var y; + + var r; + var theta; + var val; + + let bw; //variable to store grayscale + let i; + let j; + let cols = width; + let rows = height; + + for (i = 0; i < cols; i += 1) { + y = -h / 2; + + for (j = 0; j < rows; j += 1) { + r = sqrt((x * x) + (y * y)); // Convert cartesian to polar + theta = atan2(y, x); // Convert cartesian to polar + // Compute 2D polar coordinate function + val = sin(n * cos(r) + 5 * theta); // Results in a value between -1 and 1 + //var val = cos(r); // Another simple function + //var val = sin(theta); // Another simple function + bw = color(((val + 1) * 255) / 2); + index = 4 * (i + j * width); + pixels[index] = red(bw); + pixels[index + 1] = green(bw); + pixels[index + 2] = blue(bw); + pixels[index + 3] = alpha(bw); + + y += dy; + } + + x += dx; + } + updatePixels(); +} \ No newline at end of file diff --git a/src/data/examples/es/08_Math/20_Graphing2DEquations.js b/src/data/examples/es/08_Math/20_Graphing2DEquations.js new file mode 100644 index 0000000000..6a51857cee --- /dev/null +++ b/src/data/examples/es/08_Math/20_Graphing2DEquations.js @@ -0,0 +1,54 @@ +/* + * @name Graphing 2D Equations + * @frame 710, 400 + * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman + */ +function setup() { + createCanvas(710, 400); + pixelDensity(1); +} + +function draw() { + loadPixels(); + var n = (mouseX * 10.0) / width; + var w = 16.0; // 2D space width + var h = 16.0; // 2D space height + var dx = w / width; // Increment x this amount per pixel + var dy = h / height; // Increment y this amount per pixel + var x = -w / 2; // Start x at -1 * width / 2 + var y; + + var r; + var theta; + var val; + + let bw; //variable to store grayscale + let i; + let j; + let cols = width; + let rows = height; + + for (i = 0; i < cols; i += 1) { + y = -h / 2; + + for (j = 0; j < rows; j += 1) { + r = sqrt((x * x) + (y * y)); // Convert cartesian to polar + theta = atan2(y, x); // Convert cartesian to polar + // Compute 2D polar coordinate function + val = sin(n * cos(r) + 5 * theta); // Results in a value between -1 and 1 + //var val = cos(r); // Another simple function + //var val = sin(theta); // Another simple function + bw = color(((val + 1) * 255) / 2); + index = 4 * (i + j * width); + pixels[index] = red(bw); + pixels[index + 1] = green(bw); + pixels[index + 2] = blue(bw); + pixels[index + 3] = alpha(bw); + + y += dy; + } + + x += dx; + } + updatePixels(); +} \ No newline at end of file diff --git a/src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js b/src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js new file mode 100644 index 0000000000..6a51857cee --- /dev/null +++ b/src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js @@ -0,0 +1,54 @@ +/* + * @name Graphing 2D Equations + * @frame 710, 400 + * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman + */ +function setup() { + createCanvas(710, 400); + pixelDensity(1); +} + +function draw() { + loadPixels(); + var n = (mouseX * 10.0) / width; + var w = 16.0; // 2D space width + var h = 16.0; // 2D space height + var dx = w / width; // Increment x this amount per pixel + var dy = h / height; // Increment y this amount per pixel + var x = -w / 2; // Start x at -1 * width / 2 + var y; + + var r; + var theta; + var val; + + let bw; //variable to store grayscale + let i; + let j; + let cols = width; + let rows = height; + + for (i = 0; i < cols; i += 1) { + y = -h / 2; + + for (j = 0; j < rows; j += 1) { + r = sqrt((x * x) + (y * y)); // Convert cartesian to polar + theta = atan2(y, x); // Convert cartesian to polar + // Compute 2D polar coordinate function + val = sin(n * cos(r) + 5 * theta); // Results in a value between -1 and 1 + //var val = cos(r); // Another simple function + //var val = sin(theta); // Another simple function + bw = color(((val + 1) * 255) / 2); + index = 4 * (i + j * width); + pixels[index] = red(bw); + pixels[index + 1] = green(bw); + pixels[index + 2] = blue(bw); + pixels[index + 3] = alpha(bw); + + y += dy; + } + + x += dx; + } + updatePixels(); +} \ No newline at end of file From c6ebfce3e19f19f8a33c48080557ddfd9ed60ddb Mon Sep 17 00:00:00 2001 From: TwoTicks <68433541+two-ticks@users.noreply.github.com> Date: Fri, 12 Mar 2021 06:44:45 +0530 Subject: [PATCH 2/4] updated to ES6 --- .../en/08_Math/20_Graphing2DEquations.js | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/src/data/examples/en/08_Math/20_Graphing2DEquations.js b/src/data/examples/en/08_Math/20_Graphing2DEquations.js index 6a51857cee..54e88391cc 100644 --- a/src/data/examples/en/08_Math/20_Graphing2DEquations.js +++ b/src/data/examples/en/08_Math/20_Graphing2DEquations.js @@ -1,7 +1,7 @@ -/* +/** * @name Graphing 2D Equations * @frame 710, 400 - * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman + * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman */ function setup() { createCanvas(710, 400); @@ -10,17 +10,17 @@ function setup() { function draw() { loadPixels(); - var n = (mouseX * 10.0) / width; - var w = 16.0; // 2D space width - var h = 16.0; // 2D space height - var dx = w / width; // Increment x this amount per pixel - var dy = h / height; // Increment y this amount per pixel - var x = -w / 2; // Start x at -1 * width / 2 - var y; + let n = (mouseX * 10.0) / width; + const w = 16.0; // 2D space width + const h = 16.0; // 2D space height + const dx = w / width; // Increment x this amount per pixel + const dy = h / height; // Increment y this amount per pixel + let x = -w / 2; // Start x at -1 * width / 2 + let y; - var r; - var theta; - var val; + let r; + let theta; + let val; let bw; //variable to store grayscale let i; @@ -30,9 +30,8 @@ function draw() { for (i = 0; i < cols; i += 1) { y = -h / 2; - for (j = 0; j < rows; j += 1) { - r = sqrt((x * x) + (y * y)); // Convert cartesian to polar + r = sqrt(x * x + y * y); // Convert cartesian to polar theta = atan2(y, x); // Convert cartesian to polar // Compute 2D polar coordinate function val = sin(n * cos(r) + 5 * theta); // Results in a value between -1 and 1 @@ -40,15 +39,13 @@ function draw() { //var val = sin(theta); // Another simple function bw = color(((val + 1) * 255) / 2); index = 4 * (i + j * width); - pixels[index] = red(bw); + pixels[index] = red(bw); pixels[index + 1] = green(bw); pixels[index + 2] = blue(bw); pixels[index + 3] = alpha(bw); - y += dy; } - x += dx; } updatePixels(); -} \ No newline at end of file +} From 2f4e86265acd618e9f3d2e7be732418bb704d0f4 Mon Sep 17 00:00:00 2001 From: TwoTicks <68433541+two-ticks@users.noreply.github.com> Date: Fri, 12 Mar 2021 08:49:40 +0530 Subject: [PATCH 3/4] updated to ES6 in es --- .../es/08_Math/20_Graphing2DEquations.js | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/data/examples/es/08_Math/20_Graphing2DEquations.js b/src/data/examples/es/08_Math/20_Graphing2DEquations.js index 6a51857cee..450f33c8ce 100644 --- a/src/data/examples/es/08_Math/20_Graphing2DEquations.js +++ b/src/data/examples/es/08_Math/20_Graphing2DEquations.js @@ -1,7 +1,7 @@ -/* +/** * @name Graphing 2D Equations * @frame 710, 400 - * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman + * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman */ function setup() { createCanvas(710, 400); @@ -10,17 +10,17 @@ function setup() { function draw() { loadPixels(); - var n = (mouseX * 10.0) / width; - var w = 16.0; // 2D space width - var h = 16.0; // 2D space height - var dx = w / width; // Increment x this amount per pixel - var dy = h / height; // Increment y this amount per pixel - var x = -w / 2; // Start x at -1 * width / 2 - var y; + let n = (mouseX * 10.0) / width; + const w = 16.0; // 2D space width + const h = 16.0; // 2D space height + const dx = w / width; // Increment x this amount per pixel + const dy = h / height; // Increment y this amount per pixel + let x = -w / 2; // Start x at -1 * width / 2 + let y; - var r; - var theta; - var val; + let r; + let theta; + let val; let bw; //variable to store grayscale let i; @@ -30,9 +30,8 @@ function draw() { for (i = 0; i < cols; i += 1) { y = -h / 2; - for (j = 0; j < rows; j += 1) { - r = sqrt((x * x) + (y * y)); // Convert cartesian to polar + r = sqrt(x * x + y * y); // Convert cartesian to polar theta = atan2(y, x); // Convert cartesian to polar // Compute 2D polar coordinate function val = sin(n * cos(r) + 5 * theta); // Results in a value between -1 and 1 @@ -40,15 +39,14 @@ function draw() { //var val = sin(theta); // Another simple function bw = color(((val + 1) * 255) / 2); index = 4 * (i + j * width); - pixels[index] = red(bw); + pixels[index] = red(bw); pixels[index + 1] = green(bw); pixels[index + 2] = blue(bw); pixels[index + 3] = alpha(bw); y += dy; } - x += dx; } updatePixels(); -} \ No newline at end of file +} From d2fd8dab9bdae68998d769e886262bc4b08a75fc Mon Sep 17 00:00:00 2001 From: TwoTicks <68433541+two-ticks@users.noreply.github.com> Date: Fri, 12 Mar 2021 08:51:05 +0530 Subject: [PATCH 4/4] updating to ES6 in zh-Hans --- .../zh-Hans/08_Math/20_Graphing2DEquations.js | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js b/src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js index 6a51857cee..450f33c8ce 100644 --- a/src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js +++ b/src/data/examples/zh-Hans/08_Math/20_Graphing2DEquations.js @@ -1,7 +1,7 @@ -/* +/** * @name Graphing 2D Equations * @frame 710, 400 - * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman + * @description Graphics the following equation: sin(n*cos(r) + 5*theta) where n is a function of horizontal mouse location. Original by Daniel Shiffman */ function setup() { createCanvas(710, 400); @@ -10,17 +10,17 @@ function setup() { function draw() { loadPixels(); - var n = (mouseX * 10.0) / width; - var w = 16.0; // 2D space width - var h = 16.0; // 2D space height - var dx = w / width; // Increment x this amount per pixel - var dy = h / height; // Increment y this amount per pixel - var x = -w / 2; // Start x at -1 * width / 2 - var y; + let n = (mouseX * 10.0) / width; + const w = 16.0; // 2D space width + const h = 16.0; // 2D space height + const dx = w / width; // Increment x this amount per pixel + const dy = h / height; // Increment y this amount per pixel + let x = -w / 2; // Start x at -1 * width / 2 + let y; - var r; - var theta; - var val; + let r; + let theta; + let val; let bw; //variable to store grayscale let i; @@ -30,9 +30,8 @@ function draw() { for (i = 0; i < cols; i += 1) { y = -h / 2; - for (j = 0; j < rows; j += 1) { - r = sqrt((x * x) + (y * y)); // Convert cartesian to polar + r = sqrt(x * x + y * y); // Convert cartesian to polar theta = atan2(y, x); // Convert cartesian to polar // Compute 2D polar coordinate function val = sin(n * cos(r) + 5 * theta); // Results in a value between -1 and 1 @@ -40,15 +39,14 @@ function draw() { //var val = sin(theta); // Another simple function bw = color(((val + 1) * 255) / 2); index = 4 * (i + j * width); - pixels[index] = red(bw); + pixels[index] = red(bw); pixels[index + 1] = green(bw); pixels[index + 2] = blue(bw); pixels[index + 3] = alpha(bw); y += dy; } - x += dx; } updatePixels(); -} \ No newline at end of file +}