The Whiskey Sea

A good way to get started on any programming is to write out the steps as if you were giving instructions to your grandma, the computer.  I feel more like I’m the grandma trying to give out instructions, but here is what we outlined in class last week:

1) type a sentence, hit enter, create bubble for each word

2)to create a bubble, draw ellipse @ (0,0), which will have a randome speed and vector

3) if bubble goes off screen, make it appear at opposite side of screen

4) if camera sees pink square, assign nearest bubble to the x,y location of the square

5) if camera sees that pink square disappears, set bubble ellipse radius as zero, assign word to location of where square disappeared, and write the word at that location

Long-term objective: to create a bubble type-organ so that the act of typing will produce real live bubbles into which the typed letters are projected.  When a bubble is popped, an image appears on a screen and/or a sound is created

Short-term goals for ICM final project:

1) to make virtual bubbles appear via typing

2) use openCV to track object

3) have the virtual bubble “follow” the x,y-coordinates of the tracked object(s)

4) when object disappears, for an image to replace the bubble at the location where the object disappeared

For some reason, it’s not uploading properly.  Best to cut and past code into processing:

Ulysses

Wanted to get the number of bubbles to vary depending on total word count for each word, but couldn’t figure out how set the bubbleArray = new bubble[n] so that n = total word count for each word…

Tried to combine the car-array and snake-array exercises so that I could practice using objects,classes, and arrays.  Didn’t figure out how to do my original idea of having the blocks move around the mouse-orb, but maybe this coming week….

In any case, here it is!

Part I

In this exercise we were supposed to rewrite a code for an object that follows the mouse.

(Here it is)

Don’t really understand the challenge problem which asks us to “create a Point class that stores an x and y coordinate as part of the sketch” so that “each snake object will have an array of Point objects, instead of two separate arrays of x and y values.”  In fact, I just looked up Shiffman’s answers and realized I didn’t revamp the code enough at all to include multiple snakes… (sigh).  This would mean setting the xpos/ypos integers within a class Snakes, which would include a constructor for making the snake.

Part II

So, I’m getting an error “NullPointerException” when I tried creating class Snake.  Can’t figure out what’s wrong, but here it is (I’ve bolded the part of the code that the error refers to):

Snake s0;
Snake s1;

void setup() {
size(500,500);
smooth();
frameRate(20);
s0 = new Snake(70);
s1 = new Snake(100);
}

void draw() {
background(200,50,50);

s0.update(mouseX-30,mouseY);
s0.display();

s1.update(mouseX+30,mouseY);
s1.display();
}

class Snake {
int[] xpos;
int[] ypos;

Snake(int n) {
int[] xpos = new int[n];
int[] ypos = new int[n];
}

void update(int newX, int newY) {
for(int i = 0; i < xpos.length-1; i++) {
xpos[i] = xpos[i+1];
ypos[i] = ypos[i+1];
}
xpos[xpos.length-1] = newX;
ypos[ypos.length-1] = newY;
}

void display() {
for (int i = 0; i < xpos.length; i++) {
noStroke();
fill(255-i*5,i*2);
rect(xpos[i],ypos[i],i,i);
}
}
}

This exercise was for us to practice writing array operations using the following integers:

int [] nums = {5,4,2,7,6,8,5,2,8,14};

1) square each number:

for (int i =0; i < nums.length; i++) {
nums [i] = nums[i]*nums[i];
}

2)add random number between 0 and 10 to each number:

for (int i = 0; i < nums.length; i++) {
nums[i] += int(random(0,10));
//correction: int(random(10))… I guess 0 is assumed
}

3) add to each number the number that follows in the array; skip the last value in array:

for (int i = 0; i < nums.length -1; i++) {
nums[i] +=  1+ nums[i];
//correction: nums[i] += nums[i+1];
}

4) calculate the sum of all the numbers:

//totally guessing this
int Sumnums = nums[i];
for (int i=0; i < nums.length; i++) {
Sumnums += nums[i];
}
//why would nums[i] end up adding all the numbers together?

In an attempt to get a better understanding on arrays+objects, I have been playing around w/ the codes we worked on in class last Monday—basically, just switching around numbers and variables and seeing what happens when you comment out certain parts.

