Skip to content

Commit 44f0c08

Browse files
lmccartlmccart
authored
Merge pull request #985 from suhascv/example2a
Added logical operators 2 example |Prof Harris |Open@RIT
2 parents 0a07fc5 + bbe2f1b commit 44f0c08

File tree

4 files changed

+364
-0
lines changed

4 files changed

+364
-0
lines changed

‎src/data/examples/en/04_Control/05_Logical_Operators_2.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* @name Logical Operators 2
3+
* @frame 400,400
4+
* @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
5+
<b>Prof WM Harris,</b></a> How
6+
to create Xboxes with one global variable and create conditions with
7+
boolean variables and boolean expressions by utilizing Boolean
8+
operators ||, &&, and ! to do boundary checking.<br/>
9+
<b>Functions</b>
10+
are created for both the canvas set up as well as the creation of
11+
the boxes. Background color is dependent on the location of the
12+
boxes in the canvas space. When mouse button and key are pressed
13+
simultaneously, the “where” text and box color changes to cyan,
14+
but if the mouse button is clicked alone then the animation will
15+
start. When q or Q are pressed the text “Did you type q or Q?”
16+
will change to blue, else it will be purple. If the mouse is placed
17+
within the orange box containing the text, “withinRect” then the
18+
shape will turn pink.
19+
*/
20+
21+
22+
//1 coordinate for everything :)
23+
let where = 0; //control boxes' positions
24+
25+
function setup() {
26+
createCanvas(400, 400);
27+
}
28+
29+
function draw() {
30+
//similar to slide 4 use of OR, ||
31+
//to set bg color of canvas
32+
if ((where < 0) || (where > height)) {
33+
background("beige");
34+
} else {
35+
background("chocolate");
36+
}
37+
38+
//similar to slide 4 use of AND, &&
39+
//to set fill color of box & text
40+
if (mouseIsPressed && keyIsPressed) {
41+
fill("cyan");
42+
} else {
43+
fill(255);
44+
}
45+
46+
//boxL
47+
rect(where, where, 40);
48+
49+
//boxR, pad x coordinate for size of box
50+
rect(width - where - 40, where, 40);
51+
52+
//Move the boxes
53+
where = where + 1;
54+
55+
//Show the value of where the boxes are
56+
text("where is " + where, 150, 30);
57+
58+
//testing not, ! and or, || operators
59+
if (!(key === "q" || key === "Q")) {
60+
fill("purple");
61+
} else {
62+
fill("dodgerBlue");
63+
}
64+
//Show the current key value
65+
text("Did you type a q or Q? " + key, 150, 70);
66+
67+
//*** Boundary checking ***
68+
//Is the mouse within rect boundary?
69+
//left, right, top, bottom
70+
let withinRect = (mouseX >= 150) &&
71+
(mouseX <= 150 + 100) &&
72+
(mouseY >= 300) &&
73+
(mouseY <= 300 + 40);
74+
//fill color based on value of withinRect
75+
if (withinRect) {
76+
fill("pink");
77+
} else {
78+
fill("orange");
79+
}
80+
//draw the rect
81+
rect(150, 300, 100, 40);
82+
//show withinRect value as label on rect
83+
fill(0);
84+
text("withinRect " + withinRect, 160, 320);
85+
}
86+
87+
//boxes restart
88+
function mousePressed() {
89+
//Reset boxes back up and above the canvas
90+
where = -50;
91+
}

