Adding Images

Image as a Background

Transcript


Do this

Write the program in the video (below).

Add your own image to Processing like in the video.

You can take the image yourself and then send it to your computer by email, for example. You can also download the image from the internet. 

You can use resize-command to change the size of the image to fit your canvas. We will have more on that in the next video!


If you want to add an image to you Processing-program, where the image must be?

Educator notes


Scaling the Image

Transcript


Do this

Copy the code in the video (below).

Scale your image to a convenient size.

EXTRA:

If you are used to photo editing with other softwares, you can resize the image before adding it to Processing.

PImage myImage;

void setup(){
  size(600, 600);
  myImage = loadImage("my_image.JPG");
  int newImageWidth = int(0.2 * myImage.width);
  int newImageHeight = int(0.2 * myImage.height);
  myImage.resize(newImageWidth, newImageHeight);
}

void draw(){
  image(myImage, 0, 0);
}

int newForestWidth = 0.5 * forest.width;
What is wrong with the expression above?

Educator notes


The Right Size

Transcript


Do this
Follow the instructions in the video and make the canvas and your image the same size.

An Arrow or a Creature?

Transcript


Do this

Add a creature-image to your sketch. Example code from the video is below.

You can download the creature-image from the web or draw it with your computer. The image in the video has been downloaded from Creature Party -website. It was made by artist Kati Hyyppä under the "Be Nice License" (BNL 1.0)

Develop the code so that creature follows your mouse. Use the noCursor-command in the setup to not display your normal cursor on the canvas.


PImage myImage;
PImage creature;

void setup(){
  size(489, 652);
  myImage = loadImage("my_image.JPG");
  creature = loadImage("creature.PNG");
  int newImageWidth = int(0.2 * myImage.width);
  int newImageHeight = int(0.2 * myImage.height);
  int newCreatureWidth = int(0.1 * creature.width);
  int newCreatureHeight = int(0.1 * creature.height);
  creature.resize(newCreatureWidth, newCreatureHeight);
  myImage.resize(newImageWidth, newImageHeight);
  // Use the noCursor-command to not display your normal cursor on the canvas.
}

void draw(){
  image(myImage, 0, 0);
  // Make the creature follow your mouse
  image(creature, 0, 0);
}

What is the benefit of using PNG-images instead of JPG-images?

Educator notes