angle = 0;
open = false;
closed = false;
var door;

function setup() {
  createCanvas(500,500, WEBGL);
}
function openSesame(){
    if(open){
        if(angle > (PI/4)){
            running = false;
            rotateZ(PI/4);
        } else{
        rotateZ(angle);
        }
    } else {
        // rotateZ(PI/4);
    }
}



function draw() {
    // print(mouseX + ' ' + mouseY);
    background(175);
    rectMode(CENTER);
    fill(0, 255,255);
    //rect(0,0,150,200);
    rotateX(PI/6);
    rotateY(-PI/4);
    box(100);

    fill(0,0,0);
    translate(0,50,50);
    rotateY(PI/2);

    openSesame();
    translate(-5,-50,0);
    door = box(10,100,100);
    angle += .01;


}
function mousePressed() {

    if ((mouseX > (width/2 - 50) && mouseY > (height/2 - 50))
    && (mouseX < (width/2 + 50) && mouseY < (height/2 + 50))){
        print("ok");
        if(open){
            open = false;
            closed = true;
        }else{
            open = true;
            closed = false;
        }
    }
}

I have been trying to solve this problem for hours. What I am aiming for is that I move the grid that is underlying the Processing screen to where my mouse is clicked, so that I can draw something from here that grows as I move the mouse.

Could you guys help me with this? Thank you so much!

Cheers~

I'm exporting my 3D scene to PDF/DXF, but EVERYTHING in that scene is included in the output, including everything that is not visible to the camera. This makes sense I guess, but is there anyway of excluding shapes that are not visible to the camera view?

I could simply not draw certain shapes if I knew if something was in camera view or not I guess, so is there a way to test if a PVector is in view?

Thanks!

I'm trying to make a game in which an image (a humanoid figure) can be flown through space to grab a circular gem. The figure can be accelerated and rotated as it moves. The figure's hand includes a "hit circle" centered on the hand with a given diameter. When the hit circle collides with the gem, the gem should disappear.

The following code gives me a hit circle which positions correctly as the figure moves and rotates. (The hand is to the right and below the center of the image at setup.)

  imageMode(CENTER); 
  pushMatrix(); 
  translate(figX, figY); 
  rotate(radians(figAng)); 
  image (figViz, 0, 0); 
  ellipse(handX, handY, handDia, handDia); 
  popMatrix(); 

I was doing fine until I tried to use dist() to check for a collision:

    if (dist(figX + handX, figY + handY, gemX, gemY) < gemDia/2 + handDia/2 ) {
        gotGem = true;
        println("Huzzah!");
    }

This does not produce a collision whether I check within the push/popMatrix() code or outside of that code. Can anyone suggest what I am doing incorrectly or direct me to some resource that explains how to detect collisions between circles when one is being rotated around an exterior point?

Thanks much, L

float rotation = 1;
stepSize = 10;

void setup() { 
  size(800, 800);
  textSize(60);
}

void draw() { 
  background(255);
  strokeWeight(2);
  fill(255, 0, 0);
  rect(100, 100, 300, 300);
  fill(0, 96, 255);
  rect(100, 400, 300, 300);
  fill(255, 240, 0);
  rect(400, 100, 300, 300);
  fill(0, 255, 0);
  rect(400, 400, 300, 300);
  strokeWeight(20);

  pushMatrix();
  translate(400, 400);
  rotate(radians(rotation));
  line(0, 0, 100, 100);
  popMatrix();
  if (stepSize > 0) {
    rotation += stepSize;
    stepSize -= 0.05;
  }

}

void mousePressed() {
  stepSize = random(5, 15);
}

However, I want to be able to determine what color the user landed on after the spinner is done and print that to the screen. For example: the spinner lands on the red box, so the screen prints out "You have landed on Red!". I have been reading about matrices and affine transformations, but I'm confused how they would pertain to this code.

I am trying to be able to click on a sphere in a 3D sketch with the mouse to select a sphere.

Since I use rotate and translate when placing the sphere, I wanted to use modelX,modelY to get the model position. But to have a match with the mouse I need ScreenX,ScreenY. Or so I am guessing.

Not sure how to handle this though:

