From 5d42a25f17dfe04c64805dc7f4076b1e0634f420 Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 09:15:25 -0400 Subject: [PATCH 01/11] 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 02/11] 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 03/11] 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 04/11] 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 05/11] 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 06/11] 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 1182ade7f1bf9f03d1dfa0ec139b983706dcd57d Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 11:35:24 -0400 Subject: [PATCH 07/11] added trig wheels and pie chart --- .../01_Form/08_Trig_Wheels_and_Pie_Chart.js | 88 +++++++++++++++++++ .../en/03_Arrays/03_Walk_Over_2dArray.js | 85 ------------------ 2 files changed, 88 insertions(+), 85 deletions(-) create mode 100644 src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js delete mode 100644 src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js diff --git a/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js b/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js new file mode 100644 index 0000000000..032f79232c --- /dev/null +++ b/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js @@ -0,0 +1,88 @@ +/* + * @name Trig Wheels and Pie Chart + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to create +a trig color wheel and a visualization of a population age data as a +pie chart.
+ Functions are +created for the canvas setup, trig color wheel, drawslice, and pie +chart. The size of the slices are determined as well as their color +range. The pie chart is separated by definitive color per value +whereas the trig color wheel has a fixed slice amount with a range +color fill. +*/ + +function setup() { + createCanvas(400, 400); + colorMode(HSB); + angleMode(DEGREES); + + //vars for color wheel center point + let x = width / 2; + let y = height / 2 + 100; + colorWheel(x, y, 100); //slide 11 + + noStroke(); + pieChartPop(200, 100); //slide 12 +} + +//**** slide 12 pie chart trig demo +function pieChartPop(x, y) { + let [total, child, young, adult, senior, elder] = [577, 103, 69, + 122, 170, 113 + ]; + let startValue = 0; + let range = 0; + + //child slice + range = child / total; + drawSlice("blue", x, y, 200, startValue, startValue + range); + startValue += range; + //young slice + range = young / total; + drawSlice("orange", x, y, 200, startValue, startValue + range); + startValue += range; + //adult slice + range = adult / total; + drawSlice("green", x, y, 200, startValue, startValue + range); + startValue += range; + //senior slice + range = senior / total; + drawSlice("tan", x, y, 200, startValue, startValue + range); + startValue += range; + //elder slice + range = elder / total; + drawSlice("pink", x, y, 200, startValue, startValue + range); + startValue += range; + +} + +/** + * drawSlice - draw colored arc based on angle percentages. slide 13 + * Adjust angles so that 0% starts at top (actually -90). + * @param {color} fColor - fill color + * @param {number} x - center x + * @param {number} y - center y + * @param {number} d - diameter + * @param {float} percent1 - starting percentage + * @param {float} percent2 - ending percentage + */ +function drawSlice(fColor, x, y, d, percent1, percent2) { + fill(fColor); + arc(x, y, d, d, -90 + percent1 * 360, -90 + percent2 * 360); +} + +//**** slide 11 trig demo +function colorWheel(x, y, rad) { + strokeWeight(10); + strokeCap(SQUARE); + + //Iterate 360 degrees of lines, +10deg per turn + for (let a = 0; a < 360; a += 10) { + stroke(a, 150, 200); //hue based on a + //radius is 100, angle is a degrees + line(x, y, x + rad * cos(a), + y + rad * sin(a)); + } +} \ No newline at end of file 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 deleted file mode 100644 index 6c195ef1be..0000000000 --- a/src/data/examples/en/03_Arrays/03_Walk_Over_2dArray.js +++ /dev/null @@ -1,85 +0,0 @@ -/* - * @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 From b2f5323fc4ba91d0687e9103b32e3d5e818eee47 Mon Sep 17 00:00:00 2001 From: suhascv Date: Wed, 24 Mar 2021 14:21:19 -0400 Subject: [PATCH 08/11] added car class example --- .../01_Form/08_Trig_Wheels_and_Pie_Chart.js | 88 ------------------- .../en/15_Instance_Mode/03_Car_Instances.js | 82 +++++++++++++++++ 2 files changed, 82 insertions(+), 88 deletions(-) delete mode 100644 src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js create mode 100644 src/data/examples/en/15_Instance_Mode/03_Car_Instances.js diff --git a/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js b/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js deleted file mode 100644 index 032f79232c..0000000000 --- a/src/data/examples/en/01_Form/08_Trig_Wheels_and_Pie_Chart.js +++ /dev/null @@ -1,88 +0,0 @@ -/* - * @name Trig Wheels and Pie Chart - * @frame 400,400 - * @description contributed by - Prof WM Harris, How to create -a trig color wheel and a visualization of a population age data as a -pie chart.
- Functions are -created for the canvas setup, trig color wheel, drawslice, and pie -chart. The size of the slices are determined as well as their color -range. The pie chart is separated by definitive color per value -whereas the trig color wheel has a fixed slice amount with a range -color fill. -*/ - -function setup() { - createCanvas(400, 400); - colorMode(HSB); - angleMode(DEGREES); - - //vars for color wheel center point - let x = width / 2; - let y = height / 2 + 100; - colorWheel(x, y, 100); //slide 11 - - noStroke(); - pieChartPop(200, 100); //slide 12 -} - -//**** slide 12 pie chart trig demo -function pieChartPop(x, y) { - let [total, child, young, adult, senior, elder] = [577, 103, 69, - 122, 170, 113 - ]; - let startValue = 0; - let range = 0; - - //child slice - range = child / total; - drawSlice("blue", x, y, 200, startValue, startValue + range); - startValue += range; - //young slice - range = young / total; - drawSlice("orange", x, y, 200, startValue, startValue + range); - startValue += range; - //adult slice - range = adult / total; - drawSlice("green", x, y, 200, startValue, startValue + range); - startValue += range; - //senior slice - range = senior / total; - drawSlice("tan", x, y, 200, startValue, startValue + range); - startValue += range; - //elder slice - range = elder / total; - drawSlice("pink", x, y, 200, startValue, startValue + range); - startValue += range; - -} - -/** - * drawSlice - draw colored arc based on angle percentages. slide 13 - * Adjust angles so that 0% starts at top (actually -90). - * @param {color} fColor - fill color - * @param {number} x - center x - * @param {number} y - center y - * @param {number} d - diameter - * @param {float} percent1 - starting percentage - * @param {float} percent2 - ending percentage - */ -function drawSlice(fColor, x, y, d, percent1, percent2) { - fill(fColor); - arc(x, y, d, d, -90 + percent1 * 360, -90 + percent2 * 360); -} - -//**** slide 11 trig demo -function colorWheel(x, y, rad) { - strokeWeight(10); - strokeCap(SQUARE); - - //Iterate 360 degrees of lines, +10deg per turn - for (let a = 0; a < 360; a += 10) { - stroke(a, 150, 200); //hue based on a - //radius is 100, angle is a degrees - line(x, y, x + rad * cos(a), - y + rad * sin(a)); - } -} \ No newline at end of file diff --git a/src/data/examples/en/15_Instance_Mode/03_Car_Instances.js b/src/data/examples/en/15_Instance_Mode/03_Car_Instances.js new file mode 100644 index 0000000000..8aa249e98e --- /dev/null +++ b/src/data/examples/en/15_Instance_Mode/03_Car_Instances.js @@ -0,0 +1,82 @@ +/* + * @name Car Instances + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to create three instances of Car Class and +invoke class methods.
+ A function is created for the canvas setup, and +3 car instances are initialized with different colors and canvas +positions. The speed of each car is set by passing value to the +instance’s start method. A second function calls class methods to +display and move the cars. +*/ +class Car { + /* Constructor expects parameters for + fill color, x and y coordinates that + will be used to initialize class properties. + */ + constructor(cColor, x, y) { + this.color = cColor; + this.doors = 4; + this.isConvertible = false; + this.x = x; + this.y = y; + this.speed = 0; + } + + start(speed) { // method expects parameter! + this.speed = speed; + } + + display() { // method! + fill(this.color); + rect(this.x, this.y, 20, 10); + } + + move() { // method! + this.x += this.speed; + // Wrap x around boundaries + if (this.x < -20) { + this.x = width; + } else if (this.x > width) { + this.x = -20; + } + } +} //end class Car + +let rav4; +let charger; +let nova; + +function setup() { + createCanvas(200, 400); + /* Construct the 3 Cars */ + //constructor expects cColor, x, y + rav4 = new Car("silver", 100, 300); + charger = new Car("gold", 0, 200); + nova = new Car("blue", 200, 100); + nova.doors = 2; //update nova's doors property + + console.log("rav4", rav4); + console.log("charger", charger); + console.log("nova", nova); + + //call start methods of Car instances + //the start method expects a number for speed + rav4.start(2.3); + charger.start(-4); + nova.start(random(-1, 1)); +} + +function draw() { + background("beige"); + + //display and move all 3 Cars + rav4.display(); + charger.display(); + nova.display(); + + rav4.move(); + charger.move(); + nova.move(); +} \ No newline at end of file From 338f9e463fd02702663dedda8d4f2a87304308d0 Mon Sep 17 00:00:00 2001 From: Suhas CV Date: Tue, 30 Mar 2021 13:22:56 -0400 Subject: [PATCH 09/11] example7 es --- .../es/15_Instance_Mode/03_Car_Instances.js | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 src/data/examples/es/15_Instance_Mode/03_Car_Instances.js diff --git a/src/data/examples/es/15_Instance_Mode/03_Car_Instances.js b/src/data/examples/es/15_Instance_Mode/03_Car_Instances.js new file mode 100644 index 0000000000..1966f9c8e3 --- /dev/null +++ b/src/data/examples/es/15_Instance_Mode/03_Car_Instances.js @@ -0,0 +1,82 @@ +/* + * @name Car Instances + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to create three instances of Car Class and +invoke class methods.
+ A function is created for the canvas setup, and +3 car instances are initialized with different colors and canvas +positions. The speed of each car is set by passing value to the +instance’s start method. A second function calls class methods to +display and move the cars. +*/ +class Car { + /* Constructor expects parameters for + fill color, x and y coordinates that + will be used to initialize class properties. + */ + constructor(cColor, x, y) { + this.color = cColor; + this.doors = 4; + this.isConvertible = false; + this.x = x; + this.y = y; + this.speed = 0; + } + + start(speed) { // method expects parameter! + this.speed = speed; + } + + display() { // method! + fill(this.color); + rect(this.x, this.y, 20, 10); + } + + move() { // method! + this.x += this.speed; + // Wrap x around boundaries + if (this.x < -20) { + this.x = width; + } else if (this.x > width) { + this.x = -20; + } + } +} //end class Car + +let rav4; +let charger; +let nova; + +function setup() { + createCanvas(200, 400); + /* Construct the 3 Cars */ + //constructor expects cColor, x, y + rav4 = new Car("silver", 100, 300); + charger = new Car("gold", 0, 200); + nova = new Car("blue", 200, 100); + nova.doors = 2; //update nova's doors property + + console.log("rav4", rav4); + console.log("charger", charger); + console.log("nova", nova); + + //call start methods of Car instances + //the start method expects a number for speed + rav4.start(2.3); + charger.start(-4); + nova.start(random(-1, 1)); +} + +function draw() { + background("beige"); + + //display and move all 3 Cars + rav4.display(); + charger.display(); + nova.display(); + + rav4.move(); + charger.move(); + nova.move(); +} From c0545672cbfa7125ad52b0aa686e172dae547af9 Mon Sep 17 00:00:00 2001 From: Suhas CV Date: Tue, 30 Mar 2021 13:23:35 -0400 Subject: [PATCH 10/11] example7 ko --- .../ko/15_Instance_Mode/03_Car_Instances.js | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 src/data/examples/ko/15_Instance_Mode/03_Car_Instances.js diff --git a/src/data/examples/ko/15_Instance_Mode/03_Car_Instances.js b/src/data/examples/ko/15_Instance_Mode/03_Car_Instances.js new file mode 100644 index 0000000000..1966f9c8e3 --- /dev/null +++ b/src/data/examples/ko/15_Instance_Mode/03_Car_Instances.js @@ -0,0 +1,82 @@ +/* + * @name Car Instances + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to create three instances of Car Class and +invoke class methods.
+ A function is created for the canvas setup, and +3 car instances are initialized with different colors and canvas +positions. The speed of each car is set by passing value to the +instance’s start method. A second function calls class methods to +display and move the cars. +*/ +class Car { + /* Constructor expects parameters for + fill color, x and y coordinates that + will be used to initialize class properties. + */ + constructor(cColor, x, y) { + this.color = cColor; + this.doors = 4; + this.isConvertible = false; + this.x = x; + this.y = y; + this.speed = 0; + } + + start(speed) { // method expects parameter! + this.speed = speed; + } + + display() { // method! + fill(this.color); + rect(this.x, this.y, 20, 10); + } + + move() { // method! + this.x += this.speed; + // Wrap x around boundaries + if (this.x < -20) { + this.x = width; + } else if (this.x > width) { + this.x = -20; + } + } +} //end class Car + +let rav4; +let charger; +let nova; + +function setup() { + createCanvas(200, 400); + /* Construct the 3 Cars */ + //constructor expects cColor, x, y + rav4 = new Car("silver", 100, 300); + charger = new Car("gold", 0, 200); + nova = new Car("blue", 200, 100); + nova.doors = 2; //update nova's doors property + + console.log("rav4", rav4); + console.log("charger", charger); + console.log("nova", nova); + + //call start methods of Car instances + //the start method expects a number for speed + rav4.start(2.3); + charger.start(-4); + nova.start(random(-1, 1)); +} + +function draw() { + background("beige"); + + //display and move all 3 Cars + rav4.display(); + charger.display(); + nova.display(); + + rav4.move(); + charger.move(); + nova.move(); +} From c04d9d3508658b1c7db3805497fcd7c618cf0284 Mon Sep 17 00:00:00 2001 From: Suhas CV Date: Tue, 30 Mar 2021 13:24:10 -0400 Subject: [PATCH 11/11] example7 zh-hans --- .../15_Instance_Mode/03_Car_Instances.js | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 src/data/examples/zh-Hans/15_Instance_Mode/03_Car_Instances.js diff --git a/src/data/examples/zh-Hans/15_Instance_Mode/03_Car_Instances.js b/src/data/examples/zh-Hans/15_Instance_Mode/03_Car_Instances.js new file mode 100644 index 0000000000..1966f9c8e3 --- /dev/null +++ b/src/data/examples/zh-Hans/15_Instance_Mode/03_Car_Instances.js @@ -0,0 +1,82 @@ +/* + * @name Car Instances + * @frame 400,400 + * @description contributed by + Prof WM Harris, How to create three instances of Car Class and +invoke class methods.
+ A function is created for the canvas setup, and +3 car instances are initialized with different colors and canvas +positions. The speed of each car is set by passing value to the +instance’s start method. A second function calls class methods to +display and move the cars. +*/ +class Car { + /* Constructor expects parameters for + fill color, x and y coordinates that + will be used to initialize class properties. + */ + constructor(cColor, x, y) { + this.color = cColor; + this.doors = 4; + this.isConvertible = false; + this.x = x; + this.y = y; + this.speed = 0; + } + + start(speed) { // method expects parameter! + this.speed = speed; + } + + display() { // method! + fill(this.color); + rect(this.x, this.y, 20, 10); + } + + move() { // method! + this.x += this.speed; + // Wrap x around boundaries + if (this.x < -20) { + this.x = width; + } else if (this.x > width) { + this.x = -20; + } + } +} //end class Car + +let rav4; +let charger; +let nova; + +function setup() { + createCanvas(200, 400); + /* Construct the 3 Cars */ + //constructor expects cColor, x, y + rav4 = new Car("silver", 100, 300); + charger = new Car("gold", 0, 200); + nova = new Car("blue", 200, 100); + nova.doors = 2; //update nova's doors property + + console.log("rav4", rav4); + console.log("charger", charger); + console.log("nova", nova); + + //call start methods of Car instances + //the start method expects a number for speed + rav4.start(2.3); + charger.start(-4); + nova.start(random(-1, 1)); +} + +function draw() { + background("beige"); + + //display and move all 3 Cars + rav4.display(); + charger.display(); + nova.display(); + + rav4.move(); + charger.move(); + nova.move(); +}