From 5d42a25f17dfe04c64805dc7f4076b1e0634f420 Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 09:15:25 -0400 Subject: [PATCH 1/3] logical operator example prof Harris --- .../en/04_Control/05_Logical_Operators_2.js | 91 +++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 src/data/examples/en/04_Control/05_Logical_Operators_2.js 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 From 02379edd2e35daf5a0034c6c57ec3aa032981179 Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 09:36:33 -0400 Subject: [PATCH 2/3] conditional shapes example prof Harris --- .../en/04_Control/06_Conditional_Shapes.js | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/data/examples/en/04_Control/06_Conditional_Shapes.js 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); + } + + } From bbf6c62a17cc34a6075c2b7848e4651a815cc717 Mon Sep 17 00:00:00 2001 From: suhascv Date: Tue, 30 Mar 2021 12:14:11 -0400 Subject: [PATCH 3/3] example2 in other languages --- .../es/04_Control/05_Logical_Operators_2.js | 91 +++++++++++++++++++ .../ko/04_Control/05_Logical_Operators_2.js | 91 +++++++++++++++++++ .../04_Control/05_Logical_Operators_2.js | 91 +++++++++++++++++++ 3 files changed, 273 insertions(+) create mode 100644 src/data/examples/es/04_Control/05_Logical_Operators_2.js create mode 100644 src/data/examples/ko/04_Control/05_Logical_Operators_2.js create mode 100644 src/data/examples/zh-Hans/04_Control/05_Logical_Operators_2.js 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