diff --git a/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js b/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js
new file mode 100644
index 0000000000..20597a112e
--- /dev/null
+++ b/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js
@@ -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));
+  }
+}
diff --git a/src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js b/src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js
new file mode 100644
index 0000000000..e5577e7383
--- /dev/null
+++ b/src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.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);
+  }
diff --git a/src/data/examples/en/04_Control/06_Conditional_Shapes.js b/src/data/examples/en/04_Control/06_Conditional_Shapes.js
new file mode 100644
index 0000000000..8d544e9081
--- /dev/null
+++ b/src/data/examples/en/04_Control/06_Conditional_Shapes.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);
+    }
+  
+  }
diff --git a/src/data/examples/en/15_Instance_Mode/03_Car_Instances.js b/src/data/examples/en/15_Instance_Mode/03_Car_Instances.js
new file mode 100644
index 0000000000..1966f9c8e3
--- /dev/null
+++ b/src/data/examples/en/15_Instance_Mode/03_Car_Instances.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();
+}
diff --git a/src/data/examples/es/00_Structure/00_Statements_and_Comments.js b/src/data/examples/es/00_Structure/00_Statements_and_Comments.js
new file mode 100644
index 0000000000..8469f369b7
--- /dev/null
+++ b/src/data/examples/es/00_Structure/00_Statements_and_Comments.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);
+}
+
diff --git a/src/data/examples/es/00_Structure/00_Coordinates.js b/src/data/examples/es/00_Structure/01_Coordinates.js
similarity index 100%
rename from src/data/examples/es/00_Structure/00_Coordinates.js
rename to src/data/examples/es/00_Structure/01_Coordinates.js
diff --git a/src/data/examples/es/00_Structure/01_Width_and_Height.js b/src/data/examples/es/00_Structure/02_Width_and_Height.js
similarity index 100%
rename from src/data/examples/es/00_Structure/01_Width_and_Height.js
rename to src/data/examples/es/00_Structure/02_Width_and_Height.js
diff --git a/src/data/examples/es/00_Structure/02_Setup_and_Draw.js b/src/data/examples/es/00_Structure/03_Setup_and_Draw.js
similarity index 100%
rename from src/data/examples/es/00_Structure/02_Setup_and_Draw.js
rename to src/data/examples/es/00_Structure/03_Setup_and_Draw.js
diff --git a/src/data/examples/es/00_Structure/03_No_Loop.js b/src/data/examples/es/00_Structure/04_No_Loop.js
similarity index 100%
rename from src/data/examples/es/00_Structure/03_No_Loop.js
rename to src/data/examples/es/00_Structure/04_No_Loop.js
diff --git a/src/data/examples/es/00_Structure/04_Loop.js b/src/data/examples/es/00_Structure/05_Loop.js
similarity index 100%
rename from src/data/examples/es/00_Structure/04_Loop.js
rename to src/data/examples/es/00_Structure/05_Loop.js
diff --git a/src/data/examples/es/00_Structure/05_Redraw.js b/src/data/examples/es/00_Structure/06_Redraw.js
similarity index 100%
rename from src/data/examples/es/00_Structure/05_Redraw.js
rename to src/data/examples/es/00_Structure/06_Redraw.js
diff --git a/src/data/examples/es/00_Structure/06_Functions.js b/src/data/examples/es/00_Structure/07_Functions.js
similarity index 100%
rename from src/data/examples/es/00_Structure/06_Functions.js
rename to src/data/examples/es/00_Structure/07_Functions.js
diff --git a/src/data/examples/es/00_Structure/07_Recursion.js b/src/data/examples/es/00_Structure/08_Recursion.js
similarity index 100%
rename from src/data/examples/es/00_Structure/07_Recursion.js
rename to src/data/examples/es/00_Structure/08_Recursion.js
diff --git a/src/data/examples/es/00_Structure/08_Create_Graphics.js b/src/data/examples/es/00_Structure/09_Create_Graphics.js
similarity index 100%
rename from src/data/examples/es/00_Structure/08_Create_Graphics.js
rename to src/data/examples/es/00_Structure/09_Create_Graphics.js
diff --git a/src/data/examples/es/08_Math/21_parametricEquation.js b/src/data/examples/es/08_Math/21_parametricEquation.js
new file mode 100644
index 0000000000..83c1a3c336
--- /dev/null
+++ b/src/data/examples/es/08_Math/21_parametricEquation.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;
+}
\ No newline at end of file
diff --git a/src/data/examples/es/10_Interaction/11_WeightLine.js b/src/data/examples/es/10_Interaction/11_WeightLine.js
new file mode 100644
index 0000000000..a455dcb781
--- /dev/null
+++ b/src/data/examples/es/10_Interaction/11_WeightLine.js
@@ -0,0 +1,55 @@
+/* 
+ * @name Weight Line
+ * @frame 710,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> using the random function with events to color/weight a line<br/>
+  <b>How</b> to use the random function with events to color/ weight a line
+	dependent on mouse location, left mouse button clicks, character key types, and
+	random key releases.<br/>
+  <b>Functions</b> are created for both the canvas set up as well as the creation of
+	the line. Depending on the action taken by the user the line can
+	vary in width and color. Left mouse button clicks result in a color
+	change to blue, while the typing of any character key will change
+	the color to turquoise, each resulting in a variable stroke weight;
+	the width of the former will be between 0 – 1 while the width of
+	the latter will be 0 – 5. The release of any key will result in a
+  random hue, saturation, and brightness change to the line.
+ */
+
+
+function setup() {
+    createCanvas(400, 400);
+    background("beige");
+    colorMode(HSB);
+  }
+  
+  function draw() {
+    //Line from prev pt to current pt
+    //of mouse position
+    line(mouseX, mouseY, pmouseX, pmouseY);
+  }
+  
+  //listen when we click the mouse
+  function mouseClicked() {
+    //weights 0 to 1
+    stroke("slateBlue");
+    strokeWeight(random());
+  
+    //what if want weights 0 to .4?
+    //strokeWeight( random(.4) );
+  }
+  
+  //listen when we release *any* key
+  function keyReleased() {
+    //color hue values between 20 and 145
+    //saturation 0 to 100
+    //brightness 80 to 100
+    stroke(random(20, 145), random(100), random(80, 100));
+  }
+  
+  //listen for only character keys
+  function keyTyped() {
+    //weights 0 to 5
+    stroke("turquoise");
+    strokeWeight(random(5));
+  }
\ No newline at end of file
diff --git a/src/data/examples/es/13_Motion/08_Moving_On_Curves.js b/src/data/examples/es/13_Motion/08_Moving_On_Curves.js
new file mode 100644
index 0000000000..4c347c7e00
--- /dev/null
+++ b/src/data/examples/es/13_Motion/08_Moving_On_Curves.js
@@ -0,0 +1,47 @@
+/*
+ * @name Moving On Curves
+ * @frame 720,400
+ * @description In this example, the circles moves along the curve y = x^4.
+ * Click the mouse to have it move to a new position.
+ */
+
+let beginX = 20.0; // Initial x-coordinate
+let beginY = 10.0; // Initial y-coordinate
+let endX = 570.0; // Final x-coordinate
+let endY = 320.0; // Final y-coordinate
+let distX; // X-axis distance to move
+let distY; // Y-axis distance to move
+let exponent = 4; // Determines the curve
+let x = 0.0; // Current x-coordinate
+let y = 0.0; // Current y-coordinate
+let step = 0.01; // Size of each step along the path
+let pct = 0.0; // Percentage traveled (0.0 to 1.0)
+
+function setup() {
+  createCanvas(720, 400);
+  noStroke();
+  distX = endX - beginX;
+  distY = endY - beginY;
+}
+
+function draw() {
+  fill(0, 2);
+  rect(0, 0, width, height);
+  pct += step;
+  if (pct < 1.0) {
+    x = beginX + pct * distX;
+    y = beginY + pow(pct, exponent) * distY;
+  }
+  fill(255);
+  ellipse(x, y, 20, 20);
+}
+
+function mousePressed() {
+  pct = 0.0;
+  beginX = x;
+  beginY = y;
+  endX = mouseX;
+  endY = mouseY;
+  distX = endX - beginX;
+  distY = endY - beginY;
+}
diff --git a/src/data/examples/es/19_Typography/02_Text_Rotation.js b/src/data/examples/es/19_Typography/02_Text_Rotation.js
new file mode 100644
index 0000000000..07ec47321c
--- /dev/null
+++ b/src/data/examples/es/19_Typography/02_Text_Rotation.js
@@ -0,0 +1,62 @@
+/*
+ * @name Text Rotation 
+ * @description Draws letters to the screen and rotates them at different angles.
+ *  (ported from https://processing.org/examples/textrotation.html) 
+ */
+
+let font,
+  fontsize = 32;
+
+  let angleRotate = 0.0;
+  
+  function setup() {
+    createCanvas(710, 400);
+    background(0);
+    
+    // Ensure the .ttf or .otf font stored in the assets directory
+    // is loaded before setup() and draw() are called
+    font = loadFont('assets/SourceSansPro-Regular.otf');
+    
+    // Set text characteristics
+    textFont(font);
+  } 
+  
+  function draw() {
+    background(0);
+  
+    strokeWeight(1);
+    stroke(153);
+  
+    push();
+    let angle1 = radians(45);
+    translate(100, 180);
+    rotate(angle1);
+    // Draw the letter to the screen
+    text("45 DEGREES", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+  
+    push();
+    let angle2 = radians(270);
+    translate(200, 180);
+    rotate(angle2);
+    // Draw the letter to the screen
+    text("270 DEGREES", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+    
+    push();
+    translate(440, 180);
+    rotate(radians(angleRotate));
+    text(int(angleRotate) % 360 + " DEGREES ", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+    
+    angleRotate += 0.25;
+  
+    stroke(255, 0, 0);
+    strokeWeight(4);
+    point(100, 180);
+    point(200, 180);
+    point(440, 180);
+  }
\ No newline at end of file
diff --git a/src/data/examples/es/21_Input/11_Storing_Input.js b/src/data/examples/es/21_Input/11_Storing_Input.js
new file mode 100644
index 0000000000..563ff80759
--- /dev/null
+++ b/src/data/examples/es/21_Input/11_Storing_Input.js
@@ -0,0 +1,38 @@
+/*
+ * @name Storing Input
+ * @description Move the mouse across the screen to
+ * change the position of the circles. The positions
+ * of the mouse are recorded into an array and played
+ * back every frame. Between each frame, the newest
+ * value are added to the end of each array and the
+ * oldest value is deleted.
+ */
+let num = 60;
+let mx = [];
+let my = [];
+
+function setup() {
+  createCanvas(720, 400);
+  noStroke();
+  fill(255, 153);
+  for (let i = 0; i < num; i++) {
+    mx.push(i);
+    my.push(i);
+  }
+}
+
+function draw() {
+  background(237, 34, 93);
+
+  // Cycle through the array, using a different entry on each frame.
+  // Using modulo (%) like this is faster than moving all the values over.
+  let which = frameCount % num;
+  mx[which] = mouseX;
+  my[which] = mouseY;
+
+  for (let i = 0; i < num; i++) {
+    // which+1 is the smallest (the oldest in the array)
+    let index = (which + 1 + i) % num;
+    ellipse(mx[index], my[index], i, i);
+  }
+}
diff --git a/src/data/examples/ko/00_Structure/01_Statements_and_Comments.js b/src/data/examples/ko/00_Structure/01_Statements_and_Comments.js
new file mode 100644
index 0000000000..8469f369b7
--- /dev/null
+++ b/src/data/examples/ko/00_Structure/01_Statements_and_Comments.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);
+}
+
diff --git a/src/data/examples/ko/00_Structure/01_Width_and_Height.js b/src/data/examples/ko/00_Structure/02_Width_and_Height.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/01_Width_and_Height.js
rename to src/data/examples/ko/00_Structure/02_Width_and_Height.js
diff --git a/src/data/examples/ko/00_Structure/02_Setup_and_Draw.js b/src/data/examples/ko/00_Structure/03_Setup_and_Draw.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/02_Setup_and_Draw.js
rename to src/data/examples/ko/00_Structure/03_Setup_and_Draw.js
diff --git a/src/data/examples/ko/00_Structure/03_No_Loop.js b/src/data/examples/ko/00_Structure/04_No_Loop.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/03_No_Loop.js
rename to src/data/examples/ko/00_Structure/04_No_Loop.js
diff --git a/src/data/examples/ko/00_Structure/04_Loop.js b/src/data/examples/ko/00_Structure/05_Loop.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/04_Loop.js
rename to src/data/examples/ko/00_Structure/05_Loop.js
diff --git a/src/data/examples/ko/00_Structure/05_Redraw.js b/src/data/examples/ko/00_Structure/06_Redraw.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/05_Redraw.js
rename to src/data/examples/ko/00_Structure/06_Redraw.js
diff --git a/src/data/examples/ko/00_Structure/06_Functions.js b/src/data/examples/ko/00_Structure/07_Functions.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/06_Functions.js
rename to src/data/examples/ko/00_Structure/07_Functions.js
diff --git a/src/data/examples/ko/00_Structure/07_Recursion.js b/src/data/examples/ko/00_Structure/08_Recursion.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/07_Recursion.js
rename to src/data/examples/ko/00_Structure/08_Recursion.js
diff --git a/src/data/examples/ko/00_Structure/08_Create_Graphics.js b/src/data/examples/ko/00_Structure/09_Create_Graphics.js
similarity index 100%
rename from src/data/examples/ko/00_Structure/08_Create_Graphics.js
rename to src/data/examples/ko/00_Structure/09_Create_Graphics.js
diff --git a/src/data/examples/ko/08_Math/20_Graphing2DEquations.js b/src/data/examples/ko/08_Math/20_Graphing2DEquations.js
new file mode 100644
index 0000000000..af71814bbb
--- /dev/null
+++ b/src/data/examples/ko/08_Math/20_Graphing2DEquations.js
@@ -0,0 +1,52 @@
+/**
+ * @name Graphing 2D Equations
+ * @frame 710, 400
+ * @description Graphics the following equation: sin(n cos(r) + 5θ) where n is a function of horizontal mouse location. Original by Daniel Shiffman
+ */
+function setup() {
+  createCanvas(710, 400);
+  pixelDensity(1);
+}
+
+function draw() {
+  loadPixels();
+  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;
+
+  let r;
+  let theta;
+  let 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();
+}
diff --git a/src/data/examples/ko/08_Math/21_parametricEquation.js b/src/data/examples/ko/08_Math/21_parametricEquation.js
new file mode 100644
index 0000000000..83c1a3c336
--- /dev/null
+++ b/src/data/examples/ko/08_Math/21_parametricEquation.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;
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/10_Interaction/11_WeightLine.js b/src/data/examples/ko/10_Interaction/11_WeightLine.js
new file mode 100644
index 0000000000..a455dcb781
--- /dev/null
+++ b/src/data/examples/ko/10_Interaction/11_WeightLine.js
@@ -0,0 +1,55 @@
+/* 
+ * @name Weight Line
+ * @frame 710,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> using the random function with events to color/weight a line<br/>
+  <b>How</b> to use the random function with events to color/ weight a line
+	dependent on mouse location, left mouse button clicks, character key types, and
+	random key releases.<br/>
+  <b>Functions</b> are created for both the canvas set up as well as the creation of
+	the line. Depending on the action taken by the user the line can
+	vary in width and color. Left mouse button clicks result in a color
+	change to blue, while the typing of any character key will change
+	the color to turquoise, each resulting in a variable stroke weight;
+	the width of the former will be between 0 – 1 while the width of
+	the latter will be 0 – 5. The release of any key will result in a
+  random hue, saturation, and brightness change to the line.
+ */
+
+
+function setup() {
+    createCanvas(400, 400);
+    background("beige");
+    colorMode(HSB);
+  }
+  
+  function draw() {
+    //Line from prev pt to current pt
+    //of mouse position
+    line(mouseX, mouseY, pmouseX, pmouseY);
+  }
+  
+  //listen when we click the mouse
+  function mouseClicked() {
+    //weights 0 to 1
+    stroke("slateBlue");
+    strokeWeight(random());
+  
+    //what if want weights 0 to .4?
+    //strokeWeight( random(.4) );
+  }
+  
+  //listen when we release *any* key
+  function keyReleased() {
+    //color hue values between 20 and 145
+    //saturation 0 to 100
+    //brightness 80 to 100
+    stroke(random(20, 145), random(100), random(80, 100));
+  }
+  
+  //listen for only character keys
+  function keyTyped() {
+    //weights 0 to 5
+    stroke("turquoise");
+    strokeWeight(random(5));
+  }
\ No newline at end of file
diff --git a/src/data/examples/ko/13_Motion/08_Moving_On_Curves.js b/src/data/examples/ko/13_Motion/08_Moving_On_Curves.js
new file mode 100644
index 0000000000..4c347c7e00
--- /dev/null
+++ b/src/data/examples/ko/13_Motion/08_Moving_On_Curves.js
@@ -0,0 +1,47 @@
+/*
+ * @name Moving On Curves
+ * @frame 720,400
+ * @description In this example, the circles moves along the curve y = x^4.
+ * Click the mouse to have it move to a new position.
+ */
+
+let beginX = 20.0; // Initial x-coordinate
+let beginY = 10.0; // Initial y-coordinate
+let endX = 570.0; // Final x-coordinate
+let endY = 320.0; // Final y-coordinate
+let distX; // X-axis distance to move
+let distY; // Y-axis distance to move
+let exponent = 4; // Determines the curve
+let x = 0.0; // Current x-coordinate
+let y = 0.0; // Current y-coordinate
+let step = 0.01; // Size of each step along the path
+let pct = 0.0; // Percentage traveled (0.0 to 1.0)
+
+function setup() {
+  createCanvas(720, 400);
+  noStroke();
+  distX = endX - beginX;
+  distY = endY - beginY;
+}
+
+function draw() {
+  fill(0, 2);
+  rect(0, 0, width, height);
+  pct += step;
+  if (pct < 1.0) {
+    x = beginX + pct * distX;
+    y = beginY + pow(pct, exponent) * distY;
+  }
+  fill(255);
+  ellipse(x, y, 20, 20);
+}
+
+function mousePressed() {
+  pct = 0.0;
+  beginX = x;
+  beginY = y;
+  endX = mouseX;
+  endY = mouseY;
+  distX = endX - beginX;
+  distY = endY - beginY;
+}
diff --git a/src/data/examples/ko/19_Typography/02_Text_Rotation.js b/src/data/examples/ko/19_Typography/02_Text_Rotation.js
new file mode 100644
index 0000000000..07ec47321c
--- /dev/null
+++ b/src/data/examples/ko/19_Typography/02_Text_Rotation.js
@@ -0,0 +1,62 @@
+/*
+ * @name Text Rotation 
+ * @description Draws letters to the screen and rotates them at different angles.
+ *  (ported from https://processing.org/examples/textrotation.html) 
+ */
+
+let font,
+  fontsize = 32;
+
+  let angleRotate = 0.0;
+  
+  function setup() {
+    createCanvas(710, 400);
+    background(0);
+    
+    // Ensure the .ttf or .otf font stored in the assets directory
+    // is loaded before setup() and draw() are called
+    font = loadFont('assets/SourceSansPro-Regular.otf');
+    
+    // Set text characteristics
+    textFont(font);
+  } 
+  
+  function draw() {
+    background(0);
+  
+    strokeWeight(1);
+    stroke(153);
+  
+    push();
+    let angle1 = radians(45);
+    translate(100, 180);
+    rotate(angle1);
+    // Draw the letter to the screen
+    text("45 DEGREES", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+  
+    push();
+    let angle2 = radians(270);
+    translate(200, 180);
+    rotate(angle2);
+    // Draw the letter to the screen
+    text("270 DEGREES", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+    
+    push();
+    translate(440, 180);
+    rotate(radians(angleRotate));
+    text(int(angleRotate) % 360 + " DEGREES ", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+    
+    angleRotate += 0.25;
+  
+    stroke(255, 0, 0);
+    strokeWeight(4);
+    point(100, 180);
+    point(200, 180);
+    point(440, 180);
+  }
\ No newline at end of file
diff --git a/src/data/examples/ko/21_Input/10_Rollover.js b/src/data/examples/ko/21_Input/10_Rollover.js
new file mode 100644
index 0000000000..09ebd6648c
--- /dev/null
+++ b/src/data/examples/ko/21_Input/10_Rollover.js
@@ -0,0 +1,79 @@
+/*
+ * @name Rollover
+ * @description Roll over the colored squares in the center of the image to change the color of the outside rectangle.
+ * <br><br><span class="small"><em>This example is ported from the <a href="https://processing.org/examples/rollover.html"> Rollover example</a>
+ * on the Processing website</em></span>
+ */
+let squareX, squareY;  // Position of square button
+let circleX, circleY;  // Position of circle button
+let squareSize = 90;   // Width/height of square
+let circleSize = 93;   // Diameter of circle
+
+let squareColor;
+let circleColor;
+let baseColor;
+
+let squareOver = false;
+let circleOver = false;
+
+function setup() {
+  createCanvas(710, 400);
+  squareColor = color(0);
+  circleColor = color(255);
+  baseColor = color(102);
+  circleX = width/2+circleSize/2+10;
+  circleY = height/2;
+  squareX = width/2-squareSize-10;
+  squareY = height/2-squareSize/2;
+}
+
+function draw() {
+  update(mouseX, mouseY);
+
+  noStroke();
+  if (squareOver) {
+    background(squareColor);
+  } else if (circleOver) {
+    background(circleColor);
+  } else {
+    background(baseColor);
+  }
+
+  stroke(255);
+  fill(squareColor);
+  square(squareX, squareY, squareSize);
+  stroke(0);
+  fill(circleColor);
+  circle(circleX, circleY, circleSize);
+}
+
+function update(x, y) {
+  if( overCircle(circleX, circleY, circleSize) ) {
+    circleOver = true;
+    squareOver = false;
+  } else if ( overSquare(squareX, squareY, squareSize) ) {
+    squareOver = true;
+    circleOver = false;
+  } else {
+    circleOver = squareOver = false;
+  }
+}
+
+function overSquare(x, y, size) {
+  if (mouseX >= x && mouseX <= x+size && 
+      mouseY >= y && mouseY <= y+size) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function overCircle(x, y, diameter) {
+  const disX = x - mouseX;
+  const disY = y - mouseY;
+  if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
+    return true;
+  } else {
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/21_Input/11_Storing_Input.js b/src/data/examples/ko/21_Input/11_Storing_Input.js
new file mode 100644
index 0000000000..563ff80759
--- /dev/null
+++ b/src/data/examples/ko/21_Input/11_Storing_Input.js
@@ -0,0 +1,38 @@
+/*
+ * @name Storing Input
+ * @description Move the mouse across the screen to
+ * change the position of the circles. The positions
+ * of the mouse are recorded into an array and played
+ * back every frame. Between each frame, the newest
+ * value are added to the end of each array and the
+ * oldest value is deleted.
+ */
+let num = 60;
+let mx = [];
+let my = [];
+
+function setup() {
+  createCanvas(720, 400);
+  noStroke();
+  fill(255, 153);
+  for (let i = 0; i < num; i++) {
+    mx.push(i);
+    my.push(i);
+  }
+}
+
+function draw() {
+  background(237, 34, 93);
+
+  // Cycle through the array, using a different entry on each frame.
+  // Using modulo (%) like this is faster than moving all the values over.
+  let which = frameCount % num;
+  mx[which] = mouseX;
+  my[which] = mouseY;
+
+  for (let i = 0; i < num; i++) {
+    // which+1 is the smallest (the oldest in the array)
+    let index = (which + 1 + i) % num;
+    ellipse(mx[index], my[index], i, i);
+  }
+}
diff --git a/src/data/examples/ko/22_Advanced_Data/01_Load_Saved_Table.js b/src/data/examples/ko/22_Advanced_Data/01_Load_Saved_Table.js
new file mode 100644
index 0000000000..8536abcccc
--- /dev/null
+++ b/src/data/examples/ko/22_Advanced_Data/01_Load_Saved_Table.js
@@ -0,0 +1,110 @@
+/*
+ * @name Load Saved Table
+ * @description Create a Bubble class, instantiate multiple bubbles using data from
+ * a csv file, and display results on the screen.
+ *  Because the web browsers differ in where they save files, we do not make use of
+ * 
+ * Based on Daniel Shiffman's <a href="https://processing.org/examples/loadsavetable.html">LoadSaveTable Example</a> for Processing.
+ */
+
+// Bubble class
+class Bubble {
+  constructor(x, y, diameter, name) {
+    this.x = x;
+    this.y = y;
+    this.diameter = diameter;
+    this.radius = diameter / 2;
+    this.name = name;
+
+    this.over = false;
+  }
+
+  // Check if mouse is over the bubble
+  rollover(px, py) {
+    let d = dist(px, py, this.x, this.y);
+    this.over = d < this.radius;
+  }
+
+  // Display the Bubble
+  display() {
+    stroke(0);
+    strokeWeight(0.8);
+    noFill();
+    ellipse(this.x, this.y, this.diameter, this.diameter);
+    if (this.over) {
+      fill(0);
+      textAlign(CENTER);
+      text(this.name, this.x, this.y + this.radius + 20);
+    }
+  }
+}
+
+let table; // Global object to hold results from the loadTable call
+let bubbles = []; // Global array to hold all bubble objects
+
+// Put any asynchronous data loading in preload to complete before "setup" is run
+function preload() {
+  table = loadTable("assets/bubbles.csv", "header");
+}
+
+// Convert saved Bubble data into Bubble Objects
+function loadData() {
+  const bubbleData = table.getRows();
+  // The size of the array of Bubble objects is determined by the total number of rows in the CSV
+  const length = table.getRowCount();
+
+  for (let i = 0; i < length; i++) {
+    // Get position, diameter, name,
+    const x = bubbleData[i].getNum("x");
+    const y = bubbleData[i].getNum("y");
+    const diameter = bubbleData[i].getNum("diameter");
+    const name = bubbleData[i].getString("name");
+
+    // Put object in array
+    bubbles.push(new Bubble(x, y, diameter, name));
+  }
+}
+
+// Create a new Bubble each time the mouse is clicked.
+function mousePressed() {
+  // Create a new row
+  let row = table.addRow();
+
+  let name = "New Bubble";
+  let diameter = random(40, 80);
+
+  // Set the values of that row
+  row.setNum("x", mouseX);
+  row.setNum("y", mouseY);
+  row.setNum("diameter", diameter);
+  row.setString("name", name);
+
+  bubbles.push(new Bubble(mouseX, mouseY, diameter, name));
+
+  // If the table has more than 10 rows
+  if (table.getRowCount() > 10) {
+    // Delete the oldest row
+    table.removeRow(0);
+    bubbles.shift();
+  }
+}
+
+function setup() {
+  createCanvas(640, 360);
+  loadData();
+}
+
+function draw() {
+  background(255);
+
+  // Display all bubbles
+  for (let i = 0; i < bubbles.length; i++) {
+    bubbles[i].display();
+    bubbles[i].rollover(mouseX, mouseY);
+  }
+
+  // Label directions at bottom
+  textAlign(LEFT);
+  fill(0);
+  text("Click to add bubbles.", 10, height - 10);
+}
diff --git a/src/data/examples/zh-Hans/00_Structure/00_Statements_and_Comments.js b/src/data/examples/zh-Hans/00_Structure/00_Statements_and_Comments.js
new file mode 100644
index 0000000000..8469f369b7
--- /dev/null
+++ b/src/data/examples/zh-Hans/00_Structure/00_Statements_and_Comments.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);
+}
+
diff --git a/src/data/examples/zh-Hans/00_Structure/00_Coordinates.js b/src/data/examples/zh-Hans/00_Structure/01_Coordinates.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/00_Coordinates.js
rename to src/data/examples/zh-Hans/00_Structure/01_Coordinates.js
diff --git a/src/data/examples/zh-Hans/00_Structure/01_Width_and_Height.js b/src/data/examples/zh-Hans/00_Structure/02_Width_and_Height.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/01_Width_and_Height.js
rename to src/data/examples/zh-Hans/00_Structure/02_Width_and_Height.js
diff --git a/src/data/examples/zh-Hans/00_Structure/02_Setup_and_Draw.js b/src/data/examples/zh-Hans/00_Structure/03_Setup_and_Draw.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/02_Setup_and_Draw.js
rename to src/data/examples/zh-Hans/00_Structure/03_Setup_and_Draw.js
diff --git a/src/data/examples/zh-Hans/00_Structure/03_No_Loop.js b/src/data/examples/zh-Hans/00_Structure/04_No_Loop.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/03_No_Loop.js
rename to src/data/examples/zh-Hans/00_Structure/04_No_Loop.js
diff --git a/src/data/examples/zh-Hans/00_Structure/04_Loop.js b/src/data/examples/zh-Hans/00_Structure/05_Loop.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/04_Loop.js
rename to src/data/examples/zh-Hans/00_Structure/05_Loop.js
diff --git a/src/data/examples/zh-Hans/00_Structure/05_Redraw.js b/src/data/examples/zh-Hans/00_Structure/06_Redraw.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/05_Redraw.js
rename to src/data/examples/zh-Hans/00_Structure/06_Redraw.js
diff --git a/src/data/examples/zh-Hans/00_Structure/06_Functions.js b/src/data/examples/zh-Hans/00_Structure/07_Functions.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/06_Functions.js
rename to src/data/examples/zh-Hans/00_Structure/07_Functions.js
diff --git a/src/data/examples/zh-Hans/00_Structure/07_Recursion.js b/src/data/examples/zh-Hans/00_Structure/08_Recursion.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/07_Recursion.js
rename to src/data/examples/zh-Hans/00_Structure/08_Recursion.js
diff --git a/src/data/examples/zh-Hans/00_Structure/08_Create_Graphics.js b/src/data/examples/zh-Hans/00_Structure/09_Create_Graphics.js
similarity index 100%
rename from src/data/examples/zh-Hans/00_Structure/08_Create_Graphics.js
rename to src/data/examples/zh-Hans/00_Structure/09_Create_Graphics.js
diff --git a/src/data/examples/zh-Hans/08_Math/21_parametricEquation.js b/src/data/examples/zh-Hans/08_Math/21_parametricEquation.js
new file mode 100644
index 0000000000..83c1a3c336
--- /dev/null
+++ b/src/data/examples/zh-Hans/08_Math/21_parametricEquation.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;
+}
\ No newline at end of file
diff --git a/src/data/examples/zh-Hans/10_Interaction/11_WeightLine.js b/src/data/examples/zh-Hans/10_Interaction/11_WeightLine.js
new file mode 100644
index 0000000000..a455dcb781
--- /dev/null
+++ b/src/data/examples/zh-Hans/10_Interaction/11_WeightLine.js
@@ -0,0 +1,55 @@
+/* 
+ * @name Weight Line
+ * @frame 710,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> using the random function with events to color/weight a line<br/>
+  <b>How</b> to use the random function with events to color/ weight a line
+	dependent on mouse location, left mouse button clicks, character key types, and
+	random key releases.<br/>
+  <b>Functions</b> are created for both the canvas set up as well as the creation of
+	the line. Depending on the action taken by the user the line can
+	vary in width and color. Left mouse button clicks result in a color
+	change to blue, while the typing of any character key will change
+	the color to turquoise, each resulting in a variable stroke weight;
+	the width of the former will be between 0 – 1 while the width of
+	the latter will be 0 – 5. The release of any key will result in a
+  random hue, saturation, and brightness change to the line.
+ */
+
+
+function setup() {
+    createCanvas(400, 400);
+    background("beige");
+    colorMode(HSB);
+  }
+  
+  function draw() {
+    //Line from prev pt to current pt
+    //of mouse position
+    line(mouseX, mouseY, pmouseX, pmouseY);
+  }
+  
+  //listen when we click the mouse
+  function mouseClicked() {
+    //weights 0 to 1
+    stroke("slateBlue");
+    strokeWeight(random());
+  
+    //what if want weights 0 to .4?
+    //strokeWeight( random(.4) );
+  }
+  
+  //listen when we release *any* key
+  function keyReleased() {
+    //color hue values between 20 and 145
+    //saturation 0 to 100
+    //brightness 80 to 100
+    stroke(random(20, 145), random(100), random(80, 100));
+  }
+  
+  //listen for only character keys
+  function keyTyped() {
+    //weights 0 to 5
+    stroke("turquoise");
+    strokeWeight(random(5));
+  }
\ No newline at end of file
diff --git a/src/data/examples/zh-Hans/13_Motion/08_Moving_On_Curves.js b/src/data/examples/zh-Hans/13_Motion/08_Moving_On_Curves.js
new file mode 100644
index 0000000000..4c347c7e00
--- /dev/null
+++ b/src/data/examples/zh-Hans/13_Motion/08_Moving_On_Curves.js
@@ -0,0 +1,47 @@
+/*
+ * @name Moving On Curves
+ * @frame 720,400
+ * @description In this example, the circles moves along the curve y = x^4.
+ * Click the mouse to have it move to a new position.
+ */
+
+let beginX = 20.0; // Initial x-coordinate
+let beginY = 10.0; // Initial y-coordinate
+let endX = 570.0; // Final x-coordinate
+let endY = 320.0; // Final y-coordinate
+let distX; // X-axis distance to move
+let distY; // Y-axis distance to move
+let exponent = 4; // Determines the curve
+let x = 0.0; // Current x-coordinate
+let y = 0.0; // Current y-coordinate
+let step = 0.01; // Size of each step along the path
+let pct = 0.0; // Percentage traveled (0.0 to 1.0)
+
+function setup() {
+  createCanvas(720, 400);
+  noStroke();
+  distX = endX - beginX;
+  distY = endY - beginY;
+}
+
+function draw() {
+  fill(0, 2);
+  rect(0, 0, width, height);
+  pct += step;
+  if (pct < 1.0) {
+    x = beginX + pct * distX;
+    y = beginY + pow(pct, exponent) * distY;
+  }
+  fill(255);
+  ellipse(x, y, 20, 20);
+}
+
+function mousePressed() {
+  pct = 0.0;
+  beginX = x;
+  beginY = y;
+  endX = mouseX;
+  endY = mouseY;
+  distX = endX - beginX;
+  distY = endY - beginY;
+}
diff --git a/src/data/examples/zh-Hans/19_Typography/02_Text_Rotation.js b/src/data/examples/zh-Hans/19_Typography/02_Text_Rotation.js
new file mode 100644
index 0000000000..07ec47321c
--- /dev/null
+++ b/src/data/examples/zh-Hans/19_Typography/02_Text_Rotation.js
@@ -0,0 +1,62 @@
+/*
+ * @name Text Rotation 
+ * @description Draws letters to the screen and rotates them at different angles.
+ *  (ported from https://processing.org/examples/textrotation.html) 
+ */
+
+let font,
+  fontsize = 32;
+
+  let angleRotate = 0.0;
+  
+  function setup() {
+    createCanvas(710, 400);
+    background(0);
+    
+    // Ensure the .ttf or .otf font stored in the assets directory
+    // is loaded before setup() and draw() are called
+    font = loadFont('assets/SourceSansPro-Regular.otf');
+    
+    // Set text characteristics
+    textFont(font);
+  } 
+  
+  function draw() {
+    background(0);
+  
+    strokeWeight(1);
+    stroke(153);
+  
+    push();
+    let angle1 = radians(45);
+    translate(100, 180);
+    rotate(angle1);
+    // Draw the letter to the screen
+    text("45 DEGREES", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+  
+    push();
+    let angle2 = radians(270);
+    translate(200, 180);
+    rotate(angle2);
+    // Draw the letter to the screen
+    text("270 DEGREES", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+    
+    push();
+    translate(440, 180);
+    rotate(radians(angleRotate));
+    text(int(angleRotate) % 360 + " DEGREES ", 0, 0);
+    line(0, 0, 150, 0);
+    pop();
+    
+    angleRotate += 0.25;
+  
+    stroke(255, 0, 0);
+    strokeWeight(4);
+    point(100, 180);
+    point(200, 180);
+    point(440, 180);
+  }
\ No newline at end of file
diff --git a/src/data/examples/zh-Hans/21_Input/11_Storing_Input.js b/src/data/examples/zh-Hans/21_Input/11_Storing_Input.js
new file mode 100644
index 0000000000..563ff80759
--- /dev/null
+++ b/src/data/examples/zh-Hans/21_Input/11_Storing_Input.js
@@ -0,0 +1,38 @@
+/*
+ * @name Storing Input
+ * @description Move the mouse across the screen to
+ * change the position of the circles. The positions
+ * of the mouse are recorded into an array and played
+ * back every frame. Between each frame, the newest
+ * value are added to the end of each array and the
+ * oldest value is deleted.
+ */
+let num = 60;
+let mx = [];
+let my = [];
+
+function setup() {
+  createCanvas(720, 400);
+  noStroke();
+  fill(255, 153);
+  for (let i = 0; i < num; i++) {
+    mx.push(i);
+    my.push(i);
+  }
+}
+
+function draw() {
+  background(237, 34, 93);
+
+  // Cycle through the array, using a different entry on each frame.
+  // Using modulo (%) like this is faster than moving all the values over.
+  let which = frameCount % num;
+  mx[which] = mouseX;
+  my[which] = mouseY;
+
+  for (let i = 0; i < num; i++) {
+    // which+1 is the smallest (the oldest in the array)
+    let index = (which + 1 + i) % num;
+    ellipse(mx[index], my[index], i, i);
+  }
+}