this is part of class that in turn is stored in ArrayList to hold all the spheres:

    pushMatrix(); 
      translate(x, y, z); 

      fill(col); 
      noStroke(); 

      if (showBox||true) {     
        //box(55);
        //ellipse(0, 0, 7, 7);
        sphere(7);

        // the sphere / box was drawn at (0, 0, 0), store that location
        float x1 = modelX(0, 0, 0); // this takes care of translate and rotate 
        float y1 = modelY(0, 0, 0);
        float z1 = modelZ(0, 0, 0);

        scX = screenX(x1, y1, z1); // this takes care of the projection into 2D space for the mouse
        scY = screenX(x1, y1, z1);
      }
      popMatrix(); 

I now want to match scX and scY with mouseX and mouseY:

void mousePressed() {

  PVectorInt result = new PVectorInt(0, 0, 0);

  for (int i = 0; i < boxes.length; i++) {
    for (int j = 0; j < boxes[i].length; j++) {
      for (int k = 0; k < boxes[i][j].length; k++) {

        if (dist(mouseX, mouseY, boxes[i][j][k].scX, boxes[i][j][k].scY) < 40) {
          result = new PVectorInt( i, j, k); 
          listShape.add ( new  PVectorInt( i, j, k)); 
          println(listShape.size());
          return;
        }
      }
    }
  }
}

but it doesn't work....

please tell me how I handle modelX and screenX

thank you...!

Chrisir

What I want is to use the mouse's position(mouseX mouseY) to determine the position of point's Z axis (height) to be visually in the same position as my mouse.

is there any function to counter-screenX & screenY...? (sort of sine - arcsine..if it can explain it less confusing..)

Let's say the position I would like to alter is

PVector pos = point.x, point.y, point.z

and I want the point.z be altered by mouseX and mouseY.. so it should be something like

if(mouseClicked)
{
point.z = counterScreen(mouseX, mouseY);.....
}

I'm trying to detect a point-triangle collision using this tutorial: http://www.jeffreythompson.org/collision-detection/tri-point.php . But my sketch is 3d, so I translating a 3d coorinates in 2d using screenX() and screenY(). The problem is that when my mouse is inside of triangle, sometimes the resulting "hit" color is blinking and I have "no hit" message. Can't understand why the collision is not working properly, it must be "hit" all the time my mouse is inside of thiangle. Any suggestions? Thanks.

import peasy.*;
PeasyCam jcam;

ArrayList <Point> points = new ArrayList <Point>();
ArrayList <Triangle> triangles = new ArrayList <Triangle>();

void setup()
{
  size(800, 800, P3D);
  smooth();
  jcam = new PeasyCam(this, 200);

  color tempColore=color(255, 255, 255);

  PVector v1= new PVector(0, 0, 0);
  Point pt1 = new Point(v1, tempColore);
  points.add(pt1);

  PVector v2= new PVector(100, 0, 0);
  Point pt2 = new Point(v2, tempColore);
  points.add(pt2);

  PVector v3= new PVector(0, 100, 0);
  Point pt3 = new Point(v3, tempColore);
  points.add(pt3);

  PVector v4= new PVector(100, 0, 0);
  Point pt4 = new Point(v4, tempColore);
  points.add(pt4);  

  PVector v5= new PVector(100, 100, 0);
  Point pt5 = new Point(v5, tempColore);
  points.add(pt5);

  PVector v6= new PVector(0, 100, 0);
  Point pt6 = new Point(v6, tempColore);
  points.add(pt6);


  //triangles initialize
  for (int i=0; i<points.size(); i=i+3)
  {
    Triangle tr = new Triangle(points.get(i).pos, points.get(i+1).pos, points.get(i+2).pos);
    triangles.add(tr);
  }

}

boolean triPoint(float x1, float y1, float x2, float y2, float x3, float y3,float mx, float my) 
  {
    // get the area of the triangle
    float areaOrig = abs( (x2-x1)*(y3-y1) - (x3-x1)*(y2-y1) );

    // get the area of 3 triangles made between the point
    // and the corners of the triangle
    float area1 =    abs( (x1-mx)*(y2-my) - (x2-mx)*(y1-my) );
    float area2 =    abs( (x2-mx)*(y3-my) - (x3-mx)*(y2-my) );
    float area3 =    abs( (x3-mx)*(y1-my) - (x1-mx)*(y3-my) );

    // if the sum of the three areas equals the original,
    // we're inside the triangle!
    if (area1 + area2 + area3 == areaOrig) 
    {
      return true;
    }
    return false;
  }


