Merge pull request #408 from ihsavru/dev

Port recursive tree, mandelbrot example

Author: lmccart

.gitignore

@@ -21,6 +21,7 @@ node_modules
 *.sublime-*
 .DS_Store
 */.DS_Store
+.idea/
 
 src/templates/pages/examples/*
 src/offline-reference

src/data/examples/en/09_Simulate/16_Recursive_Tree.js

@@ -0,0 +1,55 @@
+/*
+ * @name Recursive Tree
+ * @description Renders a simple tree-like structure via recursion.
+ * The branching angle is calculated as a function of the horizontal mouse
+ * location. Move the mouse left and right to change the angle.
+ * Based on Daniel Shiffman's <a href="https://processing.org/examples/tree.html">Recursive Tree Example</a> for Processing.
+ */
+let theta;
+
+function setup() {
+  createCanvas(710, 400);
+}
+
+function draw() {
+  background(0);
+  frameRate(30);
+  stroke(255);
+  // Let's pick an angle 0 to 90 degrees based on the mouse position
+  let a = (mouseX / width) * 90;
+  // Convert it to radians
+  theta = radians(a);
+  // Start the tree from the bottom of the screen
+  translate(width/2,height);
+  // Draw a line 120 pixels
+  line(0,0,0,-120);
+  // Move to the end of that line
+  translate(0,-120);
+  // Start the recursive branching!
+  branch(120);
+
+}
+
+function branch(h) {
+  // Each branch will be 2/3rds the size of the previous one
+  h *= 0.66;
+
+  // All recursive functions must have an exit condition!!!!
+  // Here, ours is when the length of the branch is 2 pixels or less
+  if (h > 2) {
+    push();    // Save the current state of transformation (i.e. where are we now)
+    rotate(theta);   // Rotate by theta
+    line(0, 0, 0, -h);  // Draw the branch
+    translate(0, -h); // Move to the end of the branch
+    branch(h);       // Ok, now call myself to draw two new branches!!
+    pop();     // Whenever we get back here, we "pop" in order to restore the previous matrix state
+
+    // Repeat the same thing, only branch off to the "left" this time!
+    push();
+    rotate(-theta);
+    line(0, 0, 0, -h);
+    translate(0, -h);
+    branch(h);
+    pop();
+  }
+}

src/data/examples/en/09_Simulate/17_Mandelbrot.js

@@ -0,0 +1,86 @@
+/*
+ * @name The Mandelbrot Set
+ * @description Simple rendering of the Mandelbrot set.
+ * Based on Daniel Shiffman's <a href="https://processing.org/examples/mandelbrot.html">Mandelbrot Example</a> for Processing.
+ */
+
+function setup() {
+  createCanvas(710, 400);
+  pixelDensity(1);
+  noLoop();
+}
+
+function draw() {
+  background(0);
+
+  // Establish a range of values on the complex plane
+  // A different range will allow us to "zoom" in or out on the fractal
+
+  // It all starts with the width, try higher or lower values
+  const w = 4;
+  const h = (w * height) / width;
+
+  // Start at negative half the width and height
+  const xmin = -w/2;
+  const ymin = -h/2;
+
+  // Make sure we can write to the pixels[] array.
+  // Only need to do this once since we don't do any other drawing.
+  loadPixels();
+
+  // Maximum number of iterations for each point on the complex plane
+  const maxiterations = 100;
+
+  // x goes from xmin to xmax
+  const xmax = xmin + w;
+  // y goes from ymin to ymax
+  const ymax = ymin + h;
+
+  // Calculate amount we increment x,y for each pixel
+  const dx = (xmax - xmin) / (width);
+  const dy = (ymax - ymin) / (height);
+
+  // Start y
+  let y = ymin;
+  for (let j = 0; j < height; j++) {
+    // Start x
+    let x = xmin;
+    for (let i = 0; i < width; i++) {
+
+      // Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
+      let a = x;
+      let b = y;
+      let n = 0;
+      while (n < maxiterations) {
+        const aa = a * a;
+        const bb = b * b;
+        const twoab = 2.0 * a * b;
+        a = aa - bb + x;
+        b = twoab + y;
+        // Infinty in our finite world is simple, let's just consider it 16
+        if (dist(aa, bb, 0, 0) > 16) {
+          break;  // Bail
+        }
+        n++;
+      }
+
+      // We color each pixel based on how long it takes to get to infinity
+      // If we never got there, let's pick the color black
+      const pix = (i+j*width)*4;
+      const norm = map(n, 0, maxiterations, 0, 1);
+      let bright = map(sqrt(norm), 0, 1, 0, 255);
+      if (n == maxiterations) {
+        bright = 0;
+      } else {
+        // Gosh, we could make fancy colors here if we wanted
+        pixels[pix + 0] = bright;
+        pixels[pix + 1] = bright;
+        pixels[pix + 2] = bright;
+        pixels[pix + 3] = 255;
+      }
+      x += dx;
+    }
+    y += dy;
+  }
+  updatePixels();
+}

