From 5d42a25f17dfe04c64805dc7f4076b1e0634f420 Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 09:15:25 -0400 Subject: [PATCH 1/5] 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/5] 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 998c6ea2445a31a1a99255a56b19706bb46698d0 Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 09:46:47 -0400 Subject: [PATCH 3/5] removed logical_operators_2 --- .../en/04_Control/05_Logical_Operators_2.js | 91 ------------------- 1 file changed, 91 deletions(-) delete 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 deleted file mode 100644 index 2684feb956..0000000000 --- a/src/data/examples/en/04_Control/05_Logical_Operators_2.js +++ /dev/null @@ -1,91 +0,0 @@ -/* - * @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 bd2c4e4258deb4f5131a9514088f9c4dd7514e8a Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 10:15:39 -0400 Subject: [PATCH 4/5] flip color example added --- .../examples/en/90_Hello_P5/08_flip_color.js | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/data/examples/en/90_Hello_P5/08_flip_color.js diff --git a/src/data/examples/en/90_Hello_P5/08_flip_color.js b/src/data/examples/en/90_Hello_P5/08_flip_color.js new file mode 100644 index 0000000000..ee835930a3 --- /dev/null +++ b/src/data/examples/en/90_Hello_P5/08_flip_color.js @@ -0,0 +1,60 @@ +/* + * @name Flip Color + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to use the millis() function to flip the color of a shape every two + seconds.
+ Functions + 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); + } +} + + + + + + + + From d87e1d8f4e39efaa6ca4482d853bdf9801018677 Mon Sep 17 00:00:00 2001 From: suhascv Date: Tue, 30 Mar 2021 12:21:30 -0400 Subject: [PATCH 5/5] example3 langauges --- .../es/04_Control/06_Conditional_Shapes.js | 48 +++++++++++++++++++ .../ko/04_Control/06_Conditional_Shapes.js | 48 +++++++++++++++++++ .../04_Control/06_Conditional_Shapes.js | 48 +++++++++++++++++++ 3 files changed, 144 insertions(+) create mode 100644 src/data/examples/es/04_Control/06_Conditional_Shapes.js create mode 100644 src/data/examples/ko/04_Control/06_Conditional_Shapes.js create mode 100644 src/data/examples/zh-Hans/04_Control/06_Conditional_Shapes.js diff --git a/src/data/examples/es/04_Control/06_Conditional_Shapes.js b/src/data/examples/es/04_Control/06_Conditional_Shapes.js new file mode 100644 index 0000000000..8d544e9081 --- /dev/null +++ b/src/data/examples/es/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/ko/04_Control/06_Conditional_Shapes.js b/src/data/examples/ko/04_Control/06_Conditional_Shapes.js new file mode 100644 index 0000000000..8d544e9081 --- /dev/null +++ b/src/data/examples/ko/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/zh-Hans/04_Control/06_Conditional_Shapes.js b/src/data/examples/zh-Hans/04_Control/06_Conditional_Shapes.js new file mode 100644 index 0000000000..8d544e9081 --- /dev/null +++ b/src/data/examples/zh-Hans/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); + } + + }