• 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();

}



< Return to Coding Page

1 view0 comments