renaming and arranging example files to sync all 4 languages

Author: lmccart

package-lock.json

@@ -0,0 +1,88 @@
+/* 
+ * @name Trig Wheels and Pie Chart
+ * @frame 400,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> <b>How</b> to create
+a trig color wheel and a visualization of a population age data as a
+pie chart.<br/>
+	Functions are
+created for the canvas setup, trig color wheel, drawslice, and pie
+chart. The size of the slices are determined as well as their color
+range. The pie chart is separated by definitive color per value
+whereas the trig color wheel has a fixed slice amount with a range
+color fill.
+*/
+
+function setup() {
+  createCanvas(400, 400);
+  colorMode(HSB);
+  angleMode(DEGREES);
+
+  //vars for color wheel center point
+  let x = width / 2;
+  let y = height / 2 + 100;
+  colorWheel(x, y, 100); //slide 11
+
+  noStroke();
+  pieChartPop(200, 100); //slide 12
+}
+
+//**** slide 12 pie chart trig demo 
+function pieChartPop(x, y) {
+  let [total, child, young, adult, senior, elder] = [577, 103, 69,
+    122, 170, 113
+  ];
+  let startValue = 0;
+  let range = 0;
+
+  //child slice
+  range = child / total;
+  drawSlice("blue", x, y, 200, startValue, startValue + range);
+  startValue += range;
+  //young slice
+  range = young / total;
+  drawSlice("orange", x, y, 200, startValue, startValue + range);
+  startValue += range;
+  //adult slice
+  range = adult / total;
+  drawSlice("green", x, y, 200, startValue, startValue + range);
+  startValue += range;
+  //senior slice
+  range = senior / total;
+  drawSlice("tan", x, y, 200, startValue, startValue + range);
+  startValue += range;
+  //elder slice
+  range = elder / total;
+  drawSlice("pink", x, y, 200, startValue, startValue + range);
+  startValue += range;
+
+}
+
+/**
+ * drawSlice - draw colored arc based on angle percentages. slide 13
+ * Adjust angles so that 0% starts at top (actually -90).
+ * @param {color} fColor - fill color
+ * @param {number} x - center x
+ * @param {number} y - center y
+ * @param {number} d - diameter
+ * @param {float} percent1 - starting percentage
+ * @param {float} percent2 - ending percentage
+ */
+function drawSlice(fColor, x, y, d, percent1, percent2) {
+  fill(fColor);
+  arc(x, y, d, d, -90 + percent1 * 360, -90 + percent2 * 360);
+}
+
+//**** slide 11 trig demo 
+function colorWheel(x, y, rad) {
+  strokeWeight(10);
+  strokeCap(SQUARE);
+
+  //Iterate 360 degrees of lines, +10deg per turn
+  for (let a = 0; a < 360; a += 10) {
+    stroke(a, 150, 200); //hue based on a
+    //radius is 100, angle is a degrees
+    line(x, y, x + rad * cos(a),
+      y + rad * sin(a));
+  }
+}

src/assets/js/reference.js

