We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Pages: 1 2 
graphic things! (Read 2696 times)
graphic things!
Jun 10th, 2009, 1:03pm
 
i would like to create a graphic project in order to use the keybord to obtain shapes... exemples: if a write SQUARE a have a square, if a write LINE i have a line...etc... so for each sequence of word, have the shape of the meaning. I've already compiled something very simple, like every initial (L for Line) for a shape.. but i cannot use the strings or the charAt() to substitute the keypressed value with the entire word...
Someone can help me!?

this is my work till now... i'm a beginner... very beginner!

thanks to all!

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

void draw (){
 if (keyPressed) {
   if (key == 'r' || key == 'R'){
     rect (50,5,50,25);
     stroke (255,0,255);
     fill (255,0,255);
    }
   }
 if (keyPressed) {
   if (key == 'c' || key == 'C'){
      ellipseMode (CENTER);
      ellipse (200,200,50,50);
      stroke (0,255,0);
      fill (0,255,0);
   }
  }
if (keyPressed) {
  if (key == 'l' || key == 'L' ){
  line (250,250,350,30);
  strokeCap (ROUND);
  strokeWeight (8);
  stroke(255,0,0);
   }
 }
if (keyPressed) {
  if (key == 's' || key == 'S'){
  beginShape(LINES);
      vertex(111,106);
      vertex(116,120);
      vertex(116,120);
      vertex(130,120);
      vertex(130,120);
      vertex(120,131);
      vertex(120,131);
      vertex(123,143);
      vertex(123,143);
      vertex(110,135);
      vertex(110,135);
      vertex(97,143);
      vertex(97,143);
      vertex(99,131);
      vertex(99,131);
      vertex(91,120);
      vertex(91,120);
      vertex(105,120);
      vertex(105,120);
      vertex(111,106);
     endShape (CLOSE);
stroke(255,255,0);
strokeWeight(4);
}
}
if (keyPressed) {
   if (key == 'e' || key == 'E'){
  ellipseMode (CENTER);
  ellipse (300,300,30,60);
  fill (0,255,255);
  stroke (0,255,255);
 }
}
if (keyPressed) {
   if (key == 't' || key == 'T'){
    triangle(70,320,40,300,20,370);
    fill(0,0,255);
    stroke(0,0,255);
 }
}
if (keyPressed) {
  if (key == 'q' || key == 'Q' ){
  rect(150,360,30,30);
  strokeWeight(5);
  stroke(0,0,0);
  fill(0,0,0);
 }
}
     if (keyPressed) {
        if (key == 'p' || key == 'P' ){
          point(180,90);
          strokeWeight(10);
          stroke(205,105,0,150);
        }
}
}

i hope to hear someone as soon as possible!

thanks

Nicole
Re: graphic things!
Reply #1 - Jun 10th, 2009, 2:38pm
 
One way (only way?) to do it would be use a String as a buffer.

Every key press, add the key to the string.
Compare the string to the words of a shape;
if (input.equals("square")) ...

You would probably want a maximum length before clearing the string again, otherwise, if you typed in something wrong it would never equal one of your conditions.
Re: graphic things!
Reply #2 - Jun 10th, 2009, 3:50pm
 
Wouldn't using equals mean that it would only work if the exact word were typed in from the start?  Shouldn't using match() or indexOf() mean that it would find the word in the buffer even if the first few letters were nonsensical, e.g. "foosquare".  You could then clear the buffer once a word is found and perhaps after a certain length.
Re: graphic things!
Reply #3 - Jun 11th, 2009, 6:52am
 
The best method I think would be the contains() String method. You can search for character sequences in other character sequences. Here's what you do:

Code:

String buffer; //create a string buffer

void setup(){
 size(100,100);
 buffer = new String(); //initialize buffer to empty String
}

void draw(){
 //test for typed words
 if(buffer.contains("square") || buffer.contains("SQUARE")){
   //do your square drawing
   println("I JUST DREW A SQUARE! YAY!");
   buffer = new String(); // clear your buffer
 }
 // repeat for all your other shapes
}

void keyPressed(){
 buffer += key; //add newest keystroke to buffer
 println(buffer); //keep tabs on your results
}


So every time the user types a key, it's added to a long list of all their keystrokes. If the system finds a word you're looking for, it will execute whatever code you want!
Re: graphic things!
Reply #4 - Jun 11th, 2009, 10:12am
 
Yep - contains() works too.  One suggestion though: rather than having two tests for the lower and upper case versions of the words why not first set the entire buffer to lower case each time a keyPress is added:

buffer = buffer.toLowerCase();

