Unit 5: Day 3
Tasks
54.1 Arrays Example 3 - Superheroes (Leading to Assignment 1)
- See code below
- Create a names array and an images array based on the pre-saved superhero images
- Start by printing a random image in setup
- Then get it to change every time you click the mouse
- Then add code to get it to print the 5 images down the screen
54.2 Arrays example 4 - (Bar Charts) - Covid Vaccinations
- See code below
- This example was created in the spring of 2021 early in the vaccination campaign. You will likely want to find a more up to date example as it uses real life data.
- This is a complicated example but I think it proved valuable to use real data and have the students see my thought process as I worked out the numbers.
- We will use the 5 largest provinces, divided by 1000.
- Set up the 3 parallel arrays for province names, populations and their current numbers
- Review and print the Total and Average algorithms.
- For simplicity, we draw the bars from top down with some space at the top for labels.
- Review the following AP Concepts
- AAP-1.C.1: A list is an ordered sequence of elements. For example, [value1, value2, value3, …] describes a list where value1 is the first element, value 2 is the second element, value 3 is the third element, and so on.
- AAP-1.C.2: An element is an individual value in a list that is assigned a unique index.
- AAP-1.C.3: An index is a common method for referencing the elements in a list or string using natural numbers.
- AAP-1.C.4: A string is an ordered sequence of characters.
Ex3 Heroes
Requires images for the 5 superheroes
let allheroes = ["Thor","Ironman", "Superman","Umbrella Academy", "Wonder Woman"];
Let ishuman =[false,true,false,true,true]
let allPics = [];
let randPic;
let picx = 50;
function preload(){
allPics.push( loadImage("images/heroes/thor.jpg") );
allPics.push( loadImage("images/heroes/ironman.png") );
allPics.push( loadImage("images/heroes/mario.png") );
allPics.push( loadImage("images/heroes/umbrella.jpg") );
allPics.push( loadImage("images/heroes/wonderwoman.jpg") );
}
function setup() {
let sketch = createCanvas(800, 800);
sketch.parent("myP5canvas");
randPic = floor( random( allheroes.length ) );
print(randPic);
}//end setup
function draw() {
background(200, 50, 50);
textSize(30);
fill(255);
text("Your hero for hire is: " + allheroes[randPic] , 50,50);
image(allPics[randPic], picx, 150, 100, 100);
picx++;
if(picx>800){
picx=0;
}
//draw human heroes to the screen
for(let i=0; i
if(ishuman[i]){
image(allPics[i], 700, i*125+100, 75, 75 );
}
}
}//end draw
Ex4 Vaccines
let allnames = ["BC", "AB", "MB", "ON", "QB"];
let allpops = [5100000, 4500000, 1400000, 14700000, 8600000 ];
let allvacs = [155600, 124300, 49300, 412100, 266600];
function setup() {
let sketch = createCanvas(800, 800);
sketch.parent("myP5canvas");
print( ( allvacs[3]/allpops[3] *100 ).toFixed(2) );
}//end setup
function draw() {
background(200, 250, 50);
strokeWeight(3);
line(50,100, 700, 100);
line(50,100, 50, 600);
textSize(30);
fill(0);
text("Vacinations as of Feb. 10, 2021", 50, 50);
textSize(12);
for(let i=0; i
text(allnames[i], i*100+100, 90);
}
for(let i=0; i
let temp = ( allvacs[i]/allpops[i] *100 ).toFixed(2);
//print(temp);
fill(255, 50,50);
rect(i*100+80, 100, 50, temp*100 );
}
text("Press the letter b to update BC vacinnes", 50, 750);
}//end draw
function keyPressed(){
if( key==='b' ){
allvacs[0] += 1000;
}
}//end keyPressed
Continue to Unit 5: Day 4 »