How to put a shape at determinate coordinates when start running the script MouseFunction\Examples\

sherkhan

Hi, i'm importing some .svg and i used the MouseFuncion\Examples\Processing.org script, the problem is that when running the script all the shapes appears in the same position and so i can only move all togheters. There's any way to impose a starting position for each shape? or to create a kind of levels(like adobe illustrator)

here's the link of the example http://processing.org/examples/mousefunctions.html

best, Filippo

PhiLho

Have you some code to show, so we understand more precisely your problem?

sherkhan

here you are!

PShape A;
PShape B;
float ax;
float ay;
float bx;
float by;
int boxSizea = 100;
int boxSizeb = 100;
boolean overBoxa = false;
boolean lockeda = false;
boolean overBoxb = false;
boolean lockedb = false;
float xOffset = 0.0; 
float yOffset = 0.0; 

void setup() 
{
  size(350, 500);
  colorMode(HSB, 360, 100, 100);
  bx = width/2.0;
  by = height/2.0;
  ax = width/2.0;
  ay = height/2.0;
  rectMode(RADIUS); 
  A = loadShape("Rprocessing.svg");
  B = loadShape("Yprocessing.svg"); 
}

void draw() 
{ 
  background(150);

  // Test if the cursor is over the box 
  if (mouseX > ax-boxSizea && mouseX < ax+boxSizea && 
      mouseY > ay-boxSizea && mouseY < ay+boxSizea) {
    overBoxa = true;  
    if(!lockeda) { 
      stroke(100,100,100); 
      fill(100,100,100);
    } 
  } else {
    stroke(153);
    fill(153);
    overBoxa = false;
  }

  // Test if the cursor is over the box 
  if (mouseX > bx-boxSizeb && mouseX < bx+boxSizeb && 
      mouseY > by-boxSizeb && mouseY < by+boxSizeb) {
    overBoxb = true;  
    if(!lockedb) { 
      stroke(100,100,100); 
      fill(100,100,100);
    } 
  } else {
    stroke(153);
    fill(153);
    overBoxb = false;
  }

  // Draw the box
  A.disableStyle();  // Ignore the colors in the SVG
  fill(45, 45, 100);    // Set the SVG fill to...


  shape(A, ax, ay, boxSizea, boxSizea);

  // Draw the box
  B.disableStyle();  // Ignore the colors in the SVG
  fill(45, 45, 100);    // Set the SVG fill to...


  shape(B, bx, by, boxSizeb, boxSizeb);
}

void mousePressed() {

  if(overBoxa) { 
    lockeda = true; 
    fill(255, 255, 255);
  } else {
    lockeda = false;
  }
  xOffset = mouseX-ax; 
  yOffset = mouseY-ay;

 if(overBoxb) { 
    lockedb = true; 
    fill(255, 255, 255);
  } else {
    lockedb = false;
  }
  xOffset = mouseX-bx; 
  yOffset = mouseY-by;  

}

void mouseDragged() {
  if(lockeda) {
    ax = mouseX-xOffset; 
    ay = mouseY-yOffset; 
  }
    if(lockedb) {
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
  }
}

void mouseReleased() {
  lockeda = false;
  lockedb = false;
}

PhiLho

You should have xOffset / yOffset per shape.

sherkhan

thanks! ;)

sherkhan

Hey... now at void mouseReleased() { it say unexpected tonken: void Can you please comment where i'm falling? What's happening? i'm not a good programmer, sorry... thank you so much!

best, Filippo

PShape A;
PShape B;
float Ax;
float Ay;
float Bx;
float By;
int boxSizeA = 100;
int boxSizeB = 100;
int Brightness = 100;
boolean overBoxA = false;
boolean lockedA = false;
boolean overBoxB = false;
boolean lockedB = false;
float xOffsetA = 0.0; 
float yOffsetA = 0.0;
float xOffsetB = 0.0; 
float yOffsetB = 0.0;

void setup() 
{
  size(350, 500);
  colorMode(HSB, 360, 100, 100);
  Ax = width/2.0;
  Ay = height/2.0;
  Bx = width/2.0;
  By = height/2.0;
  rectMode(RADIUS); 
  A = loadShape("Rprocessing.svg");
  B = loadShape("Yprocessing.svg"); 
}

void draw() 
{ 
  background(150);

  // Test if the cursor is over the boxA 
  if (mouseX > Ax-boxSizeA && mouseX < Ax+boxSizeA && 
      mouseY > Ay-boxSizeA && mouseY < Ay+boxSizeA) {
    overBoxA = true;  
    if(!lockedA) { 
      stroke(100,100,100); 
      fill(100,100,100);
    } 
  } else {
    stroke(153);
    fill(153);
    overBoxA = false;
  }

  // Test if the cursor is over the boxB 
  if (mouseX > Bx-boxSizeB && mouseX < Bx+boxSizeB && 
      mouseY > By-boxSizeB && mouseY < By+boxSizeB) {
    overBoxB = true;  
    if(!lockedB) { 
      stroke(100,100,100); 
      fill(100,100,100);
    } 
  } else {
    stroke(153);
    fill(153);
    overBoxB = false;
  }

  // Draw the box
  A.disableStyle();  
  fill(45, 45, Brightness);   
  shape(R, bx, by, boxSizeA, boxSizeA);

  B.disableStyle();  
  fill(45, 45, Brightness);   
  shape(R, bx, by, boxSizeB, boxSizeB);
}

void mousePressed() {
  if(overBoxA) { 
    lockedA = true; 
    fill(255, 255, 255);
  } else {
    lockedA = false;
  }
  xOffsetA = mouseX-Ax; 
  yOffsetA = mouseY-Ay; 


  if(overBoxB) { 
    lockedB = true; 
    fill(255, 255, 255);
  } else {
    lockedB = false;
  }
  xOffsetB = mouseX-Bx; 
  yOffsetB = mouseY-By; 

}

void mouseDragged() {
  if(lockedA) {
    Ax = mouseX-xOffsetA; 
    Ay = mouseY-yOffsetA;

  if(lockedB) {
    Bx = mouseX-xOffsetB; 
    By = mouseY-yOffsetB; 
  }
}

void mouseReleased() {

  lockedA = false;
  lockedB = false;
}

GoToLoop

You've forgotten to close curly brace pair for the 1st if () {} block within mouseDragged()! :-S

sherkhan

ahauauah! Ok, i know now i'm looking so stupid but i'm more stupid than you can imagine becouse i really don't understand what's PhiLho sayin'... can someone show me where i have to put xOffset / yOffset, is that a math operation or just to say both of them? Sorry i'm bad in english and very very new to forums and programming... :((

sherkhan

No, i wasn't stupid, it wasn't the solution. The solution is to create a class for each drag...

best, Filippo

PhiLho

xOffset and yOffset are variables in your code, already there, you need one for each shape, like you duplicated other variables.

I avoid suggesting to do classes to beginners, because it can be even more confusing. But if you chose this way, all the best!

sherkhan

Sorry but i miss you definition of 'duplicated' , creating xOffsetA and xOffsetB isn't duplicating? 8-X