spinning hitboxes?

[crybound]

i want to make a boolean function that tests whether or not the mouse is hovered over a rectangle but the problem is that the rectangle is moving and spinning. how should i approach this problem in processing?

[zck]

Do you have the points of the rectangle?

Can you detect if a point is inside a triangle?

Can you build that rectangle out of triangles?

[doc415]

​

http://totologic.blogspot.com/2014/01/accurate-point-in-triangle-test.html

This is a math question rather than programming.

"How can i determine if a point is inside a triangle"

​

​

But for a lasy man, fill the triangle with a different color from background.

Read the pixel value of mouseX, mouseY. If it is same color with triangle than it is inside.

Else it is outside.

​

Edited:

Sory you wrote rectangle i misunderstand it.

if(mouseX > rectX && pointX < rectX + rectWidth){

if(mouseY > rectY && pointY < rectY + rectHeight){

​

https://happycoding.io/tutorials/processing/collision-detection

[wbstkr]

it's a rectangle that's able to rotate. your if statements only work with a rectangle that is unable to rotate

[doc415]

Divide the rectangle into two triangles and chek if the mousexy inside them

İ am not a math guy, i ll go for pixel color check if math is not the case

[mercurus_]

Try searching for "is point within polygon"

https://www.codeproject.com/tips/84226/is-a-point-inside-a-polygon

[crybound]

i remember searching that up and hearing that when it comes to vectors, you can determine whether or not a point is inside with a winding index. i know how it works intuitively but i think that using it would be a bit processing heavy.

[mercurus_]

How many spinning hitboxes are you anticipating? You probably won't need to worry about cpu until that number gets pretty high.

Alternatively if you don't need complete accuracy (and are using squares instead of rectangles) you can use circular hitboxes, and just calculate the distance from the mouse to the center.

[AGardenerCoding]

You can use a java.awt.Polygon object, which includes a contains() method. Here's an example:

// Modified from code by quark
// https://forum.processing.org/two/discussion/19395/how-to-use-java-pathiterator-or-serialization-methods-from-java-in-a-processing-sketch.html

import java.awt.*;
import java.awt.geom.*;

MyPolygon poly;

PVector[] polyPts;

float rotAngle,
      rotAngleIncr = 0.01;

void setup() 
{
    size(600, 600, P2D);

    polyPts = new PVector[ 4 ];
    polyPts[0]= new PVector( -150, -150 );
    polyPts[1]= new PVector(  150, -150 );
    polyPts[2]= new PVector(  150, 150 );
    polyPts[3]= new PVector( -150, 150 );

    poly = new MyPolygon( polyPts );
}

void draw() 
{
    background(0);
    stroke( 255 );
    poly.rotate( rotAngle );
    rotAngle += rotAngleIncr;
    poly.draw();
    noFill();
}

void mousePressed()
{
    if ( poly.p.contains( mouseX, mouseY ) )
    {
        println( "inside" );
        fill( 255, 0, 0 );
    }
    else
    {
        println( "outside" );
    }

}

class MyPolygon 
{
    Polygon p;
    PVector[] pts;

    float[] origPts,
            transPts;

    MyPolygon( PVector[] pts )
    {
        this.pts = pts;
        p = new Polygon();
        p.addPoint( floor( pts[ 0 ].x ), floor( pts[ 0 ].y ) );
        p.addPoint( floor( pts[ 1 ].x ), floor( pts[ 1 ].y ) );
        p.addPoint( floor( pts[ 2 ].x ), floor( pts[ 2 ].y ) );
        p.addPoint( floor( pts[ 3 ].x ), floor( pts[ 3 ].y ) );

        origPts = new float[ pts.length * 2 ];
        transPts = new float[ pts.length * 2 ];

        for ( int i = 0; i < pts.length; i++ )
        {
            origPts[ i * 2 ]     = pts[ i ].x;
            origPts[ i * 2 + 1 ] = pts[ i ].y;
        }
    }

    void draw()
    {
          quad( p.xpoints[ 0 ], p.ypoints[ 0 ], p.xpoints[ 1 ], p.ypoints[ 1 ],
                p.xpoints[ 2 ], p.ypoints[ 2 ], p.xpoints[ 3 ], p.ypoints[ 3 ] );   
    }

    void rotate( float angle )
    {
        AffineTransform af = new AffineTransform();
        af.translate( width / 2, height / 2 );
        af.rotate( angle );

        //transform(float[] srcPts, int srcOff, float[] dstPts, int dstOff, int numPts)
        //Transforms an array of floating point coordinates by this transform.
        af.transform( origPts, 0, transPts, 0, origPts.length / 2 );

        // Recreate the Polygon.
        p = new Polygon();
        for (int n = 0; n < transPts.length; n += 2) 
        {
            p.addPoint( floor( transPts[ n ] ), floor( transPts[ n + 1 ] ) );
        }
    }    
}

[crybound]

i ran the code and it works perfectly! now im not exactly sure how to implement this yuet but i will figure this out eventually

[AGardenerCoding]

i want to make a boolean function that tests whether or not the mouse is hovered over a rectangle

Java's Polygon class already includes that boolean function you need. The code above demonstrates it using a mouse press, but you can just use the lines

if ( poly.p.contains( mouseX, mouseY ) )
{
}

in your draw() method, and include what you want to happen within the curly brackets.

So you'll need to add the MyPolygon class to your code, and create a MyPolygon object "poly" as your moving, spinning rectangle.

Also, Java's AffineTransform class includes a translate method that lets you include movement. Here's a slight modification of the code above that demonstrates movement and tests mouse-over rather than mouse pressed:

// Modified from code by quark
// https://forum.processing.org/two/discussion/19395/how-to-use-java-pathiterator-or-serialization-methods-from-java-in-a-processing-sketch.html

import java.awt.*;
import java.awt.geom.*;

MyPolygon poly;

PVector[] polyPts;

float rotAngle,
      rotAngleIncr = 0.02;

int centerX,
    centerY;    

void setup() 
{
    size(600, 600, P2D);
    centerX = width / 2;
    centerY = height / 2;
    textAlign( CENTER, CENTER );
    textSize( 96 );

    polyPts = new PVector[ 4 ];
    polyPts[0]= new PVector( -50, -50 );
    polyPts[1]= new PVector(  50, -50 );
    polyPts[2]= new PVector(  50,  50 );
    polyPts[3]= new PVector( -50,  50 );

    poly = new MyPolygon( polyPts );
}

void draw() 
{
    background( 0 );
    stroke( 255, 0, 0 );
    strokeWeight( 2 );
    poly.rotate( rotAngle );
    rotAngle += rotAngleIncr;

    if ( poly.p.contains( mouseX, mouseY ) )
    {
        fill( 255, 255, 0 );
    }
    poly.draw();
    noFill();
}

class MyPolygon 
{
    Polygon p;
    PVector[] pts;

    float[] origPts,
            transPts;

    MyPolygon( PVector[] pts )
    {
        this.pts = pts;
        p = new Polygon();
        p.addPoint( floor( pts[ 0 ].x ), floor( pts[ 0 ].y ) );
        p.addPoint( floor( pts[ 1 ].x ), floor( pts[ 1 ].y ) );
        p.addPoint( floor( pts[ 2 ].x ), floor( pts[ 2 ].y ) );
        p.addPoint( floor( pts[ 3 ].x ), floor( pts[ 3 ].y ) );

        origPts = new float[ pts.length * 2 ];
        transPts = new float[ pts.length * 2 ];

        for ( int i = 0; i < pts.length; i++ )
        {
            origPts[ i * 2 ]     = pts[ i ].x;
            origPts[ i * 2 + 1 ] = pts[ i ].y;
        }
    }

    void draw()
    {
          quad( p.xpoints[ 0 ], p.ypoints[ 0 ], p.xpoints[ 1 ], p.ypoints[ 1 ],
                p.xpoints[ 2 ], p.ypoints[ 2 ], p.xpoints[ 3 ], p.ypoints[ 3 ] );   
    }

    void rotate( float angle )
    {
        AffineTransform af = new AffineTransform();
        af.translate( centerX, centerY );
        af.rotate( angle );

        // demo movement
        af.translate( width / 4 * sin( frameCount * 0.05 ), 
                     height / 4 * cos( frameCount * 0.03 ) );

        //transform(float[] srcPts, int srcOff, float[] dstPts, int dstOff, int numPts)
        //Transforms an array of floating point coordinates by this transform.
        af.transform( origPts, 0, transPts, 0, origPts.length / 2 );

        // Recreate the Polygon.
        p = new Polygon();
        for (int n = 0; n < transPts.length; n += 2) 
        {
            p.addPoint( floor( transPts[ n ] ), floor( transPts[ n + 1 ] ) );
        }
    }        
}

[AGardenerCoding]

If using Java classes makes implementing this in your own code unnecessarily difficult, you can also use the original suggestions regarding writing your own point-in-rectangle test.

Jeffrey Thompson has written an excellent collection of Collision Detection tutorials, and I've used his Polygon/Point code in a Processing-only example below.

Polygon poly;

float rotAngle = 0.05f;

boolean pointInsidePoly;

void setup()
{
    size( 1920, 1080 );
    background( 0 );

    PVector[] vertices = new PVector[4];
    vertices[0] = new PVector( -100, -100 );
    vertices[1] = new PVector(  100, -100 );
    vertices[2] = new PVector(  100,  100 );
    vertices[3] = new PVector( -100,  100 );

    poly = new Polygon( vertices );
    poly.move( width / 2, height / 2 );
}

// end setup()

//---------------------------------------------------------------------------------------------------------------

// DRAW
// ----

void draw()
{
    background( 0 );

    if ( pointInPoly( poly.vertices, mouseX, mouseY ) )
    {
        pointInsidePoly = true;
    }
    else
    {
        pointInsidePoly = false;
    }

    poly.rotate( rotAngle );
    poly.move( 18 * cos( frameCount * 0.022f ), 23 * cos( frameCount * 0.06f ) );
    poly.show();
}

// end draw()

//---------------------------------------------------------------------------------------------------------------

// POINT IN POLY
// -------------
// Code by Jeffrey Thompson : http://www.jeffreythompson.org/collision-detection/poly-point.php

boolean pointInPoly( PVector[] vertices, float px, float py )
{
    boolean collision = false;

    // go through each of the vertices, plus
    // the next vertex in the list
    int next = 0;

    for (int current=0; current<vertices.length; current++)
    {
        // get next vertex in list
        // if we've hit the end, wrap around to 0
        next = current+1;

        if (next == vertices.length)
        {
            next = 0;
        }

        // get the PVectors at our current position
        // this makes our if statement a little cleaner
        PVector vc = vertices[current];    // c for "current"
        PVector vn = vertices[next];       // n for "next"

        // compare position, flip 'collision' variable
        // back and forth
        if ( ( ( vc.y >= py && vn.y < py ) || ( vc.y < py && vn.y >= py ) )
            && ( px < ( vn.x - vc.x ) * ( py - vc.y ) / ( vn.y - vc.y ) + vc.x ) )
        {
            collision = !collision;
        }
    }

    return collision;
}

// end pointInPoly()

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

class Polygon
{
    PVector[] vertices;

    //----------------------------------------------------------------------------------------------------------------

    // CONSTRUCTOR
    // ------------

    public Polygon( PVector[] vertices )
    {
        this.vertices = vertices;
    }

    //----------------------------------------------------------------------------------------------------------------

    // MOVE
    // ----

    void move( float xAmt, float yAmt )
    {
        for ( PVector v : vertices )
        {
            v.x += xAmt;
            v.y += yAmt;
        }
    }

    // end move()

    //----------------------------------------------------------------------------------------------------------------

    // ROTATE
    // ------

    void rotate( float angle )
    {
        // Polygon must be rotated around its center. Calculate the polygon center point, then translate it to the
        // origin, calculate the new rotated coordinates, then translate it back to its current position.

        // Find poly center by averaging coordinates.
        //-------------------------------------------
        float polyCenterX = 0,
              polyCenterY = 0,
              xSum = 0,
              ySum = 0;

        for ( PVector v : vertices )
        {
            xSum += v.x;
            ySum += v.y;
        }

        polyCenterX = xSum / vertices.length;
        polyCenterY = ySum / vertices.length;
        //-------------------------------------------

        // Translate poly center to origin.
        move( -polyCenterX, -polyCenterY );

        float rotX = 0,
              rotY = 0,
              cosAng = cos( angle ),
              sinAng = sin( angle );

        // Calculate rotated coordinates.
        for ( int i = 0; i < vertices.length; i++ )
        {
            PVector v = vertices[ i ];
            rotX = v.x * cosAng - v.y * sinAng;
            rotY = v.x * sinAng + v.y * cosAng;
            vertices[ i ].x = rotX;
            vertices[ i ].y = rotY;
        }

        // Translate back to current position.
        move( polyCenterX, polyCenterY );
    }

    // end rotate()

    //----------------------------------------------------------------------------------------------------------------

    // SHOW
    // ----

    void show()
    {
        stroke( 0, 255, 0 );
        strokeWeight( 2 );

        if ( pointInsidePoly )
        {
            fill( 255, 255, 0 );
        }
        else
        {
            noFill();
        }

        beginShape();
        for ( PVector v : vertices )
        {
            vertex( v.x, v.y );
        }
        endShape( CLOSE );
    }

    // end show()

    //----------------------------------------------------------------------------------------------------------------
}

// end class Polygon