@@ -0,0 +1,85 @@
+/* 
+ * @name Walk Over 2dArray
+ * @frame 400,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> How to display 2D array contents on the canvas
+using regular for and for-of loops in multiple different ways.<br/>
+	A function is created for the canvas, the 2D
+    array (Friend Array) is initialized and walked over using nested
+    loops in different ways. Variables x and y are used to place the
+    array item on the canvas in the form of 2D array. 
+    The final nested loop is used to initialize 2D
+    array (Fish Array) with random Integers (fish ages).
+*/
+
+
+//"use strict"; //catch some common coding errors
+
+
+/**
+ * setup :
+ */
+function setup() {
+    createCanvas(400, 600);
+    //create 2D array, slide 4
+    let friendArray = [
+      ["Nona", "mac & cheese", "orange", "Eid al-fitr"],
+      ["Marylin", "ice cream", "blue", "Halloween"],
+      ["Rashaad", "garbage plates", "turquoise", "Christmas"],
+      ["Ava", "sushi", "pink", "New Years"]
+    ];
+    friendArray.push(["Xavier", "Louisiana creole", "red", "their birthday"]);
+  
+    //walking 2D array, slide 6
+    let y = 20; // Start row based on text size of 20
+    for (let f = 0; f < friendArray.length; f++) { // outer array
+      let x = 10; // Start item in this row
+      for (let t = 0; t < friendArray[f].length; t++) { //inner
+        text(friendArray[f][t], x, y);
+        x += textWidth(friendArray[f][t]) + 20; //place next item
+      }
+      y += 28; // place next row
+    }
+  
+    //walking 2D array, variation on slide 6
+    //with embedded arithmetic for y
+    //
+    for (let f = 0; f < friendArray.length; f++) { // outer array
+      let x = 10; // Start item in this row
+      for (let t = 0; t < friendArray[f].length; t++) { //inner
+        //y is v-padding + LCV * v-spacing
+        text(friendArray[f][t], x, 200 + f * 28);
+        x += textWidth(friendArray[f][t]) + 20; //place next item
+      }
+    }
+  
+    //walking 2D array, slide 7
+    //need to use x and y variables to manage canvas placement
+    y = 400;
+    for (let friend of friendArray) {
+      let x = 10; // Start item in this row
+      console.log("x and y", x, y);
+      console.log("friend:", friend);
+      for (let item of friend) {
+        console.log("item & x:", item, x);
+        text(item, x, y);
+        x += textWidth(item) + 20; //place next item
+      }
+      y += 28; // place next row 
+    }
+  
+    //slide 9, creating 2D array: schools of fish ages
+    console.log("\n *** Fish ages in 2D ***");
+    const schools = [];
+    //4 schools of fish
+    for (let t = 0; t < 4; t++) {
+      schools[t] = []; //initialize this school 
+      console.log("schools[t]?", t, schools[t]);
+  
+      // Add 10 randomized ages to the array
+      for (let a = 0; a < 10; a++) {
+        schools[t].push(round(random(1, 5)));
+      }
+    }
+    console.log(schools);
+  }

src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js

@@ -0,0 +1,48 @@
+/* 
+ * @name Conditional Shapes
+ * @frame 400,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> How
+    to draw different shapes mid canvas depending on the mouse position.<br/>
+	<b>Functions</b>
+	are created for the main canvas set up with the markers on the left and
+    right hand sides. One is also created for the location of the mouse
+    regarding the canvas and the markers. If the mouse is within the
+    outer left hand beige rectangle, then the shape of circle is drawn
+    down the center of the canvas. If the mouse is within the outer right
+    hand beige rectangle, then the shape of square is drawn down the
+    center of the canvas.
+*/
+function setup() {
+    createCanvas(400, 400);
+    strokeWeight(3);
+    //center squares to match circles
+    rectMode(CENTER);
+    
+    //draw rects to mark far sides
+    noStroke();
+    fill("beige");
+    rect(5, height / 2, 10, height);
+    rect(width - 5, height / 2, 10, height);
+    fill("orange");
+    stroke("brown");
+  
+  }
+  
+  function draw() {
+    point(mouseX, mouseY);
+  
+    //if (test) {doThis; }
+    //test: mouseX on far left of canvas
+    //doThis: draw a circle at mouseY
+    if (mouseX < 10) {
+      circle(width / 2, mouseY, 20);
+    }
+  
+    //test: mouseX on far right of canvas
+    //doThis: draw a square at mouseY
+    if (mouseX > width - 10) {
+      square(width / 2, mouseY, 20);
+    }
+  
+  }

src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js