Then you take account of CamelCase or accidental switches in case too Smiley

Though actually your suggested code would need to be adjusted slightly for this to work anyway:  Looks like you'd need to have a condition to exclude keys like SHIFT, ALT, CTRL etc. from the buffer Wink
Re: graphic things!
Reply #5 - Jun 11th, 2009, 10:38am
 
Ah yes, blindfish, you are correct. I was only on my first cup of coffee.  Shocked Thanks for your added improvements!
Re: graphic things!
Reply #6 - Jun 14th, 2009, 5:40am
 
the buffer solution is perfect!!! thank u very much... just one more question... i've tried to add some colors to the shapes but... the first shape is always black and white and then the others take the colors for the previous... eg: the first square is B&W and then red, and the first line is B&W and then red even if i wrote yellow... why? now my code is that:

String buffer;

void setup(){
 size(200,200);
 background(255,255,255);
 buffer = new String();
}

void draw(){
 //test for typed words
 if(buffer.contains("square") || buffer.contains("SQUARE")){
   rect (random(100),random(100),random(100),random(100));
   println("I JUST DREW A SQUARE! YAY!");
   buffer = new String();
 }
 if(buffer.contains("line") || buffer.contains("LINE")){
   line (random(100),random(100),random(100),random(100));
   stroke (255,0,0);
   println("I JUST DREW A LINE! YAY!");
   buffer = new String();
}
if(buffer.contains("ellipse") || buffer.contains("ellipse")){
   ellipseMode (CENTER);
  ellipse (random(200),random(200),random(25),random(25));
  stroke (0,255,0);
  fill (0,255,0);
   println("I JUST DREW A LINE! YAY!");
   buffer = new String();
 }
}
void keyPressed(){
 buffer += key;
 println(buffer);
}
Re: graphic things!
Reply #7 - Jun 14th, 2009, 6:55am
 
That's because you set stroke and fill after drawing the shape instead of doing it before...
Note also that instead of buffer = new String(); you can just do buffer = "";
And use buffer.toLowerCase().contains("line") for example to avoid double checks that won't work with "Line" for example.
Or even better, just put key to lower case before appending it.
Re: graphic things!
Reply #8 - Jun 23rd, 2009, 9:11am
 
