## Assignment 4

hi … so for step 1, I borrowed the ellipse pastiche from Assignment 2, and then coloured it with one of my favourite  new finds, titled Fogs.

…and then I took the background ellipses, and coloured it with video…

video colouring

the final work was produced in two stages

1) I tinted the video, using mouseX and mouseY variables  for RGB.

2) I replaced mouseX  R  variable with motion tracking — so any motion produced a spike in R [ALERT!, ALERT!]

…it chugs like an old steam engine train, but I like it!

computer vision (motion tracking/tint)

Hi, there

I uploaded my assignment 4 to Google docs. I am not sure if it works, please try and write me some feedback!

Thanks everyone!

## sensor color stroke

In this assignment, I was try to use sensor color and ellipse stroke to fill up the picture.

While mouse press the color and position is random.

I was combine some function from example 16.9 and 16.11

here is the code

```
import processing.video.*;

float x;
float y;

Capture video;
color trackColor;

void setup() {
size(600,600);
smooth();
background(255);
frameRate(100);

x = width;
y = height;

video = new Capture(this,width,height,15);
}

void draw() {

float worldRecord = 500;

// XY coordinate of closest color
int closestX = 0;
int closestY = 0;

// Begin loop to walk through every pixel
for (int x = 0; x < video.width; x ++ ) {
for (int y = 0; y < video.height; y ++ ) {
int loc = x + y*video.width;
// What is current color
color currentColor = video.pixels[loc];
float r1 = red(currentColor);
float g1 = green(currentColor);
float b1 = blue(currentColor);
float r2 = red(trackColor);
float g2 = green(trackColor);
float b2 = blue(trackColor);

// Using euclidean distance to compare colors
float d = dist(r1,g1,b1,r2,g2,b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

// If current color is more similar to tracked color than
// closest color, save current location and current difference
if (d < worldRecord) {
worldRecord = d;
closestX = x;
closestY = y;
}
}
}

if (worldRecord < 10) {

fill(trackColor);
ellipse(closestX,closestY,100,100);
}
}

void mousePressed() {
// Save color where the mouse is clicked in trackColor variable
int loc = mouseX + mouseY*video.width;
trackColor = video.pixels[loc];
// Read image from the camera
if (video.available()) {
}

// Pick a new x and y
float newx = constrain(x + random(-20,20),0,width/2-1);
float newy = constrain(y + random(-20,20),0,height/2-1);

// Find the midpoint of the line
int midx = int((newx + x) / 2);
int midy = int((newy + y) / 2);

// Pick the color from the video, reversing x
color c = video.pixels[(width/2-1-midx) + midy*video.width/2];

// Draw a line from x,y to the newx,newy
stroke(c);
strokeWeight(1);
fill(c);
ellipse(x,y,100,100);

// Save newx, newy in x,y
x = newx;
y = newy;

}```

## Assignment 4: Video tracking

I’ve worked with video tracking before and understand the examples in chapter 16, so I just wanted to go back and play with image buffering. The program i wrote uses a camera to capture PImage into frames (up to 25 frames in an array).

Im just cycling through the images in the image buffer, and playing with the opacity layering of the images.

See screenshot below:

and here is the code since it does not work in a web browser:

## Assignment 4 star with the application of camera and image

Hi everyone!

I use image loading function, and video capture. So all the assignment could not be seen online. I am just find a place to up load my assignment for you so, you could download and check it out.

here I just introduce some of my progress.

I capture the video and relocated it with the mouse location conditions. So if some one is in front of the camera, he/she will always in the middle of every small video. And the the code below helps achieve relocation.

```if(mouseX<=width/3){

image(video,-200,0);
fill(32,105,211,150);
rect(0,0,width/3,height);
fill(157,223,0);
rect(width/3,0,width/3,height);
fill(239,99,77);
rect(width*2/3,0,width/3,height);
image(img4,200,0);
image(img3,400,0);

}

else if(mouseX< 2*width/3){
image(video,0,0);
fill(111,159,247);
rect(0,0,width/3,height);
fill(0,170,24,170);
rect(width/3,0,width/3,height);
fill(239,99,77);
rect(width*2/3,0,width/3,height);
image(img1,0,0);
image(img2,400,0);
}

else{
image(video,200,0);
fill(111,159,247);
rect(0,0,width/3,height);
fill(157,223,0);
rect(width/3,0,width/3,height);
fill(232,70,124,150);
rect(width*2/3,0,width/3,height);
image(img6,0,0);

image(img5,200,0);```

