Adding images

Processing/P5.JS will let you create multimedia projects that can include images.

Steps

1) Save image to desktop (if on old computer press COMPRESS)

2) Click sketch ---> AddFile

3) Create a PImage variable to store the image PImage img;

4) In setup load image using loadImage img = loadImage("meme.jpg"); //jpeg or gif needs to match exactly!!

5) In draw call image using image(img, 0,0); // or image(img, 0, 0, mouseX, mouseY);

-------------------------------

SVG Steps

1) Add SVG to sketch

2) Before setup create PShape variable PShape = network;

3) In setup load vector file network = loadShape("coolvectorimage.svg");

4) In draw call shape and position shape(network, x,y); or shape(network,x,y,width,height);

When the mouseX and mouseY values are used as part of the fourth and fifth parameters of image(), the image size changes as the mouse moves.

image(img, 0, 0, mouseX * 2, mouseY * 2);

PImage img;

void setup() {

size(480,120);

img = loadImage("clouds.gif");

}

void draw() {

background(255);

image(img,0,0);

image(img, 0 , mouseY *-1);

}

Report abuse