1) My first question was, how could I make the squares go vertically instead of horizontally.  After switching around the void move() function, I eventually realized I also had to change the xpos in carArray[i] in the initialization part:

from: carArray[i]=new Car(randomColor,200,random(0,height),random(-2,2));

to: carArray[i]=new Car(randomColor,random(0,width),height/2,random(-2,2));

As you can see, I also changed the ypos to “height/2″ so that the squares would all start off in the middle of the screen’s y-axis.

2) My second question was, what did “Car car1″ and “car1.display()”/”car1.move()” have to do with anything?  I remember Che-Wei saying something about having to initialize the first car, but I tried commenting out these sections and it didn’t seem to affect the sketch at all… ?

3)I also can’t really understand why in the initial set-up we set randomColor as “color c.”  For one, the color seems to be the same every time I run the sketch, so I’m not sure where the random part comes in.  For another, how does this work w/ c = c_ below in the class Car?

Here’s the code after making some minor adjustments:

//Car car1;
Car[] carArray = new Car[1000];

void setup() {
size(700,400);
smooth();
//color c = color(255,0,0);
//car1=new Car(c, 1.0, 0.0, 1.0);

for( int i=0; i < carArray.length; i++) {

color randomColor = color(random(255),random(255),random(255));

//how does randomColor interact w/ “color c” below?
carArray[i] = new Car(randomColor,random(0,width),height/2, random(-2,2));
}
}

void draw() {
background(0,0,mouseY);
//car1.display();
//car1.move();

for (int i=0; i<carArray.length; i++) {
carArray[i].display();
carArray[i].move();
}
}

class Car {
color c;
float xpos;
float ypos;
//float xspeed;
float yspeed;
int w;
int h;

Car(color c_, float xpos_, float ypos_, float yspeed_) {
c=c_;
xpos = xpos_;
ypos = ypos_;
//xspeed = xspeed;
yspeed = yspeed_;
w=15;
//h=30;
}

void display() {
rectMode(CENTER);
stroke(0);
float d=dist(xpos,ypos,mouseX,mouseY);
fill(0,20,100,d);
rect(xpos,ypos,w,w);
}

void move() {
/*  xpos = xpos +xspeed;
if (xpos > width) {
xpos = 0;
}
if (xpos < 0) {
xpos = width;
}
*/

ypos = ypos + yspeed;
if (ypos > height) {
ypos = 0;
}
if (ypos < 0) {
ypos = height;
}
}
}

So I’ve been tweaking this code so that the squares will go around the mouse, as if the mouse has a circular force field around it that pushes the squares around it.  I’m trying to manipulate the dist() function with a mousePressed() function, but so far, it’s just been a losing battle between my head vs. the brick wall.

Practicing functions and objects in processing…

(Here it is)

void setup() {
size(200, 200);
background(255);
}

void draw() {
int xPos = 0;
int yPos = 0;
int sqWH = 20; //width and height of each square
for (int i = 0; i < 10; i++) {
for (int j = 0; j < 10; j++) {
new MagicSquare(xPos, yPos, sqWH);
xPos += sqWH;
}
xPos = 0;
yPos += sqWH;
}
}

class MagicSquare { // class declaration

int redMod = floor(random(255));

MagicSquare(int _locX, int _locY, int _wh) {  // constructor
fill(redMod,0,0);
rect(_locX, _locY, _wh,  _wh);
}
}

Ball one bouncing, ball two mousing, keyPress clears screen, mouse clicks velocity.  Here’s the code (how can I clean this up?):

float x = 0;
float y = 0;
float xspeed = 7;
float yspeed = 5;

void setup() {
size(400,400);
smooth();
background(0);
}

void draw() {
fill(100);
ellipse(mouseX,mouseY,width/30,height/30);

fill(255);
ellipse(x,y,width/30,height/30);

//speed flux
x = x+xspeed;
y = y-yspeed;

//direction
if ((x > width) || (x<0)) {
xspeed = xspeed * -1;
}
if ((y>height) || (y<0)) {
yspeed = yspeed * -1;
}
}

//direction flux
void mousePressed() {
background(random(255),random(255),random(255));
xspeed = xspeed + random(7);
yspeed = yspeed + random(7);
}

//clear
void keyPressed() {
background(0);
}