src/data/examples/es/09_Simulate/16_Recursive_Tree.js

@@ -0,0 +1,55 @@
+/*
+ * @name Recursive Tree
+ * @description Renders a simple tree-like structure via recursion.
+ * The branching angle is calculated as a function of the horizontal mouse
+ * location. Move the mouse left and right to change the angle.
+ * Based on Daniel Shiffman's <a href="https://processing.org/examples/tree.html">Recursive Tree Example</a> for Processing.
+ */
+let theta;
+
+function setup() {
+  createCanvas(710, 400);
+}
+
+function draw() {
+  background(0);
+  frameRate(30);
+  stroke(255);
+  // Let's pick an angle 0 to 90 degrees based on the mouse position
+  let a = (mouseX / width) * 90;
+  // Convert it to radians
+  theta = radians(a);
+  // Start the tree from the bottom of the screen
+  translate(width/2,height);
+  // Draw a line 120 pixels
+  line(0,0,0,-120);
+  // Move to the end of that line
+  translate(0,-120);
+  // Start the recursive branching!
+  branch(120);
+
+}
+
+function branch(h) {
+  // Each branch will be 2/3rds the size of the previous one
+  h *= 0.66;
+
+  // All recursive functions must have an exit condition!!!!
+  // Here, ours is when the length of the branch is 2 pixels or less
+  if (h > 2) {
+    push();    // Save the current state of transformation (i.e. where are we now)
+    rotate(theta);   // Rotate by theta
+    line(0, 0, 0, -h);  // Draw the branch
+    translate(0, -h); // Move to the end of the branch
+    branch(h);       // Ok, now call myself to draw two new branches!!
+    pop();     // Whenever we get back here, we "pop" in order to restore the previous matrix state
+
+    // Repeat the same thing, only branch off to the "left" this time!
+    push();
+    rotate(-theta);
+    line(0, 0, 0, -h);
+    translate(0, -h);
+    branch(h);
+    pop();
+  }
+}

src/data/examples/es/09_Simulate/17_Mandelbrot.js

