Project #3B – PROCESSING 2

Image

What: produce an interactive sketch that incorporates the following:! !
• 2 primitives (basic shapes)!
• mouseX, mouseY!
• random!
• means of clearing drawing (i.e. key event)!
• frame rate!
• data from one aspect of your drawing is printed to console!
• optional: animation!

So, up there was what I worked on with the criteria. It’s a heat wave like looking into the sun. By using Processing, I could easily create movable concentric circles. With added function, mouse and keyboard input are being implement to make it interactive. Below here is the code is used to produce the interactive image,

 

/* Project 3B#
concept : playing with heat wave
variables : – background color
– image intensity
– reset key
– frame rate

input : – mouse press ( LEFT or RIGHT) try it out!!
– key press ( UP, DOWN or SPACE) try it out!!

Counter : – frame rate
– background color
– image intensity
*/

int a = 0;
int b = 0;
float c = 20;

void setup(){
//background size
size(600,600);

}

void draw(){
//control min & max frameRate limit
c = constrain(c, 5, 300);
frameRate (c);
//background is affected by mouse click
background (a,0,0);
textSize (20);

noStroke();
//heat wave concentric circles
// +150
fill(a,0,0);
ellipse(mouseX, mouseY ,random(900,1050),random(900,1050));

//wave(+150)
fill(255,0,0);
ellipse(mouseX, mouseY ,random(750,900),random(750,900));

// +125
fill(a,0,0);
ellipse(mouseX, mouseY ,random(650,750),random(650,750));

//wave(+125)
fill(255,50,0);
ellipse(mouseX, mouseY ,random(525,650),random(525,650));

// +100
fill(a,0,0);
ellipse(mouseX, mouseY ,random(425,525),random(425,525));

//wave(+100)
fill(255,100,0);
ellipse(mouseX, mouseY ,random(325,425),random(325,425));

// +75
fill(a,0,0);
ellipse(mouseX, mouseY ,random(250,325),random(250,325));

//wave(+75)
fill(255,150,0);
ellipse(mouseX, mouseY ,random(175,250),random(175,250));

// +50
fill(a,0,0);
ellipse(mouseX, mouseY ,random(125,175),random(125,175));

//wave(+50)
fill(255,200,0);
ellipse(mouseX, mouseY ,random(75,125),random(75,125));

// +25
fill(a,0,0);
ellipse(mouseX, mouseY ,random(50,75),random(50,75));

//sun
fill(255,255,0);
ellipse(mouseX, mouseY ,50,50);

//text show counter
fill(255);
String x = “heat:” + a ;
String y = “sky:”+ b ;
String z = “frame rate:”+ c ;
text(x,500,560);
text(y,500,580);
text(z,10,580);

//light rays, visible after heat reaches 100
if(a > 100){
stroke(random(100,255),random(100,255),0);
strokeWeight (5);
line(mouseX, mouseY, random(2000), random(2000));

stroke(random(100,255),random(100,255),0);
strokeWeight (5);
line(mouseX, mouseY, random(2000), random(2000));

stroke(random(100,255),random(100,255),0);
strokeWeight (5);
line(random(2000), random(2000), random(2000), random(2000));

stroke(random(100,255),random(100,255),0);
strokeWeight (5);
line(random(2000), random(2000), random(2000), random(2000));

stroke(random(100,255),random(100,255),0);
strokeWeight (5);
line(random(2000), random(2000), random(2000), random(2000));
}
else{
return;
}

//parameters for sky and heat
if(b > 255){
fill (0,0,0,255);
rect(0,0,600,600);
}
else{
fill (0,0,0,b);
rect(0,0,600,600);

}

}

void mousePressed(){
//change value of heat and sky intensity
if(mouseButton == LEFT){
a += 20;
b += 5;
}
else if(mouseButton == RIGHT){
a -= 20;
b -= 20;
}
//counter for console
print(“heat:”);
println(a);

print(“sky:”);
println(b);

}

//change value of frameRate
void keyPressed(){
if (key == CODED) {
if (keyCode == UP){
c += 10;
}
else if (keyCode == DOWN){
c -=10;
}
print(“frameRate:”);
println(c);
}

//reset control
if (key == ‘ ‘) {
a = 0;
b = 0;
c = 20;
}
else return;

}

 

Advertisements

3 thoughts on “Project #3B – PROCESSING 2

  1. The first time I saw your project I could have sworn it was by some else from the open source website. When you explained how you did this, it’s pretty clear to me that you knew exactly what you are doing in this program. And I will honestly say that I wish I could be where you’re at for processing. Nicely done.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s