‎src/data/examples/es/04_Control/05_Logical_Operators_2.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* @name Logical Operators 2
3+
* @frame 400,400
4+
* @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
5+
<b>Prof WM Harris,</b></a> How
6+
to create Xboxes with one global variable and create conditions with
7+
boolean variables and boolean expressions by utilizing Boolean
8+
operators ||, &&, and ! to do boundary checking.<br/>
9+
<b>Functions</b>
10+
are created for both the canvas set up as well as the creation of
11+
the boxes. Background color is dependent on the location of the
12+
boxes in the canvas space. When mouse button and key are pressed
13+
simultaneously, the “where” text and box color changes to cyan,
14+
but if the mouse button is clicked alone then the animation will
15+
start. When q or Q are pressed the text “Did you type q or Q?”
16+
will change to blue, else it will be purple. If the mouse is placed
17+
within the orange box containing the text, “withinRect” then the
18+
shape will turn pink.
19+
*/
20+
21+
22+
//1 coordinate for everything :)
23+
let where = 0; //control boxes' positions
24+
25+
function setup() {
26+
createCanvas(400, 400);
27+
}
28+
29+
function draw() {
30+
//similar to slide 4 use of OR, ||
31+
//to set bg color of canvas
32+
if ((where < 0) || (where > height)) {
33+
background("beige");
34+
} else {
35+
background("chocolate");
36+
}
37+
38+
//similar to slide 4 use of AND, &&
39+
//to set fill color of box & text
40+
if (mouseIsPressed && keyIsPressed) {
41+
fill("cyan");
42+
} else {
43+
fill(255);
44+
}
45+
46+
//boxL
47+
rect(where, where, 40);
48+
49+
//boxR, pad x coordinate for size of box
50+
rect(width - where - 40, where, 40);
51+
52+
//Move the boxes
53+
where = where + 1;
54+
55+
//Show the value of where the boxes are
56+
text("where is " + where, 150, 30);
57+
58+
//testing not, ! and or, || operators
59+
if (!(key === "q" || key === "Q")) {
60+
fill("purple");
61+
} else {
62+
fill("dodgerBlue");
63+
}
64+
//Show the current key value
65+
text("Did you type a q or Q? " + key, 150, 70);
66+
67+
//*** Boundary checking ***
68+
//Is the mouse within rect boundary?
69+
//left, right, top, bottom
70+
let withinRect = (mouseX >= 150) &&
71+
(mouseX <= 150 + 100) &&
72+
(mouseY >= 300) &&
73+
(mouseY <= 300 + 40);
74+
//fill color based on value of withinRect
75+
if (withinRect) {
76+
fill("pink");
77+
} else {
78+
fill("orange");
79+
}
80+
//draw the rect
81+
rect(150, 300, 100, 40);
82+
//show withinRect value as label on rect
83+
fill(0);
84+
text("withinRect " + withinRect, 160, 320);
85+
}
86+
87+
//boxes restart
88+
function mousePressed() {
89+
//Reset boxes back up and above the canvas
90+
where = -50;
91+
}

‎src/data/examples/ko/04_Control/05_Logical_Operators_2.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* @name Logical Operators 2
3+
* @frame 400,400
4+
* @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
5+
<b>Prof WM Harris,</b></a> How
6+
to create Xboxes with one global variable and create conditions with
7+
boolean variables and boolean expressions by utilizing Boolean
8+
operators ||, &&, and ! to do boundary checking.<br/>
9+
<b>Functions</b>
10+
are created for both the canvas set up as well as the creation of
11+
the boxes. Background color is dependent on the location of the
12+
boxes in the canvas space. When mouse button and key are pressed
13+
simultaneously, the “where” text and box color changes to cyan,
14+
but if the mouse button is clicked alone then the animation will
15+
start. When q or Q are pressed the text “Did you type q or Q?”
16+
will change to blue, else it will be purple. If the mouse is placed
17+
within the orange box containing the text, “withinRect” then the
18+
shape will turn pink.
19+
*/
20+
21+
22+
//1 coordinate for everything :)
23+
let where = 0; //control boxes' positions
24+
25+
function setup() {
26+
createCanvas(400, 400);
27+
}
28+
29+
function draw() {
30+
//similar to slide 4 use of OR, ||
31+
//to set bg color of canvas
32+
if ((where < 0) || (where > height)) {
33+
background("beige");
34+
} else {
35+
background("chocolate");
36+
}
37+
38+
//similar to slide 4 use of AND, &&
39+
//to set fill color of box & text
40+
if (mouseIsPressed && keyIsPressed) {
41+
fill("cyan");
42+
} else {
43+
fill(255);
44+
}
45+
46+
//boxL
47+
rect(where, where, 40);
48+
49+
//boxR, pad x coordinate for size of box
50+
rect(width - where - 40, where, 40);
51+
52+
//Move the boxes
53+
where = where + 1;
54+
55+
//Show the value of where the boxes are
56+
text("where is " + where, 150, 30);
57+
58+
//testing not, ! and or, || operators
59+
if (!(key === "q" || key === "Q")) {
60+
fill("purple");
61+
} else {
62+
fill("dodgerBlue");
63+
}
64+
//Show the current key value
65+
text("Did you type a q or Q? " + key, 150, 70);
66+
67+
//*** Boundary checking ***
68+
//Is the mouse within rect boundary?
69+
//left, right, top, bottom
70+
let withinRect = (mouseX >= 150) &&
71+
(mouseX <= 150 + 100) &&
72+
(mouseY >= 300) &&
73+
(mouseY <= 300 + 40);
74+
//fill color based on value of withinRect
75+
if (withinRect) {
76+
fill("pink");
77+
} else {
78+
fill("orange");
79+
}
80+
//draw the rect
81+
rect(150, 300, 100, 40);
82+
//show withinRect value as label on rect
83+
fill(0);
84+
text("withinRect " + withinRect, 160, 320);
85+
}
86+
87+
//boxes restart
88+
function mousePressed() {
89+
//Reset boxes back up and above the canvas
90+
where = -50;
91+
}

