Processing 1.0 - Processing Discourse

blindfish

Re: graphic things!
Reply #15 - Jun 26^th, 2009, 1:16am

Well - that's more or less what I was saying: you cleared the background and redrew the photo at the new location (though be careful in what order you add to the y value and draw the image - looking at your code I'm guessing you have to type movedown twice to get it to move).

The problem with doing this with your shapes is that background(255,255,255) [you can also simply use background(255)] will clear all shapes from the screen. In which case you'd need to keep a record of all shapes created - probably in an ArrayList - and their corresponding values (e.g. x,y,size, colour etc...) so you could redraw them at the appropriate position (as NoChinDeluxe suggested the best way to do this is by creating a Class aka Object.). You'd then need a way of referencing which shape to move which is where PhilHo's suggestion comes in.

Seeing as you're still starting out you may want to concentrate on getting a single object to respond to commands first so you have an understanding of what's involved, and then see if you can scale it up Wink

Where is the what if the what is in why?

NoChinDeluxe

Re: graphic things!
Reply #16 - Jun 26^th, 2009, 6:54am

nickytenera09 wrote on Jun 25^th, 2009, 2:02pm:

-to nochin : what is a class how can i do that

If you haven't worked with classes yet, then you are just on the threshold of loving Processing (and object-oriented programming in general)! Cheesy

The link blindfish posted above is pretty much the place to find everything you need to know, but to summarize, a class is kind of like a mini program inside your big program. You are defining an object that looks and behaves a certain way. Once you design it, you can just keep using it over and over without having to re-program everything.

So take your shapes, for example. Right now, under all your keyPress routines, you have all the shapes being drawn with their own variables and stuff. That's fine if you're only drawing one rectangle, but what if you want 20 You definitely don't want to have to code 20 individual routines for drawing shapes. Then think of what it would take to track the positions of all those shapes. Then think of what it would take to check to see if the mouse is clicking on any one of those 20 shapes! My head hurts just thinking about it. By defining a class, you can just take care of all those methods and variables and drawing routines ONCE. Then you just make copies of the object instead of coding each one by hand. So instead of having individual blocks of code in your main sketch checking, defining, and drawing those 20 rectangles, you could just do something as easy as this:

Code:


void draw(){
     for(int i=0; i<rectangles.size(); i++){
          Rectangle rectangle = (Rectangle)rectangles.get(i);
          rectangle.updatePosition();
          rectangle.checkMouseRollover();
          rectangle.resize();
          rectangle.display();
     }
}

In the above code, you would be storing instances of your rectangle class inside an ArrayList (or you could use a regular array too). The first line under the for() loop is pretty much the only scary looking thing. Everything under that are examples of methods you would define to do the stuff with your rectangles. But check this out. The above code is all you would need to do everything with your rectangles. And it doesn't matter how many rectangles you draw. You could have 1000 rectangles, and still only use those 5 lines of code! I'll stop here, because you'll find all this in that link. But just wanted to whet your appetite a little. Wink

nickytenera09

Re: graphic things!
Reply #17 - Jun 27^th, 2009, 11:24am

class Rect {

float a;
float b;
float c;
float d;
float e;
float x;
float y;
String buffer;

Rect() {
a = random(255);
b = random(255);
c = random(255);
d = random(200);
e = random(200);
x = random(200);
y = random(200);
buffer = new String();
}

void disegno() {
if(buffer.contains("rect") || buffer.contains("RECT")){
fill(a,b,c);
noStroke();
rect (x,y,d,e);
println("I JUST DREW A RECTANGLE! YAY!");
buffer = new String();
}
}

void move() {
if(buffer.contains("movedown") || buffer.contains("MOVEDOWN")){
background (255);
fill(a,b,c);
y += 10.0;
rect (x,y,d,e);
println("I JUST DREW A RECT MOVED! YAY!");
buffer = new String();
}
}

void keyPressed(){
buffer += key;
println(buffer);
}
}

Rect myRect;

