From 5d42a25f17dfe04c64805dc7f4076b1e0634f420 Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 09:15:25 -0400 Subject: [PATCH 1/9] 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/9] 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/9] 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/9] 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 c70c25e819298d9ec5c8adde2b25d2afc66023bb Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 10:17:42 -0400 Subject: [PATCH 5/9] removed prev --- .../en/04_Control/06_Conditional_Shapes.js | 48 ------------------- 1 file changed, 48 deletions(-) delete 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 deleted file mode 100644 index 8d544e9081..0000000000 --- a/src/data/examples/en/04_Control/06_Conditional_Shapes.js +++ /dev/null @@ -1,48 +0,0 @@ -/* - * @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 8a1001e97b1d57e7aff6f74e07723a42cbbcfddf Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 11:23:57 -0400 Subject: [PATCH 6/9] walk over 2d array added --- .../en/03_Arrays/03_Walk_Over_2dArray.js | 85 +++++++++++++++++++ .../examples/en/90_Hello_P5/08_flip_color.js | 60 ------------- 2 files changed, 85 insertions(+), 60 deletions(-) create mode 100644 src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js delete mode 100644 src/data/examples/en/90_Hello_P5/08_flip_color.js diff --git a/src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js b/src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js new file mode 100644 index 0000000000..6c195ef1be --- /dev/null +++ b/src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js @@ -0,0 +1,85 @@ +/* + * @name Walk Over 2dArray + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to display 2D array contents on the canvas +using regular for and for-of loops in multiple different ways.
+ A function is created for the canvas, the 2D + array (Friend Array) is initialized and walked over using nested + loops in different ways. Variables x and y are used to place the + array item on the canvas in the form of 2D array. + The final nested loop is used to initialize 2D + array (Fish Array) with random Integers (fish ages). +*/ + + +//"use strict"; //catch some common coding errors + + +/** + * setup : + */ +function setup() { + createCanvas(400, 600); + //create 2D array, slide 4 + let friendArray = [ + ["Nona", "mac & cheese", "orange", "Eid al-fitr"], + ["Marylin", "ice cream", "blue", "Halloween"], + ["Rashaad", "garbage plates", "turquoise", "Christmas"], + ["Ava", "sushi", "pink", "New Years"] + ]; + friendArray.push(["Xavier", "Louisiana creole", "red", "their birthday"]); + + //walking 2D array, slide 6 + let y = 20; // Start row based on text size of 20 + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + text(friendArray[f][t], x, y); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + y += 28; // place next row + } + + //walking 2D array, variation on slide 6 + //with embedded arithmetic for y + // + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + //y is v-padding + LCV * v-spacing + text(friendArray[f][t], x, 200 + f * 28); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + } + + //walking 2D array, slide 7 + //need to use x and y variables to manage canvas placement + y = 400; + for (let friend of friendArray) { + let x = 10; // Start item in this row + console.log("x and y", x, y); + console.log("friend:", friend); + for (let item of friend) { + console.log("item & x:", item, x); + text(item, x, y); + x += textWidth(item) + 20; //place next item + } + y += 28; // place next row + } + + //slide 9, creating 2D array: schools of fish ages + console.log("\n *** Fish ages in 2D ***"); + const schools = []; + //4 schools of fish + for (let t = 0; t < 4; t++) { + schools[t] = []; //initialize this school + console.log("schools[t]?", t, schools[t]); + + // Add 10 randomized ages to the array + for (let a = 0; a < 10; a++) { + schools[t].push(round(random(1, 5))); + } + } + console.log(schools); + } \ No newline at end of file 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 deleted file mode 100644 index ee835930a3..0000000000 --- a/src/data/examples/en/90_Hello_P5/08_flip_color.js +++ /dev/null @@ -1,60 +0,0 @@ -/* - * @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 fd71b44cb48482369b1f1a5e3cec92860ee88452 Mon Sep 17 00:00:00 2001 From: Suhas CV Date: Tue, 30 Mar 2021 13:06:10 -0400 Subject: [PATCH 7/9] create example5 es --- .../es/03_Arrays/03_Walk_Over_2dArray.js | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/data/examples/es/03_Arrays/03_Walk_Over_2dArray.js diff --git a/src/data/examples/es/03_Arrays/03_Walk_Over_2dArray.js b/src/data/examples/es/03_Arrays/03_Walk_Over_2dArray.js new file mode 100644 index 0000000000..e5577e7383 --- /dev/null +++ b/src/data/examples/es/03_Arrays/03_Walk_Over_2dArray.js @@ -0,0 +1,85 @@ +/* + * @name Walk Over 2dArray + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to display 2D array contents on the canvas +using regular for and for-of loops in multiple different ways.
+ A function is created for the canvas, the 2D + array (Friend Array) is initialized and walked over using nested + loops in different ways. Variables x and y are used to place the + array item on the canvas in the form of 2D array. + The final nested loop is used to initialize 2D + array (Fish Array) with random Integers (fish ages). +*/ + + +//"use strict"; //catch some common coding errors + + +/** + * setup : + */ +function setup() { + createCanvas(400, 600); + //create 2D array, slide 4 + let friendArray = [ + ["Nona", "mac & cheese", "orange", "Eid al-fitr"], + ["Marylin", "ice cream", "blue", "Halloween"], + ["Rashaad", "garbage plates", "turquoise", "Christmas"], + ["Ava", "sushi", "pink", "New Years"] + ]; + friendArray.push(["Xavier", "Louisiana creole", "red", "their birthday"]); + + //walking 2D array, slide 6 + let y = 20; // Start row based on text size of 20 + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + text(friendArray[f][t], x, y); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + y += 28; // place next row + } + + //walking 2D array, variation on slide 6 + //with embedded arithmetic for y + // + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + //y is v-padding + LCV * v-spacing + text(friendArray[f][t], x, 200 + f * 28); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + } + + //walking 2D array, slide 7 + //need to use x and y variables to manage canvas placement + y = 400; + for (let friend of friendArray) { + let x = 10; // Start item in this row + console.log("x and y", x, y); + console.log("friend:", friend); + for (let item of friend) { + console.log("item & x:", item, x); + text(item, x, y); + x += textWidth(item) + 20; //place next item + } + y += 28; // place next row + } + + //slide 9, creating 2D array: schools of fish ages + console.log("\n *** Fish ages in 2D ***"); + const schools = []; + //4 schools of fish + for (let t = 0; t < 4; t++) { + schools[t] = []; //initialize this school + console.log("schools[t]?", t, schools[t]); + + // Add 10 randomized ages to the array + for (let a = 0; a < 10; a++) { + schools[t].push(round(random(1, 5))); + } + } + console.log(schools); + } From d6937b879784969327f3627ff03f1f45055bcaee Mon Sep 17 00:00:00 2001 From: Suhas CV Date: Tue, 30 Mar 2021 13:14:18 -0400 Subject: [PATCH 8/9] create example5 ko --- .../ko/03_Arrays/03_Walk_Over_2dArray.js | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/data/examples/ko/03_Arrays/03_Walk_Over_2dArray.js diff --git a/src/data/examples/ko/03_Arrays/03_Walk_Over_2dArray.js b/src/data/examples/ko/03_Arrays/03_Walk_Over_2dArray.js new file mode 100644 index 0000000000..e5577e7383 --- /dev/null +++ b/src/data/examples/ko/03_Arrays/03_Walk_Over_2dArray.js @@ -0,0 +1,85 @@ +/* + * @name Walk Over 2dArray + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to display 2D array contents on the canvas +using regular for and for-of loops in multiple different ways.
+ A function is created for the canvas, the 2D + array (Friend Array) is initialized and walked over using nested + loops in different ways. Variables x and y are used to place the + array item on the canvas in the form of 2D array. + The final nested loop is used to initialize 2D + array (Fish Array) with random Integers (fish ages). +*/ + + +//"use strict"; //catch some common coding errors + + +/** + * setup : + */ +function setup() { + createCanvas(400, 600); + //create 2D array, slide 4 + let friendArray = [ + ["Nona", "mac & cheese", "orange", "Eid al-fitr"], + ["Marylin", "ice cream", "blue", "Halloween"], + ["Rashaad", "garbage plates", "turquoise", "Christmas"], + ["Ava", "sushi", "pink", "New Years"] + ]; + friendArray.push(["Xavier", "Louisiana creole", "red", "their birthday"]); + + //walking 2D array, slide 6 + let y = 20; // Start row based on text size of 20 + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + text(friendArray[f][t], x, y); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + y += 28; // place next row + } + + //walking 2D array, variation on slide 6 + //with embedded arithmetic for y + // + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + //y is v-padding + LCV * v-spacing + text(friendArray[f][t], x, 200 + f * 28); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + } + + //walking 2D array, slide 7 + //need to use x and y variables to manage canvas placement + y = 400; + for (let friend of friendArray) { + let x = 10; // Start item in this row + console.log("x and y", x, y); + console.log("friend:", friend); + for (let item of friend) { + console.log("item & x:", item, x); + text(item, x, y); + x += textWidth(item) + 20; //place next item + } + y += 28; // place next row + } + + //slide 9, creating 2D array: schools of fish ages + console.log("\n *** Fish ages in 2D ***"); + const schools = []; + //4 schools of fish + for (let t = 0; t < 4; t++) { + schools[t] = []; //initialize this school + console.log("schools[t]?", t, schools[t]); + + // Add 10 randomized ages to the array + for (let a = 0; a < 10; a++) { + schools[t].push(round(random(1, 5))); + } + } + console.log(schools); + } From a94b305deeae617a19e4a0ea84bd552e88a442d2 Mon Sep 17 00:00:00 2001 From: Suhas CV Date: Tue, 30 Mar 2021 13:16:07 -0400 Subject: [PATCH 9/9] create example5 zh-Hans --- .../zh-Hans/03_Arrays/03_Walk_Over_2dArray.js | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/data/examples/zh-Hans/03_Arrays/03_Walk_Over_2dArray.js diff --git a/src/data/examples/zh-Hans/03_Arrays/03_Walk_Over_2dArray.js b/src/data/examples/zh-Hans/03_Arrays/03_Walk_Over_2dArray.js new file mode 100644 index 0000000000..e5577e7383 --- /dev/null +++ b/src/data/examples/zh-Hans/03_Arrays/03_Walk_Over_2dArray.js @@ -0,0 +1,85 @@ +/* + * @name Walk Over 2dArray + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to display 2D array contents on the canvas +using regular for and for-of loops in multiple different ways.
+ A function is created for the canvas, the 2D + array (Friend Array) is initialized and walked over using nested + loops in different ways. Variables x and y are used to place the + array item on the canvas in the form of 2D array. + The final nested loop is used to initialize 2D + array (Fish Array) with random Integers (fish ages). +*/ + + +//"use strict"; //catch some common coding errors + + +/** + * setup : + */ +function setup() { + createCanvas(400, 600); + //create 2D array, slide 4 + let friendArray = [ + ["Nona", "mac & cheese", "orange", "Eid al-fitr"], + ["Marylin", "ice cream", "blue", "Halloween"], + ["Rashaad", "garbage plates", "turquoise", "Christmas"], + ["Ava", "sushi", "pink", "New Years"] + ]; + friendArray.push(["Xavier", "Louisiana creole", "red", "their birthday"]); + + //walking 2D array, slide 6 + let y = 20; // Start row based on text size of 20 + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + text(friendArray[f][t], x, y); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + y += 28; // place next row + } + + //walking 2D array, variation on slide 6 + //with embedded arithmetic for y + // + for (let f = 0; f < friendArray.length; f++) { // outer array + let x = 10; // Start item in this row + for (let t = 0; t < friendArray[f].length; t++) { //inner + //y is v-padding + LCV * v-spacing + text(friendArray[f][t], x, 200 + f * 28); + x += textWidth(friendArray[f][t]) + 20; //place next item + } + } + + //walking 2D array, slide 7 + //need to use x and y variables to manage canvas placement + y = 400; + for (let friend of friendArray) { + let x = 10; // Start item in this row + console.log("x and y", x, y); + console.log("friend:", friend); + for (let item of friend) { + console.log("item & x:", item, x); + text(item, x, y); + x += textWidth(item) + 20; //place next item + } + y += 28; // place next row + } + + //slide 9, creating 2D array: schools of fish ages + console.log("\n *** Fish ages in 2D ***"); + const schools = []; + //4 schools of fish + for (let t = 0; t < 4; t++) { + schools[t] = []; //initialize this school + console.log("schools[t]?", t, schools[t]); + + // Add 10 randomized ages to the array + for (let a = 0; a < 10; a++) { + schools[t].push(round(random(1, 5))); + } + } + console.log(schools); + }