`As the image is loaded from outside of the program, I think the program drawing is necessary.`
`If the image has not been loaded yet,the users will see color instead of empty white.`

`The first effect is linked below:`

`After that, I feel the color parts are empty. So I just wanna try the image loading funciton.`
`I took some of my photos with the example 16_5 program.`

And I edited them in photoshop and then load them in the correct place of the assignment.

```   img1 = loadImage("1.jpg");
`I think I should use loop to load the image, but as there are not so much of images. This stupid way works too.`
`And the pictures below is what I assignment finally looks like.`
`     `

`here is the whole code:`

```//Shuting Chang, 5nd Oct. 2011, Assignment 4
//http://www.openprocessing.org/visuals/checkVisual.php?visualID=40253

import processing.video.*;

PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;

int videoScale = 8;
// Number of columns and rows in our system
int cols, rows;
// Variable for capture device
Capture video;

void drawStar(int xp,int yp)
{
float starSize = 2.8;
int position = 100;
float circleSize = random(10,20) ;

beginShape();

vertex(mouseX+xp/starSize,mouseY-position);                             //1
vertex(mouseX+(24+xp)/starSize,mouseY+70/starSize-position+yp);     //2
vertex(mouseX+(94+xp)/starSize,mouseY+70/starSize-position+yp);     //3
vertex(mouseX+(40+xp)/starSize,mouseY+115/starSize-position+yp);    //4
vertex(mouseX+(64+xp)/starSize,mouseY+187/starSize-position+yp);    //5
vertex(mouseX+xp/starSize,mouseY+142/starSize-position+yp);                //6
vertex(mouseX-(64-xp)/starSize,mouseY+187/starSize-position+yp);    //7
vertex(mouseX-(40-xp)/starSize,mouseY+115/starSize-position+yp);    //8
vertex(mouseX-(94-xp)/starSize,mouseY+70/starSize-position+yp);     //9
vertex(mouseX-(24-xp)/starSize,mouseY+70/starSize-position+yp);     //10

endShape(CLOSE);

//star

fill(255,random(100,255),random(15,255));
noStroke();
ellipse(mouseX,mouseY-position+36,circleSize,circleSize);
fill(234,135,68);
ellipse(mouseX,mouseY-position+36,6,6);

//core of star

}

//define the drawStar fuction

Ball[] balls = new Ball[1]; // We start with an array with just one element.
float gravity = 0.3;

void setup() {

size(600,400);

cols = width/videoScale;
rows = height/videoScale;

smooth();
video = new Capture(this,600,400,75);

frameRate(75);
// Initialize ball index 0
balls[0] = new Ball(50,0,16);
}

void draw() {

if (video.available()) {
}

noStroke();

if(mouseX<=width/3){

image(video,-200,0);
fill(32,105,211,150);
rect(0,0,width/3,height);
fill(157,223,0);
rect(width/3,0,width/3,height);
fill(239,99,77);
rect(width*2/3,0,width/3,height);
image(img4,200,0);
image(img3,400,0);

}

else if(mouseX< 2*width/3){
image(video,0,0);
fill(111,159,247);
rect(0,0,width/3,height);
fill(0,170,24,170);
rect(width/3,0,width/3,height);
fill(239,99,77);
rect(width*2/3,0,width/3,height);
image(img1,0,0);
image(img2,400,0);
}

else{
image(video,200,0);
fill(111,159,247);
rect(0,0,width/3,height);
fill(157,223,0);
rect(width/3,0,width/3,height);
fill(232,70,124,150);
rect(width*2/3,0,width/3,height);
image(img6,0,0);

image(img5,200,0);

}

fill(0,0,0,45);
rect(mouseX+3,mouseY-73,4,100);

fill(200);
rect(mouseX-1,mouseY-70,4,100);
fill(100);
rect(mouseX-1,mouseY-70,4,35);
//draw handle

fill(0,0,0,45);
ellipse(mouseX+5,mouseY+27,11,11);

fill(234,135,68);
ellipse(mouseX+0.5,mouseY+26,11,11);
fill(100);
ellipse(mouseX+0.5,mouseY+26,6,6);

//draw handle bottom

stroke(0,0,0,45);
strokeWeight(7);
drawStar(8,5);
//call drawStar Fuction to draw shadow

fill(255,255,255,255);
stroke(255,218,64);
strokeWeight(3);
drawStar(0,0);
//call drawStar Fuction

// Update and display all balls
for (int i = 0; i < balls.length; i ++ ) { // Whatever the length of that array, update and display all of the objects.
balls[i].gravity();
balls[i].move();
balls[i].display();
}

}

