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.
Index › Programming Questions & Help › Programs › Help for drawing interactive shapes
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Help for drawing interactive shapes (Read 1125 times)
Lupiae
Help for drawing interactive shapes
Apr 11th, 2010, 6:14am  
Hi, i wrote a sketch that move some lines with mouseX. Now i'm trying to do the same with some rectangles, but i'm not able to do it  Cry
Here is the code for lines and above i put also the code for rectangles that i tryed to do. Anybody can help me?

//interactive lines

void setup() {
size(400,400);
smooth();
strokeWeight(5);
}
void draw() {
background (255);
display (100, 100, 100, PI/2*mouseX / width );
}

void display (int x, int y, int d, float a) {

pushMatrix();

translate(x,y);   //red line
rotate(-a);
stroke (255,0,0);
line(0,0, -d,0);

translate(0,0);   //green line
rotate(2*a);
stroke (0,255,0);
line(0,0, d,0);

translate(d,0);    //blue line
rotate(PI+(-2*a));
stroke (0,0,255);
line(0,0, d,0);

translate(d,0);    //purple line
rotate(2*a);
stroke (255,0,255);
line(0,0, d,0);

popMatrix ();
}  


//interactive rect

void setup() {
size(400,400);
smooth();
noStroke();
}

void draw() {
background (255);
display (100, 100, 322/6, 595/6);  
}

void display(int x, int y, int w, int h) {
   int trasp=127;
float a =   PI/2*mouseX / width;

pushMatrix();
 
translate(x,y);    //blue
rotate(-a);
fill(0,173,239,trasp);        
rect(0,0,w,h);

translate(0,0);   //yellow
rotate(2*a);
fill(255,242,0,trasp);  
rect(-w,0,w,h);

translate(w,0);   // pink
rotate(PI+(-2*a));
fill(236, 0, 140,trasp);
rect(0,0,w,h);
 
translate(w,0);    // grey
rotate(2*a);
fill(35,31,32, trasp);  
rect(0,0,w,h);

popMatrix ();
}
Back to top
 
 
Cedric
Re: Help for drawing interactive shapes
Reply #1 - Apr 11th, 2010, 9:25am  
hmm, they are moving. so ot not like this, how do you want them to move? or did you just try to change the strokeWeight of the lines ?

you are already using strokeWeight, so why not change it to 50 and use strokeCap(CORNER);...
Back to top
 
... twitter.com/CedricKiefer
WWW CedricKiefer 9570393 CedricKiefer  
Lupiae
Re: Help for drawing interactive shapes
Reply #2 - Apr 11th, 2010, 9:34am  
I need the rectangles move in the same way of the lines.
I need this sketch because i have to move some pictures, so i'm using now rectangles with the same dimension of the pictures to try to make the right movement, and after i will replace the shape with the images. So your trick with the strokeWeight is right, but it's not useful in this case.  Wink
Back to top
 
 
PhiLho 
Re: Help for drawing interactive shapes
Reply #3 - Apr 11th, 2010, 3:42pm  
I made a little change to your initial sketch:
Code:
void setup() {
size(400,400);
smooth();
strokeWeight(5);
}
void draw() {
background (255);
display (100, 100, 100, PI/2*mouseX / width );
}

void display (int x, int y, int d, float a) {

pushMatrix();

translate(x,y);
rotate(PI-a);
stroke (255,0,0);   //red line
line(0,0, d,0);

translate(d,0); // Go to end of red line
rotate(2*a-PI);
stroke (255,0,255);    //purple line
line(0,0, d,0);

popMatrix ();
pushMatrix();

translate(x,y);
rotate(a);
stroke (0,255,0);   //green line
line(0,0, d,0);

translate(d,0); // Go to end of green line
rotate(PI-2*a);
stroke (0,0,255);   //blue line
line(0,0, d,0);

popMatrix ();
}

Therefore, doing the same thing with rectangles was easy:
Code:
void setup() {
size(400,400);
smooth();
strokeWeight(5);
}
void draw() {
background (255);
display (100, 100, 100, PI/2*mouseX / width );
}

float w = 322/6; float h = 595/6;
void display (int x, int y, int d, float a) {

pushMatrix();

translate(x,y);
rotate(PI-a);
stroke (255,0,0);   //red line
rect(0,0,w,h);
//line(0,0, d,0);

translate(w,0); // Go to end of red line
rotate(2*a-PI);
stroke (255,0,255);    //purple line
rect(0,0,w,h);
//line(0,0, d,0);

popMatrix ();
pushMatrix();

translate(x,y);
rotate(a);
stroke (0,255,0);   //green line
rect(0,0,w,-h);
//line(0,0, d,0);

translate(w,0); // Go to end of green line
rotate(PI-2*a);
stroke (0,0,255);   //blue line
rect(0,0,w,-h);
//line(0,0, d,0);

popMatrix ();
}
Back to top
 
WWW  
Lupiae
Re: Help for drawing interactive shapes
Reply #4 - Apr 12th, 2010, 3:06am  
thank for your answer, but it's not what i exactly want  Undecided
you helped me to try another way, but i'm still searching for the solution.... i'm going crazy!!!

the way i want to display the rectangles is this

void setup () {
 size (400,400);
 smooth();
}
void draw () {
 background (255);
 float w=322/6;
 float h=595/6;

 pushMatrix ();
 translate (100,100);
 rotate (PI/6);
 fill (255,0,0);
 rect(0,0,w,h);
   
 translate (w,0);
 rotate (-2*PI/6);
 fill(0,255,0);
 rect(0,0,w,h);
 
 translate (0,h);
 rotate (2*PI/6);
  fill(0,0,255);
 rect(0,0,w,h);
 popMatrix ();
 
 translate (100,100);
 rotate (-PI/6);
 fill(255,0,255);
 rect(-2*w-5,h-3,w,h);

}
(this code is only to show how the rectangles need to be displayed when they move)
The common vertex between red and green should be static.
I'm tryng hundreds solutions but i can't find the right one. Maybe there is not solution?  Embarrassed
Back to top
 
 
Smitty
Re: Help for drawing interactive shapes
Reply #5 - Apr 12th, 2010, 3:29am  
Is this close to what you want?

Code:

void setup() {
size(400,400);
smooth();
noStroke();
}

void draw() {
background (255);
display (100, 100, 322/6, 595/6);  
}

void display(int x, int y, int w, int h) {
   int trasp=127;
float a =   PI/2*mouseX / width;

pushMatrix();
 
translate(x,y);    //blue
rotate(-a);
fill(0,173,239,trasp);	  
rect(0,0,-w,-h);

translate(0,0);   //yellow
rotate(2*a);
fill(255,242,0,trasp);  
rect(0,0,w,-h);

translate(w,0);   // pink
rotate(PI+(-2*a));
fill(236, 0, 140,trasp);
rect(0,0,w,-h);
 
translate(w,0);    // grey
rotate(2*a);
fill(35,31,32, trasp);  
rect(0,0,w,-h);

popMatrix ();
}

Back to top
 
 
Lupiae
Re: Help for drawing interactive shapes
Reply #6 - Apr 12th, 2010, 4:35am  
ok, this answer also is right, so if i invert in display the dimension

display (100, 100, 595/6, 322/6);

i will obtain the rectangles in the way i want.

But the problem is: if i replace the rectangles with an image (png with transparent background) with the same size of the rectangle, the program doesn't work!
How can i do this?  Undecided
Back to top
 
 
Lupiae
Re: Help for drawing interactive shapes
Reply #7 - Apr 12th, 2010, 4:57am  
I DID IT!!!!! YES YES YES YES YES YES!!!!!!  Cheesy Cheesy Cheesy Cheesy Cheesy Cheesy
THANKS TO EVERY BODY!!!!!
It was so easy!!!!  Roll Eyes I used the one of PhiLho !!!!

PImage moduloa;

void setup() {
size(400,400);
smooth();

int w=323/6;
int h=595/6;
moduloa=loadImage ("modulook.png");

 moduloa.resize(h,w);

}

void draw() {
background (0);
display (100, 100, 100, PI/2*mouseX / width );
}

float w = 595/6; float h = 322/6;

void display (int x, int y, int d, float a) {
int trasp=127;

pushMatrix();

translate(x,y);
rotate(PI-a);
image (moduloa,0,0);
fill(0,173,239,trasp);         //blue
rect(0,0,w,h);


translate(w,0);
rotate(2*a-PI);
image (moduloa,0,0);
fill(255,242,0,trasp);     //yellow
rect(0,0,w,h);


popMatrix ();
pushMatrix();

translate(x,y);
rotate(a);
image (moduloa,0,-h);
fill(236, 0, 140,trasp);   //pink
rect(0,0,w,-h);


translate(w,0);
rotate(PI-2*a);
image (moduloa,0,-h);
fill(35,31,32, trasp);   //grey
rect(0,0,w,-h);


popMatrix ();
}

If you want to try remember to put an image in the sketch folder  Wink
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›