void draw()
{
  background(150);

  for (int i = triangles.size ()-1; i >= 0; i--)
  { 
    color tempColore=0;

    float ax = screenX(triangles.get(i).A.x,triangles.get(i).A.y);
    float ay = screenY(triangles.get(i).A.x,triangles.get(i).A.y);
    float bx = screenX(triangles.get(i).B.x,triangles.get(i).B.y);
    float by = screenY(triangles.get(i).B.x,triangles.get(i).B.y);
    float cx = screenX(triangles.get(i).C.x,triangles.get(i).C.y);
    float cy = screenY(triangles.get(i).C.x,triangles.get(i).C.y);
    float mx = mouseX;
    float my = mouseY;

    boolean hit = triPoint(ax,ay,bx,by,cx,cy,mx,my);

    if(hit==true)
    {
      tempColore = #A57066;
      println("hit");
    }
    else
    {
      tempColore = #CEBE9A;
      println("no hit");
    }
    triangles.get(i).display(tempColore);
  }


  for (int i = points.size ()-1; i >= 0; i--)
  { 
    points.get(i).display();
  }

}


class Point
{
  PVector pos;
  color colore;


  Point(PVector posIn, color coloreIn)
  {
    pos = posIn;
    colore=coloreIn;
  }

  void display()
  {
    colorMode(RGB);
    noStroke();
    fill(colore);
    pushMatrix();
    translate(pos.x,pos.y,pos.z);
    box(1);
    popMatrix(); 
  }
}


class Triangle
{
  PVector A, B, C;
  color colore;

  Triangle (PVector Ain, PVector Bin, PVector Cin)
  {
    A=Ain;
    B=Bin;
    C=Cin;
  }

  void display(color coloreIn)
  {
    colore = coloreIn;
    fill(colore);
    beginShape(TRIANGLE);
    stroke(255,20);
    strokeWeight(2);
    vertex(A.x,A.y,A.z);
    vertex(B.x,B.y,B.z);
    vertex(C.x,C.y,C.z);
    endShape();
  }
}

I have used rotate() and translate() to move around the canvas, however, the mouseX and mouseY properties are still relative to the top left of the canvas. Is there any way to get them relative to the translated and rotated position?

Thanks, Joseph.

P.S. let me know if you need any code samples.

My code so far-

import peasy.*;

PeasyCam cam;

float x = 0, y = 0,z = 0;

void setup(){
  size(720, 720, P3D);
  cam = new PeasyCam(this, 200);
}

