Add Get Child example with DOM SVG manipulation

Author: pepc84

assets/examples_js/Basics/math/Additive_Wave/Additive_Wave.js

@@ -1,58 +1,75 @@
-/**
- * Additive Wave
- * by Daniel Shiffman.
- *
- * Create a more complex wave by adding two waves together.
- */
-
-int xspacing = 8;
-int w;
-int maxwaves = 4;
-
-float theta = 0.0;
-float amplitude[4];
-float dx[4];
-float* yvalues;
-
-void setup() {
-    size(640, 360);
-    frameRate(30);
-    colorMode(RGB, 255, 255, 255, 100);
-    w = width + 16;
-    for (int i = 0; i < maxwaves; i++) {
-        amplitude[i] = random(10, 30);
-        float period = random(100, 300);
-        dx[i] = (TWO_PI / period) * xspacing;
-    }
-    yvalues = new float[w / xspacing];
+let xspacing = 8;
+let w;
+let maxwaves = 4;
+
+let theta = 0.0;
+let amplitude = [];
+let dx = [];
+let yvalues = [];
+
+function setup() {
+  createCanvas(640, 360);
+  frameRate(30);
+
+  colorMode(RGB, 255, 255, 255, 100);
+
+  w = width + 16;
+
+  for (let i = 0; i < maxwaves; i++) {
+    amplitude[i] = random(10, 30);
+
+    let period = random(100, 300);
+    dx[i] = (TWO_PI / period) * xspacing;
+  }
+
+  yvalues = new Array(floor(w / xspacing));
 }
 
-void calcWave() {
-    theta += 0.02;
-    int len = w / xspacing;
-    for (int i = 0; i < len; i++) yvalues[i] = 0;
-    for (int j = 0; j < maxwaves; j++) {
-        float x = theta;
-        for (int i = 0; i < len; i++) {
-            if (j % 2 == 0) yvalues[i] += sin(x) * amplitude[j];
-            else             yvalues[i] += cos(x) * amplitude[j];
-            x += dx[j];
-        }
+function calcWave() {
+  theta += 0.02;
+
+  let len = floor(w / xspacing);
+
+  for (let i = 0; i < len; i++) {
+    yvalues[i] = 0;
+  }
+
+  for (let j = 0; j < maxwaves; j++) {
+    let x = theta;
+
+    for (let i = 0; i < len; i++) {
+      if (j % 2 === 0) {
+        yvalues[i] += sin(x) * amplitude[j];
+      } else {
+        yvalues[i] += cos(x) * amplitude[j];
+      }
+
+      x += dx[j];
     }
+  }
 }
 
-void renderWave() {
-    noStroke();
-    fill(255, 50);
-    ellipseMode(CENTER);
-    int len = w / xspacing;
-    for (int x = 0; x < len; x++) {
-        ellipse(x * xspacing, height/2 + yvalues[x], 16, 16);
-    }
+function renderWave() {
+  noStroke();
+  fill(255, 50);
+
+  ellipseMode(CENTER);
+
+  let len = floor(w / xspacing);
+
+  for (let x = 0; x < len; x++) {
+    ellipse(
+      x * xspacing,
+      height / 2 + yvalues[x],
+      16,
+      16
+    );
+  }
 }
 
-void draw() {
-    background(0);
-    calcWave();
-    renderWave();
+function draw() {
+  background(0);
+
+  calcWave();
+  renderWave();
 }

assets/examples_js/Basics/math/Arctangent/Arctangent.js

@@ -1,44 +1,55 @@
-/**
- * Arctangent.
- *
- * Move the mouse to change the direction of the eyes.
- * The atan2() function computes the angle from each eye to the cursor.
- */
-
-struct Eye {
-    int x, y, size;
-    float angle = 0.0;
-
-    Eye(int tx, int ty, int ts) : x(tx), y(ty), size(ts) {}
-
-    void update(int mx, int my) {
-        angle = atan2(my - y, mx - x);
-    }
-
-    void display() {
-        pushMatrix();
-        translate(x, y);
-        fill(255); noStroke();
-        ellipse(0, 0, size, size);
-        rotate(angle);
-        fill(153, 204, 0);
-        ellipse(size/4, 0, size/2, size/2);
-        popMatrix();
-    }
-};
-
-Eye e1(250,  16, 120);
-Eye e2(164, 185,  80);
-Eye e3(420, 230, 220);
-
-void setup() {
-    size(640, 360);
+class Eye {
+  constructor(x, y, size) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+    this.angle = 0.0;
+  }
+
+  update(mx, my) {
+    this.angle = atan2(my - this.y, mx - this.x);
+  }
+
+  display() {
+    push();
+
+    translate(this.x, this.y);
+
+    fill(255);
     noStroke();
+    ellipse(0, 0, this.size, this.size);
+
+    rotate(this.angle);
+
+    fill(153, 204, 0);
+    ellipse(this.size / 4, 0, this.size / 2, this.size / 2);
+
+    pop();
+  }
 }
 
-void draw() {
-    background(102);
-    e1.update(mouseX, mouseY); e1.display();
-    e2.update(mouseX, mouseY); e2.display();
-    e3.update(mouseX, mouseY); e3.display();
+let e1;
+let e2;
+let e3;
+
+function setup() {
+  createCanvas(640, 360);
+  noStroke();
+
+  e1 = new Eye(250, 16, 120);
+  e2 = new Eye(164, 185, 80);
+  e3 = new Eye(420, 230, 220);
+}
+
+function draw() {
+  background(102);
+
+  e1.update(mouseX, mouseY);
+  e1.display();
+
+  e2.update(mouseX, mouseY);
+  e2.display();
+
+  e3.update(mouseX, mouseY);
+  e3.display();
 }

assets/examples_js/Basics/math/Distance_1D/Distance_1D.js

@@ -1,60 +1,68 @@
-/**
- * Distance 1D. 
- * 
- * Move the mouse left and right to control the 
- * speed and direction of the moving shapes. 
- */
- 
-float xpos1;
-float xpos2;
-float xpos3;
-float xpos4;
-int thin = 8;
-int thick = 36;
-
-void setup() 
-{
-    size(640, 360);
-    noStroke();
-
-    xpos1 = width / 2;
-    xpos2 = width / 2;
-    xpos3 = width / 2;
-    xpos4 = width / 2;
+let xpos1;
+let xpos2;
+let xpos3;
+let xpos4;
+
+let thin = 8;
+let thick = 36;
+
+function setup() {
+  createCanvas(640, 360);
+  noStroke();
+
+  xpos1 = width / 2;
+  xpos2 = width / 2;
+  xpos3 = width / 2;
+  xpos4 = width / 2;
 }
 
-void draw() 
-{
-    background(0);
-  
-    float mx = mouseX * 0.4f - width / 5.0f;
-  
-    fill(102);
-    rect(xpos2, 0, thick, height / 2);
-
-    fill(204);
-    rect(xpos1, 0, thin, height / 2);
-
-    fill(102);
-    rect(xpos4, height / 2, thick, height / 2);
-
-    fill(204);
-    rect(xpos3, height / 2, thin, height / 2);
-	
-    xpos1 += mx / 16;
-    xpos2 += mx / 64;
-    xpos3 -= mx / 16;
-    xpos4 -= mx / 64;
-  
-    if (xpos1 < -thin)  { xpos1 = width; }
-    if (xpos1 > width)  { xpos1 = -thin; }
-
-    if (xpos2 < -thick) { xpos2 = width; }
-    if (xpos2 > width)  { xpos2 = -thick; }
-
-    if (xpos3 < -thin)  { xpos3 = width; }
-    if (xpos3 > width)  { xpos3 = -thin; }
-
-    if (xpos4 < -thick) { xpos4 = width; }
-    if (xpos4 > width)  { xpos4 = -thick; }
+function draw() {
+  background(0);
+
+  let mx = mouseX * 0.4 - width / 5.0;
+
+  fill(102);
+  rect(xpos2, 0, thick, height / 2);
+
+  fill(204);
+  rect(xpos1, 0, thin, height / 2);
+
+  fill(102);
+  rect(xpos4, height / 2, thick, height / 2);
+
+  fill(204);
+  rect(xpos3, height / 2, thin, height / 2);
+
+  xpos1 += mx / 16;
+  xpos2 += mx / 64;
+  xpos3 -= mx / 16;
+  xpos4 -= mx / 64;
+
+  if (xpos1 < -thin) {
+    xpos1 = width;
+  }
+  if (xpos1 > width) {
+    xpos1 = -thin;
+  }
+
+  if (xpos2 < -thick) {
+    xpos2 = width;
+  }
+  if (xpos2 > width) {
+    xpos2 = -thick;
+  }
+
+  if (xpos3 < -thin) {
+    xpos3 = width;
+  }
+  if (xpos3 > width) {
+    xpos3 = -thin;
+  }
+
+  if (xpos4 < -thick) {
+    xpos4 = width;
+  }
+  if (xpos4 > width) {
+    xpos4 = -thick;
+  }
 }

assets/examples_js/Basics/math/Distance_2D/Distance_2D.js

@@ -1,26 +1,21 @@
-/**
- * Distance 2D. 
- * 
- * Move the mouse across the image to obscure and reveal the matrix.  
- * Measures the distance from the mouse to each square and sets the
- * size proportionally. 
- */
- 
-float max_distance;
+let max_distance;
 
-void setup() {
-  size(640, 360); 
+function setup() {
+  createCanvas(640, 360);
   noStroke();
+
   max_distance = dist(0, 0, width, height);
 }
 
-void draw() {
+function draw() {
   background(0);
 
-  for(int i = 0; i <= width; i += 20) {
-    for(int j = 0; j <= height; j += 20) {
-      float size = dist(mouseX, mouseY, i, j);
-      size = size/max_distance * 66;
+  for (let i = 0; i <= width; i += 20) {
+    for (let j = 0; j <= height; j += 20) {
+      let size = dist(mouseX, mouseY, i, j);
+
+      size = (size / max_distance) * 66;
+
       ellipse(i, j, size, size);
     }
   }