Rob George- Rob George
Week 10: Masks + Minim + Animating Image
In Class Task 1: Animating Image
//Task 1 Week 10 Animating Image
PImage img;
float x, x2, a, a2, a3;
void setup() {
size(800, 800);
x = width;
x2 = -400; //x needs to start off-screen. Half of width is 400. -400 is off-screen (left side).
img=loadImage("paris.jpg");
rectMode(CENTER);
frameRate(600);
}
void draw() {
background(0);
tint(255, a);
a=map(width-x, 0, width, 0, 255); //fading the white tint from right to left
image(img, x, 0);
x=x-1; //animates the image
if (x<0) { //moves the image and tint from right to left
x=0; //Stops the image at the left edge of the screen
}
noStroke();
fill(252, 161, 23, a2);
a2=map(width-x, 0, width, 0, 195); //fading the tint
rect(x2, 510, 800, 50);
x2=x2+1; //animates rectangle
if (x2>width/2) { //moves rectangle and tint from left to right
x2=width/2; //stops at right edge of screen
}
fill(255, a3);
a3=map(width-x, 0, width, 0, 255); //fading tint
textSize(30);
text("WELCOME TO PARIS", 255, 520);
}
In Class Lesson 1: Masks
The first lesson for this week was to learn how to use masks. We used our Paris image from earlier and create a single red mask and multiple red masks over the image of the Eiffel Tower.
//mask 1
PImage img;
PGraphics mask; //create an alpha mask' //buffer
void setup() {
size (800, 800);
img=loadImage("paris.jpg");
//mask
mask=createGraphics(img.width, img.height); // must be same size of image
mask.beginDraw();
mask.background(0);
mask.noStroke();
mask.fill(255);
mask.rect(200, 200, 400, 300);
mask.endDraw();
//apply mask to the img
img.mask(mask);
}
void draw(){
background(255, 0, 0);
image(img, 0, 0);
}
//multimask 2
PImage img;
PGraphics mask; //create an alpha mask' //buffer
void setup() {
size (800, 800);
img=loadImage("paris.jpg");
//mask
mask=createGraphics(img.width, img.height); // must be same size of image
mask.beginDraw();
mask.background(0);
mask.noStroke();
for (int i=0; i<50; i++){
//mask.fill(255); //the mask is opaque
mask.fill(255, 100); //mask is transparent
mask.rect(random(mask.width), random(mask.height), random(100, 200), random(100, 200));
}
mask.endDraw();
//apply mask to the img
img.mask(mask);
}
void draw(){
background(255, 0, 0);
image(img, 0, 0);
}
In Class Lesson 2: MINIM
I also learned how to use the Processing sound library "Minim." A task we did was to create a bouncing ball on a screen but every time it bounced it would make a water drop sound.
import ddf.minim.*;
//minim water
Minim minim;
AudioSample water;
float x=130;
float y=100;
float xSpeed=5;
float ySpeed=5;
float diam=50;
void setup() {
size(1000, 600);
minim=new Minim(this);
water=minim.loadSample("water.wav", 2048); //("sound file", buffer size)
//buffer size is 2048
}
void draw() {
background(255);
fill(255, 0, 0);
noStroke();
ellipse(x, y, diam, diam);
x=x+xSpeed;
y=y+ySpeed;
if (x>width) {
x=width;
xSpeed=-xSpeed;
water.trigger();
}
if (x<0) {
x=0;
xSpeed=-xSpeed;
water.trigger();
}
if (y>height) {
y=height;
ySpeed=-ySpeed;
water.trigger();
}
if (y<0) {
y=0;
ySpeed=-ySpeed;
water.trigger();
}
}
void stop(){
water.close();
water.stop();
super.stop();
}