void setup() {
myRect = new Rect();
background(255);
size(200,200);
}

void draw() {
myRect.disegno();
myRect.move();

}

DOES IT MAKE SENSE!?!?!

please if anyone has a quicker way to talk.. like skype and msn, please tell me!!! Embarrassed

Nicky

nickytenera09 YaBB Newbies Offline Posts: 8	Re: graphic things! Reply #18 - Jun 30^th, 2009, 8:25am pleeeeeeeeeeeeaaaaase someone can answer to the post above!??!? I don't know how to keep on...

blindfish

Re: graphic things!
Reply #19 - Jul 3^rd, 2009, 5:23am

Here's a working version Wink

You need to think about what should belong in the class - i.e. which properties and methods are directly relevant to the object - and what belongs in the main loop...

Anyway - you should be able to extend this easily enough - including allowing for different shapes by passing a parameter to the Shape class constructor; though the important thing is you understand what's going on. Objects are very powerful, particularly when you want to create multiple instances of similar objects in the same sketch. That doesn't however mean that all sketch code should be built into the object.

Also, note that you haven't incorporated a previous suggestion on converting text to lower case before testing it. This would avoid the need for:

if(buffer.contains("rect") || buffer.contains("RECT")){

which anyway wouldn't catch 'Rect'...

Finally you might find this thread interesting...

Code:

// I've changed the class name to Shape as you might want to 
// create different shapes at some point int he future ;)
Shape myShape;
String buffer = "";

void setup() {
    // size should be the FIRST call in setup
  size(200,200);
  // Don't create the shape here: do it when the right text is found in the buffer 
  //myShape = new Shape();
  background(255);
}

void draw() {
    background(255);
   

    // you have to make sure a shape has been created before drawing it
    // Alternatively you could allow several shapes to be created and store them in an array
    // You could then just iterate through the array based on its length
    if (myShape != null) {
        myShape.drawMe();
    }
    
}

// This function checks the buffer.
void readBuffer() {
    // conditions to check the buffer
    if(buffer.contains("rect") || buffer.contains("RECT")){
       noStroke();
       println("I JUST DREW A RECTANGLE! YAY!");
       // this replaces the previous shape
       // you could instead add to an array of Shapes
       myShape = new Shape();
       buffer = new String();
    }
    // using 'else if' is more efficient as subsequent conditions are ignored once one proves true
    // which is good assuming conditions are mutually exclusive...
    else if(buffer.contains("movedown") || buffer.contains("MOVEDOWN")){
         if (myShape != null) {
             myShape.y += 10;
             buffer = new String();
         }
    }
}

void keyPressed() {
   buffer += key;
   println(buffer);
    // The buffer doesn't need to be check every frame - just each time something is added to it.
    readBuffer();
}

class Shape {
// try and make variable names meaningful, even when concise
int r,g,b;
int w,h;
float x, y;

    Shape() {
        // Only need 3 values for colour
        // (int) ensures random number is an int instead of a float
        // or you could do int(random(255)) to convert it
        r = (int)random(255);
        g = (int)random(255);
        b = (int)random(255);
    
        // set a random width/height
        // 10 is the minimum, 110 the maximum
        w = 10 + (int)random(100);
        h = 10 + (int)random(100);
        
        // How would you ensure the rectangle doesn't go over the edge of the screen when it is first drawn?
        x = random(200);
        y = random(200);
    }
    
    // Draw the shape with current stored values
    void drawMe() {     
        fill(r,g,b);
        rect(x,y,w,h);
    }


}

Where is the what if the what is in why?

nickytenera09

Re: graphic things!
Reply #20 - Jul 4^th, 2009, 5:11am

Shape myShape;
Shape myShape2;
Shape myShape3;
Shape myShape4;
Shape myShape5;
String buffer = "";

void setup() {
//myShape = new Shape();
//myShape2 = new Shape();
//myShape3 = new Shape();
//myShape4 = new Shape();
//myShape5 = new Shape();
background(255);
size(200,200,P3D);
frameRate (60);
}

void draw() {
readBuffer();

if (myShape != null) {
myShape.drawMe();
}
if (myShape2 != null) {
myShape2.drawMe2();
}
if (myShape3 != null) {
myShape3.drawMe3();
}
if (myShape4 != null) {
myShape4.drawMe4();
}
if (myShape5 != null) {
myShape5.drawMe5();
}
}

void readBuffer() {
if(buffer.contains("rect") || buffer.contains("RECT")){
noStroke();
println("I JUST DREW A RECTANGLE! YAY!");
myShape = new Shape();
buffer = new String();
}
if(buffer.contains("line") || buffer.contains("LINE")){
println("I JUST DREW A LINE! YAY!");
myShape2 = new Shape();
buffer = new String();
}
if(buffer.contains("circle") || buffer.contains("CIRCLE")){
println("I JUST DREW A ELLIPSE! YAY!");
myShape3 = new Shape();
buffer = new String();
}
if(buffer.contains("ellipse") || buffer.contains("ELLIPSE")){
println("I JUST DREW A ELLIPSE! YAY!");
myShape4 = new Shape();
buffer = new String();
}
if(buffer.contains("cube") || buffer.contains("CUBE")){
println("I JUST DREW A CUBE! YAY!");
myShape5 = new Shape();
buffer = new String();
}
if(buffer.contains("movedownr") || buffer.contains("MOVEDOWNR")){
background (255);
if (myShape != null) {
myShape.y += 10;
buffer = new String();
}
}
if(buffer.contains("movedownl") || buffer.contains("MOVEDOWNL")){
background (255);
if (myShape2 != null) {
myShape2.y += 10;
myShape2.h += 10;
buffer = new String();
}
}
if(buffer.contains("movedownci") || buffer.contains("MOVEDOWNCI")){
background (255);
if (myShape3 != null) {
myShape3.y += 10;
myShape3.h += 10;
buffer = new String();
}
}
if(buffer.contains("movedowne") || buffer.contains("MOVEDOWNE")){
background (255);
if (myShape4 != null) {
myShape4.y += 10;
myShape4.h += 10;
buffer = new String();
}
}
if(buffer.contains("movedowncu") || buffer.contains("MOVEDOWNCU")){
background (255);
if (myShape5 != null) {
myShape5.y += 10;

buffer = new String();
}
}
if(buffer.contains("moveupr") || buffer.contains("MOVEUPR")){
background (255);
if (myShape != null) {
myShape.y -= 10;
buffer = new String();
}
}
if(buffer.contains("moveupl") || buffer.contains("MOVEUPL")){
background (255);
if (myShape2 != null) {
myShape2.y -= 10;
myShape2.h -= 10;
buffer = new String();
}
}
if(buffer.contains("moveupci") || buffer.contains("MOVEUPCI")){
background (255);
if (myShape3 != null) {
myShape3.y -= 10;
myShape3.h -= 10;
buffer = new String();
}
}
if(buffer.contains("moveupe") || buffer.contains("MOVEUPE")){
background (255);
if (myShape4 != null) {
myShape4.y -= 10;
myShape4.h -= 10;
buffer = new String();
}
}
if(buffer.contains("moveupcu") || buffer.contains("MOVEUPCU")){
background (255);
if (myShape5 != null) {
myShape5.y -= 10;
buffer = new String();
}
}
}
void keyPressed() {
buffer += key;
println(buffer);
}

class Shape {

int a,b,c,d,diam,s,r;
int w,h;
float x,y;

Shape() {
a = (int)random(255);
b = (int)random(255);
c = (int)random(255);
d = (int)random(255);
s = (int)random(10);
r = (int)random(90);
diam = (int)random(100);
w = 10 + (int)random(200);
h = 10 + (int)random(200);
x = random(200);
y = random(200);
}

void drawMe() {
noStroke();
fill(a,b,c,d);
rect(x,y,w,h);
}
void drawMe2() {
smooth();
strokeCap(ROUND);
strokeWeight (s);
stroke (a,b,c,d);
line (x,y,w,h);
}
void drawMe3() {
noStroke();
fill (a,b,c,d);
ellipseMode (CENTER);
ellipse (x,y,diam,diam);
}
void drawMe4() {
noStroke();
fill (a,b,c,d);
ellipseMode (CENTER);
ellipse (x,y,w,h);
}
void drawMe5 () {
noStroke();
lights();
fill (a,b,c);
translate(x,y,0);
rotateY(r);
box(50,50,50);
}
}

this is what i've done to have other movements and other shapes... i have the LAST question... it this moment i can draw all the cubes and other shapes that i want BUT when i type movedown or up ... just the last one cube or shape stay on the screen and moves... how can i have always all the other cubes or shapes that i drawn before behind??? if i write background it draws the background everytime it moves and i can see the movements but not the other shapes behind... if i don't write it i can see the other shapes that are not moving behind but the shape's moving leaves just a stripe of color and can't see the step down or up o or whatever... i hope i'm clear...
so i can write cube, line, circle etc, 10 times but when i write movedownCU or movedownL etc just the last cube or line or circle stay on the screen and moves.. the other 9 disappear!
thanks a lot again for the help...

nicole

PhiLho

Re: graphic things!
Reply #21 - Jul 4^th, 2009, 10:54am

A little improvement:
Code:

void readBuffer() {
   if(buffer.contains("rect")){
	noStroke();
	println("I JUST DREW A RECTANGLE! YAY!");
	myShape = new Shape();
	buffer = new String();
   }
     if(buffer.contains("line")){
	println("I JUST DREW A LINE! YAY!");
	myShape2 = new Shape();
	buffer = new String();
}
 if(buffer.contains("circle")){
	println("I JUST DREW A CIRCLE! YAY!");
	myShape3 = new Shape();
	buffer = new String();
}
if(buffer.contains("ellipse")){
	println("I JUST DREW AN ELLIPSE! YAY!");
	myShape4 = new Shape();
	buffer = new String();
}
   if(buffer.contains("cube")){
	println("I JUST DREW A CUBE! YAY!");
	myShape5 = new Shape();
	buffer = new String();
   }
   if(buffer.contains("movedownr")){
	  background (255);
	  if (myShape != null) {
		myShape.y += 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("movedownl")){
	  background (255);
	  if (myShape2 != null) {
		myShape2.y += 10;
		myShape2.h += 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("movedownci")){
	  background (255);
	  if (myShape3 != null) {
		myShape3.y += 10;
		myShape3.h += 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("movedowne")){
	  background (255);
	  if (myShape4 != null) {
		myShape4.y += 10;
		myShape4.h += 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("movedowncu")){
	  background (255);
	  if (myShape5 != null) {
		myShape5.y += 10;

		buffer = new String();
	  }
 }
if(buffer.contains("moveupr")){
	  background (255);
	  if (myShape != null) {
		myShape.y -= 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("moveupl")){
	  background (255);
	  if (myShape2 != null) {
		myShape2.y -= 10;
		myShape2.h -= 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("moveupci")){
	  background (255);
	  if (myShape3 != null) {
		myShape3.y -= 10;
		myShape3.h -= 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("moveupe")){
	  background (255);
	  if (myShape4 != null) {
		myShape4.y -= 10;
		myShape4.h -= 10;
		buffer = new String();
	  }
   }
    if(buffer.contains("moveupcu")){
	  background (255);
	  if (myShape5 != null) {
		myShape5.y -= 10;
		buffer = new String();
	 }
 }
}
     void keyPressed() {
  buffer += (key + "").toLowerCase();
  println(buffer);
}

But actually, you cannot have capital letters anyway, as Shift is seen as a separate key.
About your problem: you have one object per kind of shape. When you create another object of this kind, you overwrite the previous one (but not on screen).
If you want to have more, to keep them, you might have to read up a bit on ArrayList.