void draw(){
  translate(x, y, z);
  sphere(100);//being minimalistic

  x += sin(y);//random methods, real code is different
  y += cos(z);
  z += random(1);

  println(mouseOverSphere(x, y, z, 100);
}

boolean mouseOverSphere(float posX, float posY, float posZ, float size){
  //What to do here??
}

In 3d sketches null of coordinares begins here (green number "1"), how to make it begin there (green number "2"), like in 2d sketches? I realize that mouseX and mouseY not working properly because beginning of coordinates is not in the upper left corner.

I have a little square I want to rotate and position it inside a bigger square. I then want to connect verticies from the bigger square to the smaller one. I don't know how to get the position of the rotated vertices.

I found this article: http://math.stackexchange.com/questions/270194/how-to-find-the-vertices-angle-after-rotation

I will try this, but wondered if processing had any built in geometry methods to make it easier.

Thanks in advance.

Dave

I was wondering, if I were to rotate a PShape then use screenX to check a point on the Pshape, should the same co-ordinate be returned - ie. should the co-ordinates be relative to the shape before and after the transformation?

For example, the shape below is drawn and the co-orinates of the red pixel noted (say, x=10 y=10).

A rotate is then performed on it

Then using screenX, should the red pixel still be at the same co-ordinates (x=10, y=10)?

I hope this makes some sense!

Thanks!

You can see an Instagram vid example here: http://brendandawes.com/blog/07-31-471

Any help would be great. Incidentally I did something similar when using Three.js but I could get the projection matrix, with he p5.js one I'm not sure how I get that.

This is, of course, part of the continual conundrum we intro level teachers face as we try to show learners without great math skills that programming is do-able and even fun: is the code to invert the Y axis unobtrusive enough so that we can use the coordinate system my students (kind of) already know or must I teach them "computer coordinates" which are the undoing of half of what my math colleagues have labored to teach them?

[Apologies: frustrated rant to follow]

In creating his brilliant Python Graphics module, John Zelle included a function which transforms coordinates (any way you want) for an entire program with just a single, short line of code you put in at the start. Now I know Python is not a great language for writing video games, but this graphics module nonetheless demands consideration by all teachers of "diverse learners" because you don't have to work against what students have already struggled to learn, i.e. - that Y 'moves' upwards positively and downwards negatively. At the start of every class you don't have to remind them how computers do it differently. You don't have to double the number of vectors students are storing in memory. You don't have to send them off to their math classes or state exams with inverted directions rattling around in their brains. (With graduations now pinned to ever more finicky standardized exams, this is not a small thing.) IF PROCESSING IS SUCH A WONDROUS TEACHING LANGUAGE, HOW ON EARTH COULD SOMEONE NEGLECT TO INCLUDE A SIMILAR COORDINATE SETTING FUNCTION?

[Apologies once more; question resumes]

So, I've seen that perhaps a solution exists using pushMatrix() and popMatrix(), but I haven't been able to make that work. Additionally, I can probably leave my students unconfused by a couple of instances of scale() and translate(), but adding pushMatrix() and popMatrix() with indented code nested between them probably adds more distraction than teaching them the inverted Y concept.

Can anyone share code for aligning inverted Y coordinates across draw() and mousePressed()? With much respect and hope that the misunderstanding is mine, Brooklev

pushMatrix();
translate(width/2, height/2);
rotate(radians(270));
text("test",10,20);
popMatrix();

It is printing the text as I want, the question is how do I get the "real" location of the text? I want to check a mouse over and I don't know where it is :)

Thank you in advance.

Here is my little drawing sketch. Please, run and draw something on a canvas. I want to add something like "lock pixels" function, so if this function is on, the brush have to draw strokes only on colorful pixels of a canvas, and do not draw on black pixels. I tried to compare the pixels using "get" function, but the problem is that processing thinks my brush pixels coordinates (brush_X and brush_Y) is in the top left corner, even after translation an rotation. So, I can't compare brush pixels with canvas pixels. Any suggestions of how to make "lock pixels" function?

I have a sketch that creates a 3d object much like an arrow that is rotated from the middle of its axis driven by two sensors. I am trying to get the vertex data of the tip of the 3D arrow in order to drive another function within the script. Where the 3D arrow is pointing to on the screen, I want it to effect the color of the background. Is anyone able to help me find a way of getting the data of the moving 3D tip of the arrow so I can achieve the desired result?

Right now, I'm accomplishing this with a transformation matrix called before drawing all the buttons. However, this breaks all my mouse handling (as the buttons now don't know where they are located on the screen). What is the "right" way to deal with this? Should I just be updating each button's location internally every time the window is resized? Or is there some way to apply an inverse matrix transform to the mouse coordinates before passing them?

push(); // Start head placement.
    translate( headPosition[0], headPosition[1] );
    rotate(headRotation);
    translate( -headPosition[0], -headPosition[1] );

    push(); // Start Eye1 placement.
      translate( eye1Position[0], eye1Position[1] );
      image(imgEye, 0, 0);
    pop(); // End Eye1 placement.

    push(); // Start Eye2 placement.
      translate( eye2Position[0], eye2Position[1] );
      image(imgEye, 0, 0);
    pop(); // End Eye2 placement.

    image(imgHead, 0, 0);
pop(); // End head placement.

So basically using a chain of push/pop matrix to place layers in relation to each other. Is there an easy way to find my global position?

If you did something like this,

push()
  translate(100, 100);
  a = retrieveGlobalPosition();
  push()
    translate(150, -66);
    push();
      translate(-27, 50);
      b = retrieveGlobalPosition();
    pop();
    c = retrieveGlobalPosition();
  pop();
pop();

then a should be [100, 100]. b should be [223, 84] and c should be [250, 34]. Or something along those lines. Hopefully that makes sense. So I want to be able to easily tell where an eye is located on the canvas and make calculations based on this position.

Is this possible? Or is there a better way to achieve this? Maybe using p5.Vector ?

This is fairly simple arithmetic when all you're doing is translating, and you could probably just keep track of your transforms via a variable. But once you start using rotate() as I did in my first example its going to get very complicated.

Eventually I think it would make sense to start parenting these objects to each other but my programming skills are not there yet.

Like what I said in the title. I create a 3D box in a 3D coordinate system, then I change the camera setting to see from different angels. On my screen (absolutely it's 2D), the box appears at different positions. I'd like to get it's center pointer position on the screen displayed by x and y just like a 2D drawing. Any ideas?

Thank you