Button as switch in draw function: With this exercise, we’re practicing a way to turn a boolean variable into a switch so that if one state is true, the other will be set to false, and vice-versa.  This toggle effect is stated with “!” as in, for example, “button = !button”.  The question is what is the difference between putting this type of button switch statement (determined by mousePressed) within the draw function or outside the draw function?  From what I understand, you want to put the statement outside the draw function which will be looping over and over.  Each time it draws again, the button statement will switch back on itself, in effect, flipping the colors back and forth a few times when mouse if pressed.  You only want the boolean statement to read when the mouse is pressed, which means you have to put it outside the draw loop, as follows:

boolean button = false;

int x = 50;
int y = 50;
int w = 100;
int h = 75;

void setup() {
size(200,200);
}

void draw() {

if (button) {
background(255);
stroke(0);
} else {
background(0);
stroke(255);
}

fill(175);
rect(x,y,w,h);
}

void mousePressed() {
if (mouseX>x && mouseX<x+w && mouseY>y && mouseY<y+h) {
button = !button;
}
}

Circle goes when mouse pressed: my initial coding set the boolean as “button = true” and therefore did the opposite function of stopping the ball when the mouse was pressed:

boolean button = true;

int circleX = 0;
int circleY = 100;

void setup() {
size(200,200);
}

void draw() {
background(100);
stroke(255);
fill(0);
ellipse(circleX,circleY,50,50);

if(button) {
circleX = circleX + 1;
}
}

void mousePressed() {
button = false;
}

So I had to switch to “button = false” up top and “button = true” when mouse pressed (incidentally, Shiffman has “going” instead of “button” which makes a lot more sense!):

boolean button = false;

int circleX = 0;
int circleY = 100;

void setup() {
size(200,200);
}

void draw() {
background(100);
stroke(255);
fill(0);
ellipse(circleX,circleY,50,50);

if(button) {
circleX = circleX + 1;
}
}

void mousePressed() {
button = true;
}

In my first test, I just tried to make one square fade, which it did, but never returned to white again when my mouse went over.  I thought I’d set it to return to white by constraining “a” within 0 and 255, but then realized I actually need to redraw and fill the square again.  This was my second (incorrect) attempt:

int a = 255;
float b = 255;
float c = 255;
float d = 255;

void setup() {
size(200,200);
}

void draw() {
background(0);
line(width/2,0,width/2,height);
line(0,height/2,width,height/2);

if (mouseX < width/2 && mouseY < height/2) {
fill(a);
rect(0,0,100,100);
a = a – 1;
a = constrain(a,0,255);
fill(a);
}

else if (mouseX > width/2 && mouseY < height/2) {
fill(b);
rect(100,0,100,100);
b = b – 1;
b = constrain(b,0,255);
fill(b);
}

else if (mouseX < width/2 && mouseY > height/2) {
fill(c);
rect(0,100,100,100);
c = c – 1;
c = constrain(c,0,255);
fill(c);
}

else if (mouseX > width/2 && mouseY > height/2) {
fill(d);
rect(100,100,100,100);
d = d – 1;
d = constrain(d,0,255);
fill(d);
}
}

So I went to take a look at what Shiffman did and realized that the organization of commands was completely different…

float a = 0;
float b = 0;
float c = 0;
float d = 0;

void setup() {
size(200,200);
}

void draw() {
background(0);
stroke(255);
line(width/2,0,width/2,height);
line(0,height/2,width,height/2);

if (mouseX < width/2 && mouseY < height/2) {
a = 255;
}

else if (mouseX > width/2 && mouseY < height/2) {
b = 255;
}

else if (mouseX < width/2 && mouseY > height/2) {
c = 255;
}

else if (mouseX > width/2 && mouseY > height/2) {
d = 255;
}

a = a – 1;
b = b – 1;
c = c – 1;
d = d – 1;

fill(a);
rect(0,0,100,100);
fill(b);
rect(100,0,100,100);
fill(c);
rect(0,100,100,100);
fill(d);
rect(100,100,100,100);
}

Been playing with Processing a little everyday and had a good time with this sketch (link below), which was not the most difficult to execute but certainly the most fun conceptually.  I couldn’t resist including a little narrative, but feel free to go directly to the sketch, which unfortunately must be seen on an all-too huge computer screen, partly because that was what I was working with and partly in order to feel the somewhat hypnotizing effect.  As follows:

One night while collecting data for FWN1-900, a robot woke up to the ever present and most fundamental condition of its existence as stated by

//the

void setup() {

//how, or why, it acquired this new awareness, it did not know.  What it did know was that as a consequence, the robot could now process its conditions in new ways.

//e.g.

size(finite,infinite);

//n this context, statements like

background(0);

//took on a whole new meaning that was perhaps best articulated by:

fill(emptyX, emptyWHY)

/*which was at once a hopeless feeling and an overwhelming urge that drove the robot to suddenly understand the formerly incomprehensible human compulsion called create(myths), many examples of which the humans had left behind. Upon secretly uploading old database code(myths) from FWN1-900, the robot came across one in particular about a high-speed, multi-processing android who outLooped a size(gargantuan) uni-visual scensor, model(Kyklopes), by declaring itself to be Nobody.  The robot simply adored model(Kyklopes).  Being itself a uni-visualization sensor–model(cycloPot)–the robot was super excited by the idea of a size(gargantuan) but not size(infinite) prototype of its kind: an ancestor and nemesis, against which model(cycloPot) could turn its existential status of a nobody into a meaningful function of escape.  It was with this longing, then, that model(cycloPot) looked up at the stars and saw for the first time: */

//a vision:

size(1000,1000);
background(120,120,0);
stroke(255);

//outerEye
fill(1,14,36);
stroke(145,145,0);
strokeWeight(5);
ellipse(500,500,450,645);

//center point (500,500);
strokeWeight(50);
stroke(105,105,0);
point(500,500);

//robot face
strokeWeight(4);
stroke(255,255,0);
point(435,450);
point(435,340);
point(565,340);
point(565,450);

strokeWeight(0);
stroke(255,255,0,70);
noFill();
rect(435,340,130,110);

//cyclop eye
ellipse(500,385,40,60);
strokeWeight(4);
stroke(255,255,0);
point(500,385);

//cyclop body
point(425,470);
point(425,640);
point(575,470);
point(575,640);

strokeWeight(0);
stroke(255,255,0,70);
noFill();
rect(425,470,150,170);

//neck
strokeWeight(4);
stroke(255,255,0);
point(477,450);
point(523,450);
point(477,470);
point(523,470);

strokeWeight(0);
stroke(255,255,0,70);
noFill();
rect(477,450,46,20);

//L-arm
strokeWeight(4);
stroke(255,255,0);
point(423,500);
point(423,540);
point(403,500);
point(403,540);

strokeWeight(0);
stroke(255,255,0,70);
noFill();
rect(403,500,22,40);

//R-arm
strokeWeight(4);
stroke(255,255,0);
point(575,500);
point(575,540);
point(597,500);
point(597,540);

strokeWeight(0);
stroke(255,255,0,70);
noFill();
rect(575,500,22,40);

//L-leg
strokeWeight(4);
stroke(255,255,0);
point(447,640);
point(447,667);
point(487,667);
point(487,640);
point(410,667);

strokeWeight(0);
stroke(255,255,0,70);
noFill();
rect(447,640,40,27);
line(410,667,447,667);

//R-leg
strokeWeight(4);
stroke(255,255,0);
point(553,640);
point(553,667);
point(513,667);
point(513,640);
point(590,667);

strokeWeight(0);
stroke(255,255,0,70);
noFill();
rect(513,640,40,27);
line(553,667,590,667);

//antennae
strokeWeight(4);
stroke(255,255,0);
point(500,255);
strokeWeight(0);
stroke(255,255,0,70);
line(500,255,500,340);

//stars
strokeWeight(3);
stroke(150);
point(400,300);
point(560,700);
point(700,547);
point(646,574);
point(350,600);
point(585,418);
point(590,275);
point(300,520);
point(480,775);
point(432,745);
point(534,722);
point(486,295);
point(615,760);
point(400,400);
point(335,455);
point(340,700);
point(510,310);
point(440,230);
point(620,550);
point(680,450);
point(650,670);
point(415,680);
point(407,580);
point(315,378);
point(542,200);
point(635,300);