How Do I Make the Objects Tween Based on Collision with Mouse?

Programming Questions

steveblue

How Do I Make the Objects Tween Based on Collision with Mouse?

in Programming Questions • 2 years ago

When I originally wrote this in Actionscript 3.0 that line of code was rather beautiful, now I'm wondering how to accomplish the same with Processing. I've come a long way with my first Processing Sketch, but I am up against a wall with figuring out how to make the objects move based on mouse input. I would like the dollar bills to translate to a new position over time (tween) on mouseover. I have the Tween library, but I plan on porting this sketch over to processing.js so I'm guessing that option is out. Am I correct that processing.js can't rely on external libraries? I was thinking a for loop that updates translation over time would work, but how do I write a conditional that asks if each objects area is equal to mouse position then tween?

DIE FLASH! DIE!

Electronic Artist
Los Angeles, CA

/**
* Chasing the Almighty Dollar
*
* Dollar Bills are Displayed on the Canvas and the User Can try to Grab Them, But When They do The Bills Just Fly Away
* by Steve Belovarich
* To view Steve's Electronic Artwork, visit http://installationspace.com
*/
PFont fontA;
PImage a; // Declare variable "a" of type PImage
int dolSize = 4;
void setup() {
size(1000, 800);
// The file "jelly.jpg" must be in the data folder
// of the current sketch to load successfully
a = loadImage("100-dollar-bill.jpg"); // Load the image into the program
Display myDisplay = new Display();
translate(width/2, height/2);
fontA = loadFont("Georgia.vlw");
// Set the font and its size (in units of pixels)
textFont(fontA, 22);
smooth();
//noLoop(); // Makes draw() only run once
} //end of setup
void draw() {
// text("Chasing the Almighty Dollar", 16, 740);
}
class Display {
Bill[] billArray;
Display() {
billArray = new Bill[24]; //where 4 is the same number as the one in your for-loop
build();
}
void build() {
for ( int i = 0; i < 24; i++ ) {
float rotin = random(PI);
float xin = random(100,width-100);
float yin = random(100,height-100);
billArray[i] = new Bill(rotin,xin,yin);
}
}
}
class Bill {
Bill(float ang, float x, float y) {
float angle = ang;
float imgPosX = x;
float imgPosY = y;
pushMatrix();
translate(imgPosX,imgPosY);
rotate(angle);
translate(-a.width/2, -a.height/2);
//translate((a.width/dolSize)/2, (a.height/dolSize)/2);
//line(0, 0, width, 0);
//line(0, 0, 0, height);
//ellipse(0, 0, 30, 30);
//ellipse((a.width/dolSize), 0, 30, 30);
//ellipse(0, (a.height/dolSize), 30, 30);
//ellipse((a.width/dolSize), (a.height/dolSize), 30, 30);
stroke(0);
fill(0);
rect(0, 0, (a.width/dolSize)+1, (a.height/dolSize)+1);
image(a, 0, 0, a.width/dolSize, a.height/dolSize);
//ellipse((a.width/dolSize)/2,(a.height/dolSize)/2, 100, 100);
popMatrix();
}
} //end Class Bill
void mouseMoved() {
println("MouseX =" + mouseX);
println("MouseY =" + mouseY);
} // end void MouseMoved

POP THIS IMAGE IN THE SAME LOCATION AS THE SKETCH:

Replies(13)

PhiLho

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

Well, sorry, but your description is a bit vague ("that line of code was rather beautiful", what is "that"?).
You have plenty of sketches doing something like what you describe, if I understood it correctly. For example, the Easing sample sketch coming with Processing shows how to make a shape to react to mouse position with non-linear move.

Some general advises:
- Reduce a bit your indentation, or, if you use tabs, convert them to spaces before pasting in a browser, they don't like tabs (converting them blindly to 8 spaces, which is too much).
- Your classes are a bit strange, looking more like functions than classes, as they don't have fields (their own variables), and everything is done in the constructor.
- Avoid "magic numbers". Use constants. For example, you have an array of some size, use it in your loop, not an arbitrary number that can be wrong if you change the size later. Same for the margins: putting them in a constant eases experimentations as you can change it in only one place.
- " a for loop that updates translation over time" isn't a good method: think of draw() as providing your for loop instead, the body of draw() being the body of the loop.

steveblue

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

