Unit 1: Day 6
Tasks
6.1 Finish History of Tech Assignment
6.2 Intro to Using Images
- Watch the video Image File Formats [6:44] - but stop it at about 4:40 when it gets to talking about RAW
- Four types of images work best ( .gif, .jpg, .tga, .png)
- Keep an eye out for JFIF images. They may not work naturally can be saved as .jpg
6.3 Intro to Using Images and Fonts
- Walk them through the steps which are summarized in the comments of Ex5_FontsImages.
- Check out our CodeTrain Programming Bootcamp for Teachers for our tutorial if you need help.
Unit 1 - Example 5
This example requires fonts and images to be uploaded separately.
1. save image (.png or .gif or .jpg)
- short name, no spaces
2. upload into P5
3. Write 3 lines of code
a) set up variables to hold images
b) load the images into the variables
c) draw to screen using image
*/
let cakePic, conPic, presPic;
let confetti = 200;
let font1, font2;
function preload(){
cakePic = loadImage("cake.png");
conPic = loadImage("confetti.png");
presPic = loadImage("present.png");
font1 = loadFont("PermanentMarker-Regular.ttf");
font2 = loadFont("BigShoulders.ttf");
}//end preload
function setup() {
let sketch = createCanvas(400, 400);
sketch.parent("mycanvas");
textSize(16)
}//end setup
function draw() {
background(0);
image(conPic,0,0, 400, confetti);
confetti++;
image(cakePic, 100, 150, 100,100);
image(presPic, 200, 150, 100,100);
fill(255);
textSize(50);
textFont(font1);
text("Happy Birthday!", 15, 280 );
textSize(30);
textFont(font2);
text("Enjoy your day!", 15, 330);
}//end draw
6.4 Images Example 2
- Requires two specific images to make the effect work.
- Uses a boolean (true/false) variable for the first time
- The variable is changed in both keyPressed and MousePressed function in two different ways. If this is their first introduction to using an IF statement to control the keyPressed function, then you might want to skip the mousePressed function which looks a big complicated the first time students see this kind of use of a Boolean variable.
Unit 1 - Example 6 - Bulb On/Off
This example requires fonts and images to be uploaded separately.
let bulb_on;
let bulb_off;
let isOn = false; //boolean
function preload() {
bulb_on = loadImage("bulbon-1.png");
bulb_off = loadImage("bulboff-1.png");
}
function setup() {
let sketch = createCanvas(200, 300);
sketch.parent("mycanvas");
}
function draw() {
if (isOn) {
background(255);
image(bulb_on,0,0, width, height);
} else {
background(75);
image(bulb_off,0,0, width, height);
}
//print("test");
} //end draw
function keyPressed() {
if (key === 'l') {
isOn = true;
}
if (key === 'd') {
isOn = false;
}
}//end key
function mousePressed(){
if(isOn){
isOn=false;
} else {
isOn=true;
}
}//end mouse
Continue to Unit 1: Day 7 »
