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/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); + } 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); + } 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); + }