@@ -0,0 +1,82 @@
+/* 
+ * @name Car Instances
+ * @frame 400,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> <b>How </b>to create three instances of Car Class and
+invoke class methods.<br/>
+	A function is created for the canvas setup, and
+3 car instances are initialized with different colors and canvas
+positions. The speed of each car is set by passing value to the
+instance’s start method. A second function calls class methods to
+display and move the cars.
+*/
+class Car {
+  /* Constructor expects parameters for
+  fill color, x and y coordinates that
+  will be used to initialize class properties.
+  */
+  constructor(cColor, x, y) {
+    this.color = cColor;
+    this.doors = 4;
+    this.isConvertible = false;
+    this.x = x;
+    this.y = y;
+    this.speed = 0;
+  }
+
+  start(speed) { // method expects parameter!
+    this.speed = speed;
+  }
+
+  display() { // method!
+    fill(this.color);
+    rect(this.x, this.y, 20, 10);
+  }
+
+  move() { // method!
+    this.x += this.speed;
+    // Wrap x around boundaries
+    if (this.x < -20) {
+      this.x = width;
+    } else if (this.x > width) {
+      this.x = -20;
+    }
+  }
+} //end class Car
+
+let rav4;
+let charger;
+let nova;
+
+function setup() {
+  createCanvas(200, 400);
+  /* Construct the 3 Cars */
+  //constructor expects cColor, x, y
+  rav4 = new Car("silver", 100, 300);
+  charger = new Car("gold", 0, 200);  
+  nova = new Car("blue", 200, 100); 
+  nova.doors = 2; //update nova's doors property
+  
+  console.log("rav4", rav4);
+  console.log("charger", charger);
+  console.log("nova", nova);
+  
+  //call start methods of Car instances
+  //the start method expects a number for speed
+  rav4.start(2.3);
+  charger.start(-4);
+  nova.start(random(-1, 1));
+}
+
+function draw() {
+  background("beige");
+  
+  //display and move all 3 Cars
+  rav4.display();
+  charger.display();
+  nova.display();
+  
+  rav4.move();
+  charger.move();
+  nova.move();
+}

src/data/examples/en/04_Control/06_Conditional_Shapes.js

@@ -0,0 +1,19 @@
+/*
+ * @name Comments and Statements
+ * @description Statements are the elements that make up programs. The ";" (semi-colon) symbol is used to end statements. It is called the "statement  * terminator". Comments are used for making notes to help people better understand programs. A comment begins with two forward slashes ("//"). (ported from https://processing.org/examples/statementscomments.html)
+ */
+// The createCanvas function is a statement that tells the computer 
+// how large to make the window.
+// Each function statement has zero or more parameters. 
+// Parameters are data passed into the function
+// and are used as values for telling the computer what to do.
+function setup() {
+   createCanvas(710, 400);
+}
+
+// The background function is a statement that tells the computer
+// which color (or gray value) to make the background of the display window 
+function draw() {
+   background(204, 153, 0);
+}
+

src/data/examples/en/15_Instance_Mode/03_Car_Instances.js

@@ -0,0 +1,44 @@
+/*
+ * @name Parametric Equations
+ * @description A parametric equation is where x and y
+ * coordinates are both written in terms of another letter. This is
+ * called a parameter and is usually given in the letter t or θ.
+ * The inspiration was taken from the YouTube channel of Alexander Miller.
+ */
+
+function setup(){
+  createCanvas(720,400);
+}
+
+// the parameter at which x and y depends is usually taken as either t or symbol of theta
+let t = 0;
+function draw(){
+  background('#fff');
+  translate(width/2,height/2);
+  stroke('#0f0f0f');
+  strokeWeight(1.5);
+  //loop for adding 100 lines
+  for(let i = 0;i<100;i++){
+    line(x1(t+i),y1(t+i),x2(t+i)+20,y2(t+i)+20);
+  }
+  t+=0.15;
+}
+// function to change initial x co-ordinate of the line
+function x1(t){
+  return sin(t/10)*125+sin(t/20)*125+sin(t/30)*125;
+}
+
+// function to change initial y co-ordinate of the line
+function y1(t){
+  return cos(t/10)*125+cos(t/20)*125+cos(t/30)*125;
+}
+
+// function to change final x co-ordinate of the line
+function x2(t){
+  return sin(t/15)*125+sin(t/25)*125+sin(t/35)*125;
+}
+
+// function to change final y co-ordinate of the line
+function y2(t){
+  return cos(t/15)*125+cos(t/25)*125+cos(t/35)*125;
+}