someone knows why if a draw a curve the space between the vertex becomes white!? like a semi-circle with the coloured perimeter and the rest white... =(

if(buffer.contains("curve") || buffer.contains("curve")){
 smooth();
 strokeWeight (random(10));
 stroke(random(255),random(255),random(255));
curve(random(500),random(500),random(500),random(500),random(500),random(500),ra
ndom(500),random(500));
 println("I JUST DREW A CURVE! YAY!");
 buffer = new String();

part of the code...

thanks! =)
Re: graphic things!
Reply #9 - Jun 23rd, 2009, 10:10am
 
You are filling your shape with color due to the earlier calls to filled shapes above. Simply insert noFill(); right before smooth(); (or really anywhere before you draw the curve) and you should be good to go.
Re: graphic things!
Reply #10 - Jun 25th, 2009, 8:14am
 
thanks a lot... i've one more question... if i would like to use this code... with the keyboards...
and i would like to "communicate" with the pc... for example... i draw a cube writing "cube" and then i want to make it bigger or smaller o moving it in another part of the screen always typing the command.. how can i do it!?
my code is actually that:

String buffer;
float r;
float g;
float b;
float a;
float s;
float t;
float diam;
float x;
float y;
float c;
float d;
float e;
float f;


void setup(){
 size(500,500, P3D);
 background(255,255,255);
 buffer = new String();
 frameRate (60);
}

void draw(){
r = random(500);
g = random(500);
b = random(500);
a = random(500);
s = random(500);
t = random(500);
c = random(255);
d = random(255);
e = random(255);
f = random(255);
diam = random(100);
x = random(width);
y = random(height);

if(buffer.contains("rectangle") || buffer.contains("RECTANGLE")){
   fill(c,d,e,f);
   noStroke();
   rect (r,g,b,a);
   println("I JUST DREW A RECTANGLE! YAY!");
   buffer = new String();
}
 if(buffer.contains("line") || buffer.contains("LINE")){
   smooth();
   strokeCap(ROUND);
   strokeWeight (random(10));
   stroke (c,d,e,f);
   line (r,g,b,a);
   println("I JUST DREW A LINE! YAY!");
   buffer = new String();
}
if(buffer.contains("ellipse") || buffer.contains("ELLIPSE")){
  noStroke();
  fill (c,d,e,f);
  ellipseMode (CENTER);
  ellipse (x,y,r,g);
  println("I JUST DREW A ELLIPSE! YAY!");
  buffer = new String();
}
 if(buffer.contains("circle") || buffer.contains("CIRCLE")){
  noStroke();
  fill (c,d,e,f);
  ellipseMode (CENTER);
  ellipse (x,y,diam,diam);
  println("I JUST DREW A ELLIPSE! YAY!");
  buffer = new String();
}
if(buffer.contains("cube") || buffer.contains("CUBE")){
  noStroke();
  lights();
  fill (c,d,e);
  translate(r,g,0);
  rotateY(random(90));
  box(50,50,50);
  println("I JUST DREW A CUBE! YAY!");
  buffer = new String();
}

 if(buffer.contains("triangle") || buffer.contains("TRIANGLE")){
  noStroke();
  fill (c,d,e,f);
  triangle(r,g,b,a,s,t);
  println("I JUST DREW A TRIANGLE! YAY!");
  buffer = new String();
}
 
 if(buffer.contains("sphere") || buffer.contains("SPHERE")){
   noStroke();
   lights();
   fill(c,d,e);
   translate(r,g,0);
   sphere(40);
   println("I JUST DREW A SPHERE! YAY!");
   buffer = new String();
 }
}
 void keyPressed(){
   buffer += key;
   println(buffer);
}

with this i can draw shapes randomly for colours and position. but if i would to draw a cube... transform it, moving it, bigger smaller always typing and then redo a cube and again transform it... and so on.. how can i? is it possible to do that?
i've tried once with mouse dragged command, but i think that the program needs to know which shape it has to move and using the random it's not possible... i hope i was clear in explaning it..

please HEEEELPPPP!!!

thank u to all!

Nicky
Re: graphic things!
Reply #11 - Jun 25th, 2009, 10:03am
 
It's maybe a little more tricky than you might imagine.  At the moment you're not clearing the screen after each shape is drawn.  In order to give the impression that a particular shape is moving you'd need to clear the previously drawn shape...  An alternative would be to only draw one shape at a time, clear the background each frame and then, have the commands adjust the position of the shape.  To do that you'd need to store the current active shape and its details somehow Wink
Re: graphic things!
Reply #12 - Jun 25th, 2009, 10:21am
 
Selecting and moving/altering shapes is a lot more complicated than it sounds. You really need to make a class to do that stuff, because each shape will need its own variables and statuses and methods to do the resizing and moving. The nice thing about classes, however, is that once you program one, you just keep using it for all your shapes!
Re: graphic things!
Reply #13 - Jun 25th, 2009, 12:26pm
 
Beside the above advices, I would add you can, for example, input an ID (a name) before or after the shape creation typing. Thus, if you input the ID before a transformation command, you know which shape is to address.
Re: graphic things!
Reply #14 - Jun 25th, 2009, 2:02pm
 
i have understood all of u guys:

- to blindfish: considering that i have a random position for each shapes it's impossible to define where will be in the screen, so u mean that i have to define some possible position like, i can draw 5 o 6 cube and then for each clear the background and then move it? how can i store the datas?

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

to philo : what do you mean with an ID name? like cube 1, cube 2 and whatever?

does anyone have suggestion on how compiling it?

i've tried this thing with a photo.... like i write the title of the photo "ciao" ,it appears and then i type "movedown" and the photo moves down:

String buffer;

float r;
float g;
float b;
float a;
float s;
float t;
float diam;
float x,y;
float rot;
float c;
float d;
float e;
float f;
PImage ciao;


void setup(){
 size(500,500, P3D);
 background(255,255,255);
 buffer = new String();
 frameRate(60);
 ciao = loadImage("ciao.JPG");  
 x = 0.0f;
 y = 0.0f;
 rot = 0.0f;
}


void draw(){
r = random(500);
g = random(500);
b = random(500);
a = random(500);
s = random(500);
t = random(500);
c = random(255);
d = random(255);
e = random(255);
f = random(255);
diam = random(100);


{ if(buffer.contains("nicole") || buffer.contains("NICOLE")){
   image(ciao,x,y);
   println("I JUST DREW A NICOLE! YAY!");
   buffer = new String();
 } else  {
 if(buffer.contains("movedown") || buffer.contains("movedown")){
 background (255,255,255);
 image (ciao,x,y);
 rotate(rot);
 y += 20.0;
 rot += 1.0;
 println("I JUST DREW A NICOLE! YAY!");
 buffer = new String();
}
}
}
}

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

thank uuuuu!
I'm a very beginner so... too much questions =)!

nicole

ps: if anyone has skype or msn to keep in touch in an easier way, i would be sooo glad!

Pages: 1 2