‎src/data/examples/zh-Hans/04_Control/05_Logical_Operators_2.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* @name Logical Operators 2
3+
* @frame 400,400
4+
* @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
5+
<b>Prof WM Harris,</b></a> How
6+
to create Xboxes with one global variable and create conditions with
7+
boolean variables and boolean expressions by utilizing Boolean
8+
operators ||, &&, and ! to do boundary checking.<br/>
9+
<b>Functions</b>
10+
are created for both the canvas set up as well as the creation of
11+
the boxes. Background color is dependent on the location of the
12+
boxes in the canvas space. When mouse button and key are pressed
13+
simultaneously, the “where” text and box color changes to cyan,
14+
but if the mouse button is clicked alone then the animation will
15+
start. When q or Q are pressed the text “Did you type q or Q?”
16+
will change to blue, else it will be purple. If the mouse is placed
17+
within the orange box containing the text, “withinRect” then the
18+
shape will turn pink.
19+
*/
20+
21+
22+
//1 coordinate for everything :)
23+
let where = 0; //control boxes' positions
24+
25+
function setup() {
26+
createCanvas(400, 400);
27+
}
28+
29+
function draw() {
30+
//similar to slide 4 use of OR, ||
31+
//to set bg color of canvas
32+
if ((where < 0) || (where > height)) {
33+
background("beige");
34+
} else {
35+
background("chocolate");
36+
}
37+
38+
//similar to slide 4 use of AND, &&
39+
//to set fill color of box & text
40+
if (mouseIsPressed && keyIsPressed) {
41+
fill("cyan");
42+
} else {
43+
fill(255);
44+
}
45+
46+
//boxL
47+
rect(where, where, 40);
48+
49+
//boxR, pad x coordinate for size of box
50+
rect(width - where - 40, where, 40);
51+
52+
//Move the boxes
53+
where = where + 1;
54+
55+
//Show the value of where the boxes are
56+
text("where is " + where, 150, 30);
57+
58+
//testing not, ! and or, || operators
59+
if (!(key === "q" || key === "Q")) {
60+
fill("purple");
61+
} else {
62+
fill("dodgerBlue");
63+
}
64+
//Show the current key value
65+
text("Did you type a q or Q? " + key, 150, 70);
66+
67+
//*** Boundary checking ***
68+
//Is the mouse within rect boundary?
69+
//left, right, top, bottom
70+
let withinRect = (mouseX >= 150) &&
71+
(mouseX <= 150 + 100) &&
72+
(mouseY >= 300) &&
73+
(mouseY <= 300 + 40);
74+
//fill color based on value of withinRect
75+
if (withinRect) {
76+
fill("pink");
77+
} else {
78+
fill("orange");
79+
}
80+
//draw the rect
81+
rect(150, 300, 100, 40);
82+
//show withinRect value as label on rect
83+
fill(0);
84+
text("withinRect " + withinRect, 160, 320);
85+
}
86+
87+
//boxes restart
88+
function mousePressed() {
89+
//Reset boxes back up and above the canvas
90+
where = -50;
91+
}

0 commit comments

Comments
 (0)