Processing Forum

Screen name:
steveblue
Website:
http://installationspace.com

steveblue's Profile

2 Posts

10 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Why Doesn't Sketch Display in Browser (using Tween.lib)?

[7 Replies]
- 29-Jan-2011 04:13 PM
- Forum: Processing with Other Languages
I am attempting to do an initial port of my first Processing sketch over to Processing,js and for some reason after I built in the Tween.lib Library the sketch does not load in the browser. Does anyone know why?

The image used in the sketch is available in another post:

http://forum.processing.org/topic/how-do-i-make-the-objects-tween-based-on-collision-with-mouse#25080000000631030

I am using the Tween Library available here http://quasipartikel.at/2009/11/30/motion-tweening-for-processingjs/

For some reason the sketch fails to load in the browser. Tween.lib is in the same folder as the pde, init.js, processing,js, and html. I used the Export as Processing.js Plug-in and the code below:

/**

* 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

*/

// @pjs preload must be used to preload the image

/* @pjs preload="100-dollar-bill.jpg"; */

  import("Tween.lib");



  PFont fontA;

  PImage a; // Declare variable "a" of type PImage

  int dolSize = 4;

  int billNumber = 24;

  Bill[] billArray = new Bill[billNumber]; //where the number is the same number as the one in the for-loops

  int displayCount = 0;



void setup() {

   size(1000, 800);



   a = loadImage("100-dollar-bill.jpg"); // Load the image into the program



   //fontA = createFont("Georgia.vlw");



   // Set the font and its size (in units of pixels)

   //textFont(fontA, 22);



   for ( int i = 0; i < billNumber; i++ ) {

   float rotin = PI/random(-12,12);

   float xstart = random(50,900);

   float ystart = random(100,700);



   float xend = width+300;

   float yend = random(-400,300);

   billArray[i] = new Bill(this, rotin,xstart,ystart,xend,yend);

   }





   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].update(); // Update Position

   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 endPosX = 0;

  float endPosY = 0;

  float imgWidth = a.width/dolSize;

  float imgHeight = a.height/dolSize;

  Tween tx;

  Tween ty;



// PApplet parent;

   Bill(float ang, float x, float y, float xend, float yend) {

   //this.parent = parent;

   angle = ang;

   imgPosX = x;

   imgPosY = y;

   endPosX = xend;

   endPosY = yend;



   // insert tween instalization here

   tx = new Tween(this, "x", Tween.strongEaseInOut, imgPosX, endPosX, 2);

   ty = new Tween(this, "y", Tween.bounceEaseInOut, imgPosY, endPosY, 2);



   }



   public void move() {

   int ellipseRadius = 220;



   if (displayCount == 0) {

   if (dist(mouseX, mouseY, imgPosX, imgPosY) < ellipseRadius) {

   // start tween here

   tx.start();

   ty.start();

   displayCount++;

   }

   }

   }



   public void display() {

   pushMatrix();

   rotate(angle);

   image(a, imgPosX, imgPosY, imgWidth, imgHeight);

   popMatrix();

   }





   public void update() {

   tx.tick();

   ty.tick();

   }

} //end Bill Class

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

[13 Replies]
- 16-Jan-2011 07:02 PM
- Forum: Programming Questions
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
2. /**
3. * Chasing the Almighty Dollar
4. *
5. * Dollar Bills are Displayed on the Canvas and the User Can try to Grab Them, But When They do The Bills Just Fly Away
6. * by Steve Belovarich
7. * To view Steve's Electronic Artwork, visit http://installationspace.com
8. */
10. PFont fontA;
11. PImage a; // Declare variable "a" of type PImage
12. int dolSize = 4;
15. void setup() {
16. size(1000, 800);
17. // The file "jelly.jpg" must be in the data folder
18. // of the current sketch to load successfully
19. a = loadImage("100-dollar-bill.jpg"); // Load the image into the program
20. Display myDisplay = new Display();
21. translate(width/2, height/2);
23. fontA = loadFont("Georgia.vlw");
25. // Set the font and its size (in units of pixels)
26. textFont(fontA, 22);
28. smooth();
29. //noLoop(); // Makes draw() only run once
30. } //end of setup
32. void draw() {
35. // text("Chasing the Almighty Dollar", 16, 740);
37. }
39. class Display {
40. Bill[] billArray;
41. Display() {
42. billArray = new Bill[24]; //where 4 is the same number as the one in your for-loop
43. build();
44. }
45. void build() {
46. for ( int i = 0; i < 24; i++ ) {
48. float rotin = random(PI);
49. float xin = random(100,width-100);
50. float yin = random(100,height-100);
52. billArray[i] = new Bill(rotin,xin,yin);
53. }
54. }
55. }
57. class Bill {
60. Bill(float ang, float x, float y) {
62. float angle = ang;
63. float imgPosX = x;
64. float imgPosY = y;
66. pushMatrix();
67. translate(imgPosX,imgPosY);
68. rotate(angle);
69. translate(-a.width/2, -a.height/2);
70. //translate((a.width/dolSize)/2, (a.height/dolSize)/2);
71. //line(0, 0, width, 0);
72. //line(0, 0, 0, height);
73. //ellipse(0, 0, 30, 30);
74. //ellipse((a.width/dolSize), 0, 30, 30);
75. //ellipse(0, (a.height/dolSize), 30, 30);
76. //ellipse((a.width/dolSize), (a.height/dolSize), 30, 30);
77. stroke(0);
78. fill(0);
79. rect(0, 0, (a.width/dolSize)+1, (a.height/dolSize)+1);
80. image(a, 0, 0, a.width/dolSize, a.height/dolSize);
81. //ellipse((a.width/dolSize)/2,(a.height/dolSize)/2, 100, 100);
82. popMatrix();
83. }
85. } //end Class Bill
89. void mouseMoved() {
91. println("MouseX =" + mouseX);
92. println("MouseY =" + mouseY);
94. } // end void MouseMoved
POP THIS IMAGE IN THE SAME LOCATION AS THE SKETCH:

«Prev
Next »