@@ -0,0 +1,86 @@
+/*
+ * @name The Mandelbrot Set
+ * @description Simple rendering of the Mandelbrot set.
+ * Based on Daniel Shiffman's <a href="https://processing.org/examples/mandelbrot.html">Mandelbrot Example</a> for Processing.
+ */
+
+function setup() {
+  createCanvas(710, 400);
+  pixelDensity(1);
+  noLoop();
+}
+
+function draw() {
+  background(0);
+
+  // Establish a range of values on the complex plane
+  // A different range will allow us to "zoom" in or out on the fractal
+
+  // It all starts with the width, try higher or lower values
+  const w = 4;
+  const h = (w * height) / width;
+
+  // Start at negative half the width and height
+  const xmin = -w/2;
+  const ymin = -h/2;
+
+  // Make sure we can write to the pixels[] array.
+  // Only need to do this once since we don't do any other drawing.
+  loadPixels();
+
+  // Maximum number of iterations for each point on the complex plane
+  const maxiterations = 100;
+
+  // x goes from xmin to xmax
+  const xmax = xmin + w;
+  // y goes from ymin to ymax
+  const ymax = ymin + h;
+
+  // Calculate amount we increment x,y for each pixel
+  const dx = (xmax - xmin) / (width);
+  const dy = (ymax - ymin) / (height);
+
+  // Start y
+  let y = ymin;
+  for (let j = 0; j < height; j++) {
+    // Start x
+    let x = xmin;
+    for (let i = 0; i < width; i++) {
+
+      // Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
+      let a = x;
+      let b = y;
+      let n = 0;
+      while (n < maxiterations) {
+        const aa = a * a;
+        const bb = b * b;
+        const twoab = 2.0 * a * b;
+        a = aa - bb + x;
+        b = twoab + y;
+        // Infinty in our finite world is simple, let's just consider it 16
+        if (dist(aa, bb, 0, 0) > 16) {
+          break;  // Bail
+        }
+        n++;
+      }
+
+      // We color each pixel based on how long it takes to get to infinity
+      // If we never got there, let's pick the color black
+      const pix = (i+j*width)*4;
+      const norm = map(n, 0, maxiterations, 0, 1);
+      let bright = map(sqrt(norm), 0, 1, 0, 255);
+      if (n == maxiterations) {
+        bright = 0;
+      } else {
+        // Gosh, we could make fancy colors here if we wanted
+        pixels[pix + 0] = bright;
+        pixels[pix + 1] = bright;
+        pixels[pix + 2] = bright;
+        pixels[pix + 3] = 255;
+      }
+      x += dx;
+    }
+    y += dy;
+  }
+  updatePixels();
+}

src/data/examples/zh-Hans/09_Simulate/16_Recursive_Tree.js

@@ -0,0 +1,55 @@
+/*
+ * @name Recursive Tree
+ * @description Renders a simple tree-like structure via recursion.
+ * The branching angle is calculated as a function of the horizontal mouse
+ * location. Move the mouse left and right to change the angle.
+ * Based on Daniel Shiffman's <a href="https://processing.org/examples/tree.html">Recursive Tree Example</a> for Processing.
+ */
+let theta;
+
+function setup() {
+  createCanvas(710, 400);
+}
+
+function draw() {
+  background(0);
+  frameRate(30);
+  stroke(255);
+  // Let's pick an angle 0 to 90 degrees based on the mouse position
+  let a = (mouseX / width) * 90;
+  // Convert it to radians
+  theta = radians(a);
+  // Start the tree from the bottom of the screen
+  translate(width/2,height);
+  // Draw a line 120 pixels
+  line(0,0,0,-120);
+  // Move to the end of that line
+  translate(0,-120);
+  // Start the recursive branching!
+  branch(120);
+
+}
+
+function branch(h) {
+  // Each branch will be 2/3rds the size of the previous one
+  h *= 0.66;
+
+  // All recursive functions must have an exit condition!!!!
+  // Here, ours is when the length of the branch is 2 pixels or less
+  if (h > 2) {
+    push();    // Save the current state of transformation (i.e. where are we now)
+    rotate(theta);   // Rotate by theta
+    line(0, 0, 0, -h);  // Draw the branch
+    translate(0, -h); // Move to the end of the branch
+    branch(h);       // Ok, now call myself to draw two new branches!!
+    pop();     // Whenever we get back here, we "pop" in order to restore the previous matrix state
+
+    // Repeat the same thing, only branch off to the "left" this time!
+    push();
+    rotate(-theta);
+    line(0, 0, 0, -h);
+    translate(0, -h);
+    branch(h);
+    pop();
+  }
+}