Added Conditional Shapes example |Prof Harris |Open@RIT

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/en/90_Hello_P5/08_flip_color.js

@@ -0,0 +1,60 @@
+/* 
+ * @name Flip Color
+ * @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 use the millis() function to flip the color of a shape every two
+    seconds.<br/>
+	<b>Functions</b>
+	are created for the main canvas set up which consists of a line of
+    ellipses and determines the flip time amount.  A second function is
+    created to determine the fill when the color is flipped.
+*/
+
+
+let flipTime; //time to flip fillColor btn 0 and 255
+let fillColor; //store current ellipse color
+
+function setup() {
+  createCanvas(400, 400);
+  fillColor = 0; //black
+  fill(fillColor);
+  ellipseMode(CORNER);
+  // flipTime = 2secs in the future (2000ms)
+  flipTime = 2000;
+}
+
+function draw() {
+  /* if current time >= flipTime, flip fillColor, call
+        fill() with the new color, & set the next flipTime
+   */
+  if ( millis()  >= flipTime) {
+    console.log(flipTime); //what is flipTime now?
+
+    //flip fillColor
+    if (fillColor === 0) {
+      fillColor = 255; //white
+    } else {
+      fillColor = 0; //black
+    }
+
+    //call fill() with the new color
+    fill(fillColor);
+
+    //set the next flipTime
+    flipTime = millis() + 2000; // 2 secs + current time
+  }
+
+  //ellipse(0, 0, width, height);
+  //Instead, a canvas-wide row of 20-pixel circles 
+  for (let x = 0; x < width; x = x + 20) {
+    ellipse(x, 190, 20);
+  }
+}
+
+
+
+
+
+
+
+

src/data/examples/es/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/ko/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/zh-Hans/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);
+    }
+
+  }