Added logical operators 2 example |Prof Harris |Open@RIT

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 <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> 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.<br/>
+	<b>Functions</b>
+	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;
+}

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);
+    }
+
+  }

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 <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> 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.<br/>
+	<b>Functions</b>
+	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;
+}

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 <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> 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.<br/>
+	<b>Functions</b>
+	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;
+}