diff --git a/src/data/examples/en/04_Control/05_Logical_Operators_2.js b/src/data/examples/en/04_Control/05_Logical_Operators_2.js
new file mode 100644
index 0000000000..2684feb956
--- /dev/null
+++ b/src/data/examples/en/04_Control/05_Logical_Operators_2.js
@@ -0,0 +1,91 @@
+/*
+ * @name Logical Operators 2
+ * @frame 400,400
+ * @description contributed by
+ Prof WM Harris, How
+ to create Xboxes with one global variable and create conditions with
+ boolean variables and boolean expressions by utilizing Boolean
+ operators ||, &&, and ! to do boundary checking.
+ Functions
+ are created for both the canvas set up as well as the creation of
+ the boxes. Background color is dependent on the location of the
+ boxes in the canvas space. When mouse button and key are pressed
+ simultaneously, the “where” text and box color changes to cyan,
+ but if the mouse button is clicked alone then the animation will
+ start. When q or Q are pressed the text “Did you type q or Q?”
+ will change to blue, else it will be purple. If the mouse is placed
+ within the orange box containing the text, “withinRect” then the
+ shape will turn pink.
+ */
+
+
+//1 coordinate for everything :)
+let where = 0; //control boxes' positions
+
+function setup() {
+ createCanvas(400, 400);
+}
+
+function draw() {
+ //similar to slide 4 use of OR, ||
+ //to set bg color of canvas
+ if ((where < 0) || (where > height)) {
+ background("beige");
+ } else {
+ background("chocolate");
+ }
+
+ //similar to slide 4 use of AND, &&
+ //to set fill color of box & text
+ if (mouseIsPressed && keyIsPressed) {
+ fill("cyan");
+ } else {
+ fill(255);
+ }
+
+ //boxL
+ rect(where, where, 40);
+
+ //boxR, pad x coordinate for size of box
+ rect(width - where - 40, where, 40);
+
+ //Move the boxes
+ where = where + 1;
+
+ //Show the value of where the boxes are
+ text("where is " + where, 150, 30);
+
+ //testing not, ! and or, || operators
+ if (!(key === "q" || key === "Q")) {
+ fill("purple");
+ } else {
+ fill("dodgerBlue");
+ }
+ //Show the current key value
+ text("Did you type a q or Q? " + key, 150, 70);
+
+ //*** Boundary checking ***
+ //Is the mouse within rect boundary?
+ //left, right, top, bottom
+ let withinRect = (mouseX >= 150) &&
+ (mouseX <= 150 + 100) &&
+ (mouseY >= 300) &&
+ (mouseY <= 300 + 40);
+ //fill color based on value of withinRect
+ if (withinRect) {
+ fill("pink");
+ } else {
+ fill("orange");
+ }
+ //draw the rect
+ rect(150, 300, 100, 40);
+ //show withinRect value as label on rect
+ fill(0);
+ text("withinRect " + withinRect, 160, 320);
+}
+
+//boxes restart
+function mousePressed() {
+ //Reset boxes back up and above the canvas
+ where = -50;
+}
\ No newline at end of file
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
+ Prof WM Harris, How
+ to draw different shapes mid canvas depending on the mouse position.
+ Functions
+ 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/es/04_Control/05_Logical_Operators_2.js b/src/data/examples/es/04_Control/05_Logical_Operators_2.js
new file mode 100644
index 0000000000..2684feb956
--- /dev/null
+++ b/src/data/examples/es/04_Control/05_Logical_Operators_2.js
@@ -0,0 +1,91 @@
+/*
+ * @name Logical Operators 2
+ * @frame 400,400
+ * @description contributed by
+ Prof WM Harris, How
+ to create Xboxes with one global variable and create conditions with
+ boolean variables and boolean expressions by utilizing Boolean
+ operators ||, &&, and ! to do boundary checking.
+ Functions
+ are created for both the canvas set up as well as the creation of
+ the boxes. Background color is dependent on the location of the
+ boxes in the canvas space. When mouse button and key are pressed
+ simultaneously, the “where” text and box color changes to cyan,
+ but if the mouse button is clicked alone then the animation will
+ start. When q or Q are pressed the text “Did you type q or Q?”
+ will change to blue, else it will be purple. If the mouse is placed
+ within the orange box containing the text, “withinRect” then the
+ shape will turn pink.
+ */
+
+
+//1 coordinate for everything :)
+let where = 0; //control boxes' positions
+
+function setup() {
+ createCanvas(400, 400);
+}
+
+function draw() {
+ //similar to slide 4 use of OR, ||
+ //to set bg color of canvas
+ if ((where < 0) || (where > height)) {
+ background("beige");
+ } else {
+ background("chocolate");
+ }
+
+ //similar to slide 4 use of AND, &&
+ //to set fill color of box & text
+ if (mouseIsPressed && keyIsPressed) {
+ fill("cyan");
+ } else {
+ fill(255);
+ }
+
+ //boxL
+ rect(where, where, 40);
+
+ //boxR, pad x coordinate for size of box
+ rect(width - where - 40, where, 40);
+
+ //Move the boxes
+ where = where + 1;
+
+ //Show the value of where the boxes are
+ text("where is " + where, 150, 30);
+
+ //testing not, ! and or, || operators
+ if (!(key === "q" || key === "Q")) {
+ fill("purple");
+ } else {
+ fill("dodgerBlue");
+ }
+ //Show the current key value
+ text("Did you type a q or Q? " + key, 150, 70);
+
+ //*** Boundary checking ***
+ //Is the mouse within rect boundary?
+ //left, right, top, bottom
+ let withinRect = (mouseX >= 150) &&
+ (mouseX <= 150 + 100) &&
+ (mouseY >= 300) &&
+ (mouseY <= 300 + 40);
+ //fill color based on value of withinRect
+ if (withinRect) {
+ fill("pink");
+ } else {
+ fill("orange");
+ }
+ //draw the rect
+ rect(150, 300, 100, 40);
+ //show withinRect value as label on rect
+ fill(0);
+ text("withinRect " + withinRect, 160, 320);
+}
+
+//boxes restart
+function mousePressed() {
+ //Reset boxes back up and above the canvas
+ where = -50;
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/04_Control/05_Logical_Operators_2.js b/src/data/examples/ko/04_Control/05_Logical_Operators_2.js
new file mode 100644
index 0000000000..2684feb956
--- /dev/null
+++ b/src/data/examples/ko/04_Control/05_Logical_Operators_2.js
@@ -0,0 +1,91 @@
+/*
+ * @name Logical Operators 2
+ * @frame 400,400
+ * @description contributed by
+ Prof WM Harris, How
+ to create Xboxes with one global variable and create conditions with
+ boolean variables and boolean expressions by utilizing Boolean
+ operators ||, &&, and ! to do boundary checking.
+ Functions
+ are created for both the canvas set up as well as the creation of
+ the boxes. Background color is dependent on the location of the
+ boxes in the canvas space. When mouse button and key are pressed
+ simultaneously, the “where” text and box color changes to cyan,
+ but if the mouse button is clicked alone then the animation will
+ start. When q or Q are pressed the text “Did you type q or Q?”
+ will change to blue, else it will be purple. If the mouse is placed
+ within the orange box containing the text, “withinRect” then the
+ shape will turn pink.
+ */
+
+
+//1 coordinate for everything :)
+let where = 0; //control boxes' positions
+
+function setup() {
+ createCanvas(400, 400);
+}
+
+function draw() {
+ //similar to slide 4 use of OR, ||
+ //to set bg color of canvas
+ if ((where < 0) || (where > height)) {
+ background("beige");
+ } else {
+ background("chocolate");
+ }
+
+ //similar to slide 4 use of AND, &&
+ //to set fill color of box & text
+ if (mouseIsPressed && keyIsPressed) {
+ fill("cyan");
+ } else {
+ fill(255);
+ }
+
+ //boxL
+ rect(where, where, 40);
+
+ //boxR, pad x coordinate for size of box
+ rect(width - where - 40, where, 40);
+
+ //Move the boxes
+ where = where + 1;
+
+ //Show the value of where the boxes are
+ text("where is " + where, 150, 30);
+
+ //testing not, ! and or, || operators
+ if (!(key === "q" || key === "Q")) {
+ fill("purple");
+ } else {
+ fill("dodgerBlue");
+ }
+ //Show the current key value
+ text("Did you type a q or Q? " + key, 150, 70);
+
+ //*** Boundary checking ***
+ //Is the mouse within rect boundary?
+ //left, right, top, bottom
+ let withinRect = (mouseX >= 150) &&
+ (mouseX <= 150 + 100) &&
+ (mouseY >= 300) &&
+ (mouseY <= 300 + 40);
+ //fill color based on value of withinRect
+ if (withinRect) {
+ fill("pink");
+ } else {
+ fill("orange");
+ }
+ //draw the rect
+ rect(150, 300, 100, 40);
+ //show withinRect value as label on rect
+ fill(0);
+ text("withinRect " + withinRect, 160, 320);
+}
+
+//boxes restart
+function mousePressed() {
+ //Reset boxes back up and above the canvas
+ where = -50;
+}
\ No newline at end of file
diff --git a/src/data/examples/zh-Hans/04_Control/05_Logical_Operators_2.js b/src/data/examples/zh-Hans/04_Control/05_Logical_Operators_2.js
new file mode 100644
index 0000000000..2684feb956
--- /dev/null
+++ b/src/data/examples/zh-Hans/04_Control/05_Logical_Operators_2.js
@@ -0,0 +1,91 @@
+/*
+ * @name Logical Operators 2
+ * @frame 400,400
+ * @description contributed by
+ Prof WM Harris, How
+ to create Xboxes with one global variable and create conditions with
+ boolean variables and boolean expressions by utilizing Boolean
+ operators ||, &&, and ! to do boundary checking.
+ Functions
+ are created for both the canvas set up as well as the creation of
+ the boxes. Background color is dependent on the location of the
+ boxes in the canvas space. When mouse button and key are pressed
+ simultaneously, the “where” text and box color changes to cyan,
+ but if the mouse button is clicked alone then the animation will
+ start. When q or Q are pressed the text “Did you type q or Q?”
+ will change to blue, else it will be purple. If the mouse is placed
+ within the orange box containing the text, “withinRect” then the
+ shape will turn pink.
+ */
+
+
+//1 coordinate for everything :)
+let where = 0; //control boxes' positions
+
+function setup() {
+ createCanvas(400, 400);
+}
+
+function draw() {
+ //similar to slide 4 use of OR, ||
+ //to set bg color of canvas
+ if ((where < 0) || (where > height)) {
+ background("beige");
+ } else {
+ background("chocolate");
+ }
+
+ //similar to slide 4 use of AND, &&
+ //to set fill color of box & text
+ if (mouseIsPressed && keyIsPressed) {
+ fill("cyan");
+ } else {
+ fill(255);
+ }
+
+ //boxL
+ rect(where, where, 40);
+
+ //boxR, pad x coordinate for size of box
+ rect(width - where - 40, where, 40);
+
+ //Move the boxes
+ where = where + 1;
+
+ //Show the value of where the boxes are
+ text("where is " + where, 150, 30);
+
+ //testing not, ! and or, || operators
+ if (!(key === "q" || key === "Q")) {
+ fill("purple");
+ } else {
+ fill("dodgerBlue");
+ }
+ //Show the current key value
+ text("Did you type a q or Q? " + key, 150, 70);
+
+ //*** Boundary checking ***
+ //Is the mouse within rect boundary?
+ //left, right, top, bottom
+ let withinRect = (mouseX >= 150) &&
+ (mouseX <= 150 + 100) &&
+ (mouseY >= 300) &&
+ (mouseY <= 300 + 40);
+ //fill color based on value of withinRect
+ if (withinRect) {
+ fill("pink");
+ } else {
+ fill("orange");
+ }
+ //draw the rect
+ rect(150, 300, 100, 40);
+ //show withinRect value as label on rect
+ fill(0);
+ text("withinRect " + withinRect, 160, 320);
+}
+
+//boxes restart
+function mousePressed() {
+ //Reset boxes back up and above the canvas
+ where = -50;
+}
\ No newline at end of file