void mouseMoved() {
// A new ball object
Ball b = new Ball(mouseX,mouseY,10); // Make a new object at the mouse location.
balls = (Ball[]) append(balls,b);```
`}`

```class Ball {
float x;
float y;
float speedy;
float speedx;
float w;

Ball(float tempX, float tempY, float tempW) {
x = tempX;
y = tempY-50;
w = tempW;
speedy = random(-7,-4);
speedx= random(-2,2);
}

void gravity() {
speedy = speedy + gravity;
}

void move() {
x = x + speedx;
// Add speed to y location
y = y + speedy;
// If square reaches the bottom
// Reverse speed
}

void display() {
// Display the circle
noStroke();
fill(255,random(100,255),random(15,255));

beginShape();

vertex(x,y);               //1
vertex(x+24/w,y+70/w);     //2
vertex(x+94/w,y+70/w);     //3
vertex(x+40/w,y+115/w);    //4
vertex(x+64/w,y+187/w);    //5
vertex(x,y+142/w);         //6
vertex(x-64/w,y+187/w);    //7
vertex(x-40/w,y+115/w);    //8
vertex(x-94/w,y+70/w);     //9
vertex(x-24/w,y+70/w);     //10

endShape(CLOSE);
}
}```

## assignment 4 A queue of Pandas tracking color

There’s some problem when I upload the code to openProcessing.org  , and I can’t run it on Mac computer as well , but it works pretty well on my computer (PC), so I just paste my Code here ,hope it will work on your computer.

I think there is some gap between 2 different systems , when I run same code , it doesn’t works well,it will show like the left one , then I found it is this command ‘s problem

video = new Capture(this,320,240,15); but if I set it as video = new Capture(this,640,480,15); it looks OK, as shown right side.( I’m sitting at same position to the web camera)

but it seem this bug won’t happen on MAC system.

Anyway ,move on to my assignment 4, I combine the Example 16-11 (tracking color) with array of panda ‘s movement ,to creat this sketch.

When U click the mouse ,there will be shown a queue of panda, it will track the color that you have click to choose ,and the panda ‘s color will changed to which you have selected.

the drawback is the video camera on the computer is not that sensitive ,the panda will shake a lot,sometimes they are not in a queue.

the program is as follows:

import processing.video.*;
Capture video;
color findColor;
int[] xp=new int[40];
int[] yp=new int[40];

void setup(){
size(640,480);
video=new Capture(this,width,height,30);
findColor=color(255,0,0);
smooth();
for (int i=0;i<xp.length;i++){
xp[i]=0;
yp[i]=0;
}
}
void draw(){
if(video.available()){
}
image(video,0,0);

float differenceC=500;

int miniX=0;
int miniY=0;

// Begin loop to walk through every pixel
for (int x = 0; x < video.width; x ++ ) {
for (int y = 0; y < video.height; y ++ ) {
int loc = x + y*video.width;
// What is current color
color currentColor = video.pixels[loc];
float r1 = red(currentColor);
float g1 = green(currentColor);
float b1 = blue(currentColor);
float r2 = red(findColor);
float g2 = green(findColor);
float b2 = blue(findColor);

// Using euclidean distance to compare colors
float d = dist(r1,g1,b1,r2,g2,b2);

if (d < differenceC) {
differenceC = d;
miniX = x;
miniY = y;
}
}
}
if (differenceC< 10) {
// Draw a circle at the tracked pixel
for(int i=0;i<xp.length-1;i++){
xp[i]=xp[i+1];
yp[i]=yp[i+1];
}
xp[xp.length-1]=miniX;
yp[yp.length-1]=miniY;
for(int i=0;i<xp.length;i++){

panda(xp[i],yp[i],i*0.02);
}
}
}

void mousePressed() {
// Save color where the mouse is clicked in trackColor variable
int loc = mouseX + mouseY*video.width;
findColor = video.pixels[loc];
}
void panda(int x,int y,float s){
pushMatrix();
translate(x,y);
scale(s);//scale the panda
//ears of panda
fill(findColor);
ellipse(-70,-50,70,70);
ellipse(70,-50,70,70);
fill(255);
strokeWeight(4);
ellipse(0,0,200,180);
//eyes of panda
fill(findColor);
ellipse(-50,10,60,70);
ellipse(50,10,60,70);
fill(255);
ellipse(-50,0,12,12);
ellipse(50,0,12,12);
//nose of panda
fill(findColor);
ellipse(0,50,15,10);
//mouse of panda
noFill();
stroke(findColor);
strokeWeight(4);
bezier(-5,70,-5,75,5,75,5,70);
popMatrix();
}

I’ve also done an exercise of programming with picture, see the file

I’m using the example 15-9

the smiley face will change color via the movement of mouse.

## Sensor frog

I was usually edit image and vedio by Adobe software.

I was very exciting that I could write code to edit vedio and image.

Moreover, I found that is a good platform to achieve the interaction between human and computer.

I don’t have many problems on adding effect to images and video.

But I have some problem while I combine some function.

http://openprocessing.org/visuals/?visualID=41131

## Assignment #4

Chapters 15 and 16 were quite fun. Going through the examples and changing in the code produced some nice effects!

Starting with images, I thought it would be cool to have a stop motion animation, so I got a series of images of a horse galloping. Created an array of images so I would not  have multiple variables, and made sure the images change in a specific order when the mouse is pressed. Now you can see the horse galloping as you click on the mouse! Here’s the link: http://www.openprocessing.org/visuals/?visualID=41036

Working with videos was slightly more complicated, reading and changing the code in the exercises in chapter 15 (images) wasn’t that hard. Going through the video code took me more time, and patience… Never the less, I did manage to insert one of my smiley faces and make it track colors that the mouse clicks. (working with a webcam). Pretty similar to an example, but with a face that I previously drew. Also, I used a function to make sure the whole head/smiley moves along with the mouse. This might have been covered in a previous chapter, I might have to look it up, but I feel like i’m missing something  as my function seem to be very long, with many variables, I’m sure there’s a way to make it shorter. I have also uploaded the sketch to open processing, but for it to work , it needs to be copy and pasted into processing itself in order for the webcam to work. http://www.openprocessing.org/visuals/?visualID=41106

Arduino’s next! Looking forward to that 🙂

## Assignment 4 (back for more)

For this week’s assignment I created a code graveyard! Really, I did! Maybe I have mid-class regression syndrome but nothing I tried quite worked properly. BUT, I do have this crazy sketch that is not at all what I intended. This is a screenshot below.

My code is here but the major problem is how to get the image files (data folder) into the file as well. They don’t export with the applet.

So here is the code:
import processing.video.*;

Capture video;

void setup() {
size(500, 350);
frameRate(200);
video = new Capture (this, 320,240,15);

for (int y=0; y < height; y++) {
for (int x = 0; x < width; x++) {
int loc = x + y*still2.width;
}
}
}

void draw() {

//if (x % 2 == 0) {
//pixels[loc] = image(still1,0,0, width, height);

//}else {
// pixels[loc] = image(still2,0,0, width, height);

image (still3, 0, 0, width, height);
/*if(millis()-timer <5000) && (clickedFlag==true)) {
//tint(255, 100);
//image(still1,0,0, width, height);}
*/
if (mouseX < width/2 && mouseY < height/2) {
tint(255, 100);
image(still1,0,0, width, height);

//for (int i = 0; i width/2 && mouseY < height/2) {
tint(255, 100);
image(still2,0,0, width, height);

//for (int i = 0; i < 100; i++) {
//}

//video capture
if (video.available ()) {
tint(mouseX, mouseY, 255);
image(video,width/2, height/2, 75,50);
}
}
}

And here are the separate images:

People are saying if you do video capture that you should copy and paste the code into your own Processing software. So please do that. Images are stills from Sergei Parajanov’s “Color of Pomegranates” (slightly masterbatory art house films = fun images to play with).

I had another original code that I tried to use, where I used images as part of an array. I could get the images to work but alas it become very confusing when I tried to make functions that guided the interactions. You can see the working part of the sketch and if you go to the code section you can see several failed attempts at functions commented out.

It is below:

//Assigment 4 – video and image

int maxImages = 3; // Total # of images
int imageIndex = 0; // Initial image to be displayed is the first

// Declaring an array of images.
PImage[]images = new PImage[maxImages];

void setup() {
size(500, 350);

for (int i = 0; i < images.length; i ++ ) {
images[i] = loadImage( "ColPom" + i + ".jpeg" );
}
}

void draw() {

// Displaying one image
image(images[imageIndex], 0, 0, width, height);

for (int y=0; y < height; y++) {
for (int x = 0; x < width; x++) {
int loc = x + y*images[imageIndex].width;
}
}
}

void mousePressed() {

// A new image is picked randomly when the mouse is clicked
imageIndex = int(random(images.length));

/*i was trying to make the images change in sequence here in a few different ways but it didn't work
//for (int imageIndex = 0; imageIndex<=1; imageIndex++);
//}

//int imageIndex = constrain(2);
//while (imageIndex<=1){
//imageIndex = ImageIndex + 1;

for (int imageIndex=0; imageIndex<2;) {
if (imageIndex<2) {
imageIndex = imageIndex+1;
}
else {
imageIndex = 0;
*/
}

I hope this is even slightly enlightening. Will clean this up and repost soon.

## Assignment 4: Well, a developement in my Processing education

The past four weeks learning Processing has been nothing short of panic attack, extra-migraine, insomnia provoking madness–not to mention, the psychological toll this struggle is putting me through .  As much as I enjoy participating in the interactive Processing examples online or through our texts, it seems I just can’t wrap my brain around all of the algorithms, commands, functions, grid-work and fine details, and writing codes on my own. Learning processing reminds me of learning another language, except much, much harder–it’s like math on a narcotics binge: wild and irrational. Beyond reading text everyday from morning until the wee hours of the following morning when my mind begins to leave my body at 1am, the system just isn’t clicking for me.

Shino has been a great help in beginning to piece the information together, but even still, I am utterly confused when not under her guidance.

This is the latest (functioning) sketch that I’ve been able to create. Shino helped me establish my idea, then I took it home and made some additions and tweaks, then I met up with her again (but I was ill and my brain wasn’t in the right place) and she helped me create the hair.

This sketch is supposed to be a crude representation of how I feel when working on Processing. My intention was to use Boolean function to make the thought bubbles fall to the bottom of the screen (gravity and speed) but, I couldn’t figure out how to make that happen. The placement of the thought bubbles as a group are dependent on the X and Y axis. From here on out, I am going to stick with only writing code for shapes (not drawings of actual objects or representations of drawings floating around in my head) until I get a better understanding of Processing.

Attached are my handwritten notes throughout the process of writing code and digesting Processing notes.

The link to this latest sketch: http://www.openprocessing.org/visuals/?visualID=40854

PS: I put a call up for a Processing Tutor on the General Posts board, if you’re interested, please check it out.

Processing Assignment Write Ups

Learning Processing Notes 7

Learning Processing Notes 4

Learning Processing Notes 3

Learnign Processing Notes 2