Ok, great suggestions. I've reposted the code below cleaned up a bit. You are right, I was using classes where functions are more appropriate. What this code does is build a variable number of dollar bills onto the canvas. Each dollar bill is constructed in the Bill Class, which uses the image included in my original post. Every new Bill is placed in an Array. I used this method so I could hopefully call the array and in turn manipulate each Bill. This is where I am at a dead end. I do not know how to update each Bill after it is drawn. Basically, when someone hovers over a dollar bill it should tween to a new x and y position. The Easing Example is great, I just dont know how to apply that example to an object. Any help is greatly appreciated.

In Actionscript 3.0, you can add an event listener to a called object and then perform a function in the event that listener is triggered. This is what I meant by the one line of code.

This is the ActionScript 3.0 I basically want to translate to Processing but cant figure out how.

dol.addEventListener(MouseEvent.MOUSE_OVER, flyAway); // startup Interaction

}

public function flyAway(evt:MouseEvent): void {

trace ("move!");

var subX:uint = 0;

var subY:uint = 0;

newX = Math.random() * 850;

newY = Math.random() * 500;

trace("NewX + Y:");

trace(newX, newY);

var dolXTween:Tween = new Tween(dol, "x", Strong.easeOut, xPos, newX, 5, true);

xPos = newX;

var dolYTween:Tween = new Tween(dol, "y", Strong.easeOut, yPos, newY, 5, true);

yPos = newY;

var myTweenRotation1:Tween = new Tween(dol, "rotation", Strong.easeOut, rotate, Math.random()*365, Math.random()*2, true);

}

Thats the Actionscript, here's the new Processing Code without the described functionality I'm looking for, commented where I'm stuck:

/**
* Chasing the Almighty Dollar
*
* Dollar Bills are Displayed on the Canvas and the User Can try to Grab Them, But When They do The Bills Just Fly Away
* by Steve Belovarich
* To view Steve's Electronic Artwork, visit http://installationspace.com
*/
PFont fontA;
PImage a; // Declare variable "a" of type PImage
int dolSize = 4;
float angle = 0;
float imgPosX = 0;
float imgPosY = 0;
int billNumber = 24;
Bill[] billArray;
void setup() {
size(1000, 800);
a = loadImage("100-dollar-bill.jpg"); // Load the image into the program
fontA = loadFont("Georgia.vlw");
// Set the font and its size (in units of pixels)
textFont(fontA, 22);
display(); // Displays the billNumber of Bills onto the Canvas
smooth();
//noLoop(); // Makes draw() only run once
} //end of setup
void draw() {
for ( int i = 0; i < billNumber; i++ ) {
// How Do I Find if the Mouse is Hovering Over billArray[1], billArray[2], etc? I assume this would call another function
// How do I update an existing Bills position?
}
text("Chasing the Almighty Dollar", 16, 740);
}
void display() { // Creates an Array of Bills and Builds Them
billArray = new Bill[billNumber]; //where the number is the same number as the one in your for-loop
build();
}
void build() { // Feeds the variables for Each Bill into the Bill Class and Assigns a new Bill to a member of the billArray
for ( int i = 0; i < billNumber; i++ ) {
float rotin = random(PI);
float xin = random(100,width-100);
float yin = random(100,height-100);
billArray[i] = new Bill(rotin,xin,yin);
}
}
class Bill { // The Bill Class, Constructs Each Bill
Bill(float ang, float x, float y) {
angle = ang;
imgPosX = x;
imgPosY = y;
pushMatrix();
translate(imgPosX,imgPosY);
rotate(angle);
translate(-a.width/2, -a.height/2);
stroke(0);
fill(0);
rect(imgPosX, imgPosY, (a.width/dolSize)+1, (a.height/dolSize)+1);
image(a, imgPosX, imgPosY, a.width/dolSize, a.height/dolSize);
popMatrix();
}
} //end Class Bill

steveblue

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

I think I figured out the biggest problem to my code, The Display() function was basically superfluous so I built it into the Setup() function similar to Example 43-10 in the Processing Handbook. The Bills are built at Setup, but instead are displayed in void loop and moved. The biggest block I have though is getting the mouse to influence the behavior of the dollar bills. I'm definite this interactivity should be built into the move() funtion, but I dont know how to do a mouseOver on a dollar bill. What's in void move() right now is just for testing purposes.

/**
* Chasing the Almighty Dollar
*
* Dollar Bills are Displayed on the Canvas and the User Can try to Grab Them, But When They do The Bills Just Fly Away
* by Steve Belovarich
* To view Steve's Electronic Artwork, visit http://installationspace.com
*/
PFont fontA;
PImage a; // Declare variable "a" of type PImage
int dolSize = 6;
int billNumber = 48;
Bill[] billArray = new Bill[billNumber]; //where the number is the same number as the one in the for-loops
void setup() {
size(1000, 800);
// @pjs preload must be used to preload the image
/* @pjs preload="100-dollar-bill.jpg"; */
a = loadImage("100-dollar-bill.jpg"); // Load the image into the program
fontA = loadFont("Georgia.vlw");
// Set the font and its size (in units of pixels)
textFont(fontA, 22);
for ( int i = 0; i < billNumber; i++ ) { // for loop displays all the Dollar Bills and Stores them in an Array
float rotin = random(PI);
float xin = random(100,width-100);
float yin = random(100,height-100);
billArray[i] = new Bill(rotin,xin,yin);
}
smooth();
//noLoop(); // Makes draw() only run once
} //end of setup
void draw() {
background(255);
for ( int i = 0; i < billNumber; i++ ) {
billArray[i].move(); // Move each object
billArray[i].display(); // Display each object
}
text("Chasing the Almighty Dollar", 16, 740);
}
class Bill { // The Bill Class, Constructs Each Bill
float angle = 0;
float imgPosX = 0;
float imgPosY = 0;
Bill(float ang, float x, float y) {
angle = ang;
imgPosX = x;
imgPosY = y;
}
void move() {
imgPosX = imgPosX +4;
}
void display() {
pushMatrix();
translate(imgPosX,imgPosY);
rotate(angle);
translate(-a.width/2, -a.height/2);
stroke(0);
fill(0);
rect(imgPosX, imgPosY, (a.width/dolSize)+1, (a.height/dolSize)+1);
image(a, imgPosX, imgPosY, a.width/dolSize, a.height/dolSize);
popMatrix();
}
} //end Class Bill

Electronic Artist
Los Angeles, CA

blindfish

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

There are two separate questions here:

1. How do you tween Objects?
I think that has more or less been answered.

2. How do you check for collision with the mouse?
That has also been answered rather often on the forums (if not this one then check the old ones). Processing has no handy hitTest() methods like you have with Flash MovieClips; so you have to do it the hard way: i.e. check whether the mouse position coincides with the position of your object... Search and you shall find :)

One word of warning though: your use of translate() and rotate() might make things a little less straightforward...

PhiLho

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

" In Actionscript 3.0, you can add an event listener to a called object and then perform a function in the event that listener is triggered"
Well, Processing is at much lower level of abstraction... You don't have graphical entities that can react on their own, you have only graphics primitives, and to see if mouse interacts with them, you have to check the bounds with the mouse coordinates. Which can be harder, indeed, as blindfish points out, if the bills are rotated. One technique used is to use an off-screen map of silhouettes of distinct colors: if the position is over a color, it is over the corresponding object.

steveblue

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

Thanks for your tips. I think I've got the basic sketch down now, just gotta perfect the animation. I drew an invisible circle around the mouse and check to see if the distance between it and the position of the bill is less than the radius of the circle. The tween is triggered if it is. The sketch uses the ijeomamotion library for tweening on a bezier curve. I may have to simplify the tweening for processing.js, but here it is:

/**
* Chasing the Almighty Dollar
*
* Dollar Bills are Displayed on the Canvas and the User Can try to Grab Them, But When They do The Bills Just Fly Away
* by Steve Belovarich
* To view Steve's Electronic Artwork, visit http://installationspace.com
*/
import processing.core.*;
import ijeoma.geom.bezier.*;
import ijeoma.motion.*;
import ijeoma.motion.tween.bezier.*;
PFont fontA;
PImage a; // Declare variable "a" of type PImage
int dolSize = 4;
int billNumber = 88;
Bill[] billArray = new Bill[billNumber]; //where the number is the same number as the one in the for-loops
Bezier2D[] bezierArray = new Bezier2D[billNumber];
TweenBezier2D[] tweenArray = new TweenBezier2D[billNumber];
void setup() {
size(1000, 800);
// @pjs preload must be used to preload the image
/* @pjs preload="100-dollar-bill.jpg"; */
a = loadImage("100-dollar-bill.jpg"); // Load the image into the program
fontA = loadFont("Georgia.vlw");
// Set the font and its size (in units of pixels)
textFont(fontA, 22);
for ( int i = 0; i < billNumber; i++ ) { // for loop displays all the Dollar Bills and Stores them in an Array
float rotin = PI/random(-12,12);
float xstart = random(50,900);
float ystart = random(100,700);
int tag = i;
int xend = width+300;
int yend = height+300;
bezierArray[i] = new Bezier2D(this, xstart, ystart, xstart+int(random(-10,10)), ystart+int(random(-10,10)),width-int(random(200)),height-int(random(200)),xend,yend);
Motion.setup(this);
tweenArray[i] = new TweenBezier2D(bezierArray[i], 0f, 1f, 100f);
billArray[i] = new Bill(rotin,xstart,ystart,xend,yend,tag);
}
smooth();
//noLoop(); // Makes draw() only run once
} //end of setup
void draw() {
background(255);
for ( int i = 0; i < billNumber; i++ ) {
billArray[i].move(); // Move each object
billArray[i].display(); // Display each object
}
text("Chasing the Almighty Dollar", 16, 740);
}
class Bill { // The Bill Class, Constructs Each Bill
float angle = 0;
float imgPosX = 0;
float imgPosY = 0;
float imgWidth = a.width/dolSize;
float imgHeight = a.height/dolSize;
float hoverX = 0;
float hoverY = 0;
int endTweenX = 0;
int endTweenY = 0;
public int billtag = 0;
int trigger = 0;
Bill(float ang, float x, float y, int xend, int yend, int tag) {
angle = ang;
imgPosX = x;
imgPosY = y;
endTweenX = xend;
endTweenY = yend;
billtag = tag;
}
public void move() {
int ellipseRadius = 120;
float xin = mouseX;
float yin = mouseY;
fill(0, 0, 0, 0);
stroke(0,0,0,0);
ellipse(xin,yin, ellipseRadius, ellipseRadius);
float newrot = PI/random(-12,12);
if (trigger == 0) {
if (dist(xin, yin, imgPosX, imgPosY) < ellipseRadius){
//println("hit!");
trigger=1;
// put tween here
tweenArray[billtag].play();
// tweenArray[billtag].getBezier().draw();
} // end collision
} // end trigger condition
// tweenArray[billtag].getX() , tweenArray[billtag].getY()
}
public void display() {
pushMatrix();
//translate(imgPosX,imgPosY);
rotate(angle);
stroke(0);
fill(0);
rect(tweenArray[billtag].getX(),tweenArray[billtag].getY(), imgWidth+1, imgHeight+1);
image(a, tweenArray[billtag].getX(),tweenArray[billtag].getY(), imgWidth, imgHeight);
//rect(0, 0, imgWidth+1, imgHeight+1);
// image(a, 0, 0, imgWidth, imgHeight);
popMatrix();
if (tweenArray[billtag].getX() == endTweenX) {
tweenArray[billtag].stop();
println("end");
//trigger = 2;
}
}
} //end Bill Class

Electronic Artist
Los Angeles, CA

blindfish

Re: Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

I drew an invisible circle around the mouse and check to see if the distance between it and the position of the bill is less than the radius of the circle.

This approach is reasonable so long as you don't mind parts of the bills not registering mouse interactions... However; there's absolutely no need to actually draw this 'invisible circle'; and especially not in the Bill move() method: you're repeatedly drawing an 'invisible circle' at the same location! Just test that the distance between the mouse and the bill is less than the 'ellipseRadius' - i.e. remove the code that draws those circles ;)

If you're planning to run this on Processing.js you're really going to have to avoid this type of innefficiency!

ijeoma

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

i took a quick look at your code and made some changes... also sorry but i removed your comments so i do it quicker. more or less i moved the bezier in tween into your dollar class... replaced your if(tween x == end x) line with an "tween ended" event listener... and replace if(triggered == 0) with if(tween.getPlayCount() == 0)...

also when you port your code to processingjs you can use http://quasipartikel.at/tween/. the bezier2d is an object wrapper of Processings bezier method and the bezier2dtween is an extended tween object that tweens the t in bezierPoint(a, b, c, d, t) to interpolate through the points on the bezier... so it wont be difficult to port your code.

and last your collision detection could use some more googling.

/**
* Chasing the Almighty Dollar
*
* Dollar Bills are Displayed on the Canvas and the User Can try to Grab Them, But When They do The Bills Just Fly Away
* by Steve Belovarich
* To view Steve's Electronic Artwork, visit http://installationspace.com
*/
import processing.core.*;
import ijeoma.geom.bezier.*;
import ijeoma.motion.*;
import ijeoma.motion.tween.bezier.*;
import ijeoma.motion.event.*;
PFont fontA;
PImage a; // Declare variable "a" of type PImage
int dolSize = 4;
int billNumber = 88;
Bill[] billArray = new Bill[billNumber]; //where the number is the same number as the one in the for-loops
void setup() {
size(1000, 800);
smooth();
a = loadImage("100-dollar-bill.jpg");
fontA = createFont("Georgia", 22);
Motion.setup(this);
for ( int i = 0; i < billNumber; i++ ) {
float rotin = PI/random(-12,12);
float xstart = random(50,900);
float ystart = random(100,700);
int xend = width+300;
int yend = height+300;
billArray[i] = new Bill(this, rotin,xstart,ystart,xend,yend);
}
}
void draw() {
background(255);
for ( int i = 0; i < billNumber; i++ ) {
billArray[i].move(); // Move each object
billArray[i].display(); // Display each object
}
text("Chasing the Almighty Dollar", 16, 740);
}
class Bill implements MotionEventListener { // The Bill Class, Constructs Each Bill
float angle = 0;
float imgPosX = 0;
float imgPosY = 0;
float imgWidth = a.width/dolSize;
float imgHeight = a.height/dolSize;
PApplet parent;
Bezier2D bezier2D;
TweenBezier2D bezier2dTween;
Bill(PApplet parent, float ang, float x, float y, int xend, int yend) {
this.parent = parent;
angle = ang;
imgPosX = x;
imgPosY = y;
bezier2D = new Bezier2D(parent, x, y, x+int(random(-10,10)), y+int(random(-10,10)),width-int(random(200)),height-int(random(200)),xend,yend);
bezier2dTween = new TweenBezier2D(bezier2D, 0f, 1f, 100f);
bezier2dTween.addEventListener(this);
}
public void move() {
int ellipseRadius = 120;
fill(0,0);
stroke(0,0);
ellipse(mouseX, mouseY, ellipseRadius, ellipseRadius);
if(bezier2dTween.getPlayCount() == 0)
if (dist(mouseX, mouseY, imgPosX, imgPosY) < ellipseRadius) {
bezier2dTween.play();
}
}
public void display() {
pushMatrix();
rotate(angle);
stroke(0);
fill(0);
rect(bezier2dTween.getX(),bezier2dTween.getY(), imgWidth+1, imgHeight+1);
image(a, bezier2dTween.getX(),bezier2dTween.getY(), imgWidth, imgHeight);
popMatrix();
}
void onMotionEvent(MotionEvent te) {
if(te.type == MotionEvent.TWEEN_ENDED) {
//do something
}
}
}

Animation library for timeline/keyframe based tweens and more: www.ekeneijeoma.com/processing/ijeomamotion/

steveblue

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

Thank you so much ijeoma for tightening up the code. This is my first processing sketch so of course things will get messy!

Is there documentation for the EventListeners somewhere? I browsed your site but couldn't find example code or clear syntax for using them.

And yes, I totally agree the collision detection could use some googling and I will implement a more sophisticated method if this project reaches the tabletop phase.

Electronic Artist
Los Angeles, CA

ijeoma

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

ijeomamotion has both processing style events and java style events. look at the ijeomamotion examples that end with _events_2 to see the java style event examples of which uses a custom EventListener called MotionEventListener. to use them in a custom class/object you have to implement MotionEventListener then add void onMotionEvent(MotionEvent te) method to that class. Then you can add that listener to other Motion objects that you want it to listen to using the addEventListener(MotionEventListener me) call.

Also in onMotionEvent(MotionEvent te) you have to add an if else to see what type of event is dispatched. For example

void onMotionEvent(MotionEvent te) {
println(te.type);
if(te.type.compare(Tween.TWEEN_ENDED)) {
println("TWEEN ENDED");
}
}

Go to http://ekeneijeoma.com/processing/ijeomamotion/reference/index.html MotionEvents->MotionEvent to see what event constants you can use in your if.

Animation library for timeline/keyframe based tweens and more: www.ekeneijeoma.com/processing/ijeomamotion/

ijeoma

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

i updated the event examples for the ijeomamotion pre 4.0 release which i uploaded yesterday so download it and try running these java style events examples:

Tween

TweenParallel

TweenSequence

Animation library for timeline/keyframe based tweens and more: www.ekeneijeoma.com/processing/ijeomamotion/

steveblue

Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

Awesome! Thanks for updating the library! You've developed a very powerful tween engine for Processing. I am going to recommend it to everyone.

Electronic Artist
Los Angeles, CA

ijeoma

Re: Re: How Do I Make the Objects Tween Based on Collision with Mouse?

2 years ago

thanks! let me know if you run into anymore problems.

Animation library for timeline/keyframe based tweens and more: www.ekeneijeoma.com/processing/ijeomamotion/

Top Reply