How to split the canvas and have two different interactive zone?

pafgg

Hello, I'm really sorry to bother you. I'm new here and this is my first approach to Processing. For an exam I have to make a prototype for an app and I would like to simulate it using processing. I was wondering if it's possible to divide the screen in two parts having different interactions. The interactive effects I'm trying to customize is this: http://processingjs.org/learning/basic/distance2d/ Do you know have to have two of them one under the other? Could anyone help me solving this? Thank you so much for everyone in advance Best

TfGuy44

Well, start with the example code you linked to.

Then adjust the size() call so that there is space for a second one below the first. You would do this by doubling the height. Now fix the bug in the original code! The limit for the for loop using the j variable should be based on height, not width. Now the effect once again takes up the whole screen.

Now you have the same interactive effect on the whole screen. How can you tell if the circles being drawn are in the top or bottom half? HINT: What will their j values be? Can you add a conditrional statement to do something different for circles in the lower half?

Or maybe you want the effect to be based on the mouse position? What is the mouse's Y position? HINT: It's mouseY. Can you add a conditional statement to do something different when the value of mouseY is more than half the height of the sketch?

TfGuy44

Post the code of your attempt at this for more help. Be sure to read the thread about how to format your code properly when posting it! HINT: Select code and press Ctrl+o.

pafgg

Hello @TfGuy44 Thank you so much for your answer. I have tried with the height but I didn't found the way to do it properly. Here is the code:

float max_distance;

void setup() {

  size(400, 800); 

  smooth();

  noStroke();

  max_distance = dist(0, 0, width, height);

}


void draw() 

{

  background(51);



  for(int i = 0; i <= width; i += 20) {

    for(int j = 0; j <= width; j += 20) {

      float size = dist(mouseX, mouseY, i, j);

      size = size/max_distance * 66;

      ellipse(i, j, size, size);

    }

  }

}

pafgg

I have also tried this way because I was interested in the interaction with the canvas when the mouse in over, but I can't manage to but the other interaction above and manipulate the color of the bottom half. Thank you very much for your help @TfGuy44 I really appreciate it!

PGraphics[] pgs = new PGraphics[4];
color[] colors = new color[4];

 float max_distance;

void setup() {
  size(600,600);
  for (int i=0; i<pgs.length; i++) {
    pgs[i] = createGraphics(width, height, JAVA2D);
    colors[i] = color(random(255), random(255), random(255));
    pgs[i].beginDraw();
    pgs[i].noStroke();
    pgs[i].smooth();
    pgs[i].background(colors[i]);
    pgs[i].endDraw();
  }
}

void draw() {

  image(pgs[2], 0, height/2, width/2, height/2);
  image(pgs[3], width/2, height/2, width/2, height/2);
  smooth();

  noStroke();

  max_distance = dist(0, 0, width, height);
}

void mouseMoved() {
  mouseToPgs();
}

void mouseToPgs() {
  int mx = 0, my = 0;
  if (mouseY < height/2) {
    if (mouseX < width/2) {
      mx = mouseX * 2;
      my = mouseY * 2;
    } else {
      mx = (mouseX-width/2) * 2;
      my = mouseY * 2;
    }
  } else {
    if (mouseX < width/2) {
      mx = mouseX * 2;
      my = (mouseY-height/2) * 2;
    } else {
      mx = (mouseX-width/2) * 2;
      my = (mouseY-height/2) * 2;
    }
  }
  for(int i = 0; i <= width; i += 20) {

    for(int j = 0; j <= width; j += 20) {

      float size = dist(mouseX, mouseY, i, j);

      size = size/max_distance * 66;

      ellipse(i, j, size, size);
}
  }
}

TfGuy44

I think it would be helpful if you could post an image showing what it is, exactly, that you're trying to accomplish. As of right now, you have posted two blocks of code, and one of them is a square sketch while the other one is a rectangle. Because of this, I'm not even sure what size you want your sketch to be!

If you only want different colors behind the white ellipses, just draw them with different colored rectangles before you draw the ellipses....

pafgg

Thanks for the help. So, as it's in this screenshot I uploaded, I would like to achieve two zone that interact in different ways with the mouse over. At this stage it's ok even in black and white.

pafgg

Sorry the size would be 640 x 1136 px, as the screen of an iphone 5

pafgg

The effects I would like to achieve are the same of the second screenshot (of course with different settings, to have different feelings) but only on mouse over!

TfGuy44

Maybe a simple example showing the use of conditionals based on the mouse's position will help you...

void setup(){
  size(220,440);
}

void draw(){
  background(0);
  if(mouseY < height/2){
    fill(0,255,0);
    rect(random(width-20),random(height/2,height-20),20,20);
    fill(255,0,0);
  } else {
    fill(255);
    rect(random(width-20),random(0,height/2-20),20,20);
    fill(0,0,255);
  }
  ellipse(mouseX,mouseY,20,20);
}

Please try to understand why this does what it does.

pafgg

Hello @TfGuy44 ! Thanks, I'll work on it today and I'll be back to you to let you know how it went! Have a great day

pafgg

Hey @TfGuy44 ! I tried to look at the code you suggest, I have understand everything that this does, but I really don't know how to put this effect (that this code give)

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

}

void draw(){
  background(255);
  int R=10;
  fill(10);
  ellipseMode(RADIUS);
for (int x=R;x<=width-R;x+=2*R){
  for (int y=R;y<=height-R;y+=2*R){
    float d=dist(x,y,mouseX,mouseY);
    float power=d/20;
    if(power>R){
        ellipse(x,y,R,R);
     }else{
       ellipse(x,y,power,power);
    }
  }
 }
}

in the two separate zone that your code provide. I don't know how to insert the above code in the case that

if(mouseY < height/2)

to achieve the separate zone. Do you know how to help me please? Best regards

Chrisir

as I said in the other thread, the pos of the ellipses is given by x,y

so in the for loop instead of height put height/2

Chrisir

to be super careful, you could first draw all

• on a PGraphics upperHalf (size: width and height/2)

• and the other stuff on a PGraphics lowerHalf (same size)

and then use

image (upperHalf , 0, 0);

and image (lowerHalf, 0, height/2);

at the end of draw()

thus when you draw over the border it won't come out on the screen.

;-)

pafgg

Hey @Chrisir ! Thanks so much, that helped and worked, but how I could then duplicate the effect and be able to have it in the other half (with a different effect of course)!

Chrisir

the simple version without PGraphics just duplcate what you have and set the range of the for-loop so that you use the lower and the upper half (see range of y-values)............ not tested.................

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

}

void draw(){
  background(255);
  int R=10;
  fill(10);
  ellipseMode(RADIUS);
 // upper half 
for (int x=R;x<=width-R;x+=2*R){
  for (int y=R;y<=height/2-R;y+=2*R){
    float d=dist(x,y,mouseX,mouseY);
    float power=d/20;
    if(power>R){
        ellipse(x,y,R,R);
     }else{
       ellipse(x,y,power,power);
    }
  }
 }

//----------------------------------
// lower half 
for (int x=R;x<=width-R;x+=2*R){
  for (int y=height/2+1;y<=height-R;y+=2*R){
    float d=dist(x,y,mouseX,mouseY);
    float power=d/20;
    if(power>R){
        ellipse(x,y,R,R);
     }else{
       ellipse(x,y,power,power);
    }
  }
 }

}

pafgg

@Chrisir Yeah it worked, you definetively saved me! I have changed a bit of the values to avoid the intersection of the effects and it worked! Just one thing..how you could have the effect active only on mouse over?

Chrisir

over what?

Chrisir

after line 14 and line 28 say

if(mouseY < height/2){

or

if(mouseY > height/2){

respectively (either one)

or put one of those inside of line 17 and 31 with && respectively (either one)

Chrisir

when you understand this, you show that you understand your sketch

;-)

pafgg

Sorry I didn't specified! When you have the mouse over the canvas you activate the interaction, when the mouse is off the canvas then I would like to achieve to have it off. So taking your code, I would like to see this:

pafgg

@Chrisir sorry but I didn't understand this:

after line 14 and line 28 say

if(mouseY < height/2){

or

if(mouseY > height/2){

respectively (either one)

or put one of those inside of line 17 and 31 with && respectively (either one)

Chrisir

I figured out how to make it so

• that the one half that doesn't have the mouse doesn't react

only the circles on the half with the mouse change (my approach above was wrooooong btw)

---

how to set all to neutral when mouse is leaving the entire window?

I don't know...

if mouseX <= 0 || >= width... ?

pafgg

How did you do it (that the half that doesn't have the mouse don't react)?

Later I will post a code that have that effetc( set all to neutral when mouse off) but I didn't figure how to use it!!

_vk

What about this one? :)

http://sketchpad.cc/vnNZFa32Sq

pafgg

Wow @_vk ! That's cool..thanks so much!! do you know how to have all neutral when mouse is leaving the window??

_vk

sketchpad.cc seems to be offline, so I don't have that code available. I think what you can do is test for mouse values inside the screen, with a range cause if mouse moves fast it may leave the screen before reaching the actual limit value. Perhaps there is a better solution involving getting host system mouse coordinates. I don't know. Also in js mode I think you can get values in the whole browser window. Anyway, my hackish idea is something like:

void draw(){
  if(isOffScreen(mouseX, mouseY))
  background(255,0,0);
  else
  background(0, 0, 255);
}

boolean isOffScreen(float x, float y){
  return mouseX <=2 || mouseX >= width - 2 || mouseY <= 2 || mouseY >= height -2;
}

_vk

Ok they are back online. I updated the code there with this hackish try :) (and some corrections)

It does not work very well though... here it is:

void setup() {
  size(400, 400);
  smooth();
  ellipseMode(RADIUS);
}

void draw() {
  background(255);
  int R=10;
  fill(10);



  // upper half 
  for (int x=R; x<=width-R; x+=2*R) {
    for (int y=R; y<=height/2-R; y+=2*R) {
      float d=dist(x, y, mouseX, mouseY);
      float power = d/20;

      //conditionally set power to R
      // if mouse in upper half
      if (mouseY > height/2 || isOffScreen(mouseX, mouseY)) {
        power = R;
      }

      // do always! draw the ellipses    
      ellipse(x, y, power, power);
    }
  }

  //----------------------------------
  // lower half 
  for (int x=R; x<=width-R; x+=2*R) {
    for (int y=height/2+1; y<=height-R; y+=2*R) {
      float d=dist(x, y, mouseX, mouseY);
      float power=d/20;

      //conditionally set power to R
      // if mouse in lower half
      if (mouseY < height/2  || isOffScreen(mouseX, mouseY)) {
        power = R;
      }

      // do always! draw the ellipses    
      ellipse(x, y, power, power);
    }
  }
}

boolean isOffScreen(float x, float y) {
  float tolerance = 6.;
  return mouseX <=  tolerance || mouseX >= width - tolerance ||
    mouseY <=  tolerance || mouseY >= height - tolerance;
}

EDIT: Perhaps we could calc the speed and vector of mouse movement and predict if its going to leave the screen, to avoid the ugly 'limit' that not even solves the issue. If I get time I'll try that...

pafgg

Hey @_vk that works amazingly well!!! Wow..superlative!!Thanks! The only thing now it will be to solve the mouse issue when is over..I'll try some tricks later maybe we could share our proof!

_vk

I found this:

http://forum.processing.org/two/discussion/1511/continue-interacting-when-mouse-is-out-of-canvas

pafgg

@_vk I had a look at that, but it didn't work in my sketch!

I have found something like this that worked on another proof, but not in the one you provided from sketchpad:

void mouseMoved() {
  mouseToPgs();
}

void mouseToPgs() {
  int mx = 0, my = 0;
  if (mouseY < height/2) {
    if (mouseX < width/2) {
      mx = mouseX * 2;
      my = mouseY * 2;
    } else {
      mx = (mouseX-width/2) * 2;
      my = mouseY * 2;
    }
  } else {
    if (mouseX < width/2) {
      mx = mouseX * 2;
      my = (mouseY-height/2) * 2;
    } else {
      mx = (mouseX-width/2) * 2;
      my = (mouseY-height/2) * 2;
    }
  }