Processing Forum

processing.js + indexhibit?

[0 Replies]
- 30-Oct-2011 11:50 PM
- Forum: Processing with Other Languages
I'm currently hosting my portfolio using Indexhibit, and I'd like to include a processing sketch on the main page using processing.js, although I'm not sure which index file to alter in order to get my sketch to show up. I'm also not sure where I should place the processing.js and .pde files, though I'm guessing they should go in the same folder as the index file I'm supposed to change.

Anyone else using Indexhibit who's had the same issue?

processing.js interact with browser elements (links)?

[5 Replies]
- 30-Oct-2011 11:18 PM
- Forum: Processing with Other Languages
I'm trying to make a sketch that I created interact with links on my website but can't figure out if there's actually a way. Is there a sort of mouseHover function that I could use that would allow my sketch to react when the mouse hovers over a link?

Identifying white pixels.

[2 Replies]
- 01-Mar-2011 10:54 PM
- Forum: Core Library Questions
Hey all,

I'm creating a project using a web cam in which the background is white, and movement that is detected is drawn as dark shapes. What I'm trying to do is generate audio when there are less white pixels on the screen (or more black pixels / movement). I've implemented an example from Processing which generates audio based on mouse location, but I was wondering how to map this audio to white pixels rather than mouse location, so that audio generates when there are less white pixels on screen.

Thanks for the help, and here's the example code (which I tweaked slightly):

EDIT: This is only the class code. If you wish to see the main code as well, which includes the setup() and draw() variables, I'd be happy to post that as well :)
2. // this signal uses the mouseX and mouseY position to build a signal
3. class Noise implements AudioSignal
4. {
5. void generate(float[] samp)
6. {
7. float range = map(mouseX, 0, width, 0, 1);
8. float peaks = map(mouseY, 0, height, 1, 20);
9. float inter = float(samp.length) / peaks;
10. for ( int i = 0; i < samp.length; i += inter )
11. {
12. for ( int j = 0; j < inter && (i+j) < samp.length; j++ )
13. {
14. samp[i + j] = map(j, 0, inter, -range, range);
15. }
16. }
17. }
19. // this is a stricly mono signal
20. void generate(float[] left, float[] right)
21. {
22. generate(left);
23. generate(right);
24. }
25. }

OpenCV Inverting Blob

[1 Reply]
- 22-Feb-2011 02:11 AM
- Forum: Contributed Library Questions
I'm currently using the code I pulled form the OpenCV and website messing around and trying to understand blob detection. I applied a red stroke to the blob, but it seems that it is outlining everything around me, rather than myself. Does that mean that, technically, I'm NOT the blob? If so, how can I fix this?

Any help is greatly appreciated as I'm trying to understand this so I can implement it into a project I'm starting, which incorporates people as the blobs. For your convenience, here's the code to copy into Processing (as long as you have the OpenCV library):
2. import hypermedia.video.*;
4. OpenCV opencv;
6. void setup() {
8. size( 640, 480 );
10. // open video stream
11. opencv = new OpenCV( this );
12. opencv.capture( 640, 480 );
14. }
16. void draw() {
18. background(192);
20. opencv.read(); // grab frame from camera
21. opencv.threshold(100); // set black & white threshold
23. // find blobs
24. Blob[] blobs = opencv.blobs( 10, width*height/2, 100, true, OpenCV.MAX_VERTICES*4 );
26. // draw blob results
27. for( int i=0; i<blobs.length; i++ ) {
28. beginShape();
29. //stroke
30. stroke(255,0,0);
31. strokeWeight(3);
32. for( int j=0; j<blobs[i].points.length; j++ ) {
33. vertex( blobs[i].points[j].x, blobs[i].points[j].y );
34. }
35. endShape(CLOSE);
36. }
38. }

simulating depth of field.

[2 Replies]
- 29-Jan-2011 04:22 PM
- Forum: Programming Questions
Just wondering if there was a way to simulate depth of field without using a camera.

I'm using OPENGL to render my sketch, and the object in the center of the sketch can be rotated, so I wasn't sure if I could simulate depth of field somehow so that when the object is rotated, it's slightly blurred behind a certain point.

Or, if blur's too intensive, I'd also be happy with just lightening up the stroke.

Any assistance is greatly appreciated! :)

Translating Z-axis?

[1 Reply]
- 27-Jan-2011 11:05 PM
- Forum: Programming Questions
I'm trying to create a sketch that allows me to draw (which is actually an ArrayList of lines) and rotate my drawing around the Z-axis. However, as of right now, my Z-axis is located in the top-left corner of the sketch. I translated it to the center, but now when I draw in the center, my drawing actually appears in the bottom right.

I've tried subtracting width/2 and height/2 from where the lines are drawn, but that just screws up how the drawing appears.

Is there any relatively simple way to translate an axis location, and only the axis, without affecting anything else (or just some way to make this whole thing work)?

EDIT: Actually, after messing around, I'm curious as to how I can make every axis sit dead center (rather than on the left, top left, and top) without translating the location of my drawing.

drawing points instead of a line?

[7 Replies]
- 24-Jan-2011 11:22 PM
- Forum: Programming Questions
I'm trying to create code that allows you to draw with the mouse (using pmouseX and pmouseY), although I want to create points along a 3D axis instead of a line.

By the time the code's finished, I'd like to be able to move a camera around the points to see what you've drawn, but in a 3D space.

Here's the example code for drawing a line using simple functions (it's rendering in P3D w/ lights() at the moment). Any easy way to turn that line into points? I also realize that there's the point() function, so I feel like that could possibly be part of the solution:
1. void setup() {
2. size(960, 640, P3D);
3. background(102);
4. smooth();
5. }
7. void draw() {
8. lights();
9. stroke(255);
10. if(mousePressed) {
11. line(mouseX, mouseY, pmouseX, pmouseY);
12. }
13. }

Help with creating a tree branch?

[1 Reply]
- 23-Jan-2011 09:38 PM
- Forum: Programming Questions
So I've been screwing around for the past couple of hours trying to create a single line that animates from point A to point B, which replicates a tree branch. I tried using a few different techniques, including noise(), to create the line's randomness, but wasn't successful.

Does anyone have a simple solution to creating a line that resembles a tree branch (a rather jagged / noisy line that tapers on one end)?

Thanks a ton for any help / ideas. They're honestly greatly appreciated.

Ultimately, I'm going to try to recreate the drawing tool used here:

http://www.thewildernessdowntown.com/

(In order to actually draw freely with the tool, you have to watch the entire video first.)

Generating an ellipse once per section instead of every draw loop.

[2 Replies]
- 04-Jan-2011 09:15 PM
- Forum: Programming Questions
I'm trying to make it so that the ellipse jumps to a random spot (within its constraints) when mouseX is within a certain location, although a new ellipse is generated every draw loop. I'm sure it's probably something simple that I'm missing, but is there some way to have it so that it only generates one ellipse when mouseX is within that section rather than one for every draw loop?

Here's the code, and thanks a ton for the help!
1. float x1, y1;
3. void setup()
4. {
5. size(960,640);
6. smooth();
7. ellipseMode(CENTER);
8. }
11. void draw()
12. {
13. background(0);
14. noStroke();
15. fill(255);
16. ellipse(x1,y1,10,10);
18. if(mouseX > 0 && mouseX < 73)
19. {
20. x1 = random(0,220);
21. y1 = random(140,504);
22. }
24. else if(mouseX > 73 && mouseX < 147)
25. {
26. x1 = random(73,294);
27. y1 = random(140,504);
28. }
29. }

Gradually decreasing size of ellipse.

[2 Replies]
- 26-Nov-2010 03:16 PM
- Forum: Programming Questions
I think my question might be relatively simple, although I'm not quite sure where to begin coding what I'm trying to do.

I have an ellipse in the center of my sketch, and I basically want it to gradually decrease in size over time. I'm just not sure how to make the ellipse shrink, although I feel like I probably need to use a for loop? I'm still relatively new to Processing, so hopefully this'll come easier eventually.

Thanks for the help, and if you have any questions lemme know!

clock reading numbers as text.

[3 Replies]
- 15-Oct-2010 02:46 AM
- Forum: Programming Questions
I'm trying to create a clock that, rather than displaying numbers, displays actual text. For example, the clock would display the number 1 as 'one'. My question is: what's the easiest way to go about making the text change every second? If I map my code to the specific time of day, is there a way to tell it to display words rather than numbers? Or should I actually type out the text and have it change every second and cycle back to 'one' after 60 seconds?

Let me know if you need me to clarify my question, and thanks for the help!

mousePressed, separating LEFT and RIGHT.

[4 Replies]
- 12-Oct-2010 01:27 AM
- Forum: Programming Questions
I have 2 .svg objects loaded up into a design, one on the left and one on the right. I'm trying to make it so that by LEFT clicking, I can drag on around the left object by itself, and same for the right. Currently, left clicking controls both simultaneously, and same with right clicking. I'm sure there's a way to get around this, but I'm not sure how.

Thanks for the help!

Here's the portion of my code that I'm trying to deal with:

void draw()

{

   background(255);

   //eyebrow_left shape

   PShape el;

   el = loadShape("eyebrow_left.svg");

   smooth();

   shape(el,currX,currY,121,100);

   //end eyebrow_left shape



   //eyebrow_right shape

   PShape er;

   er = loadShape("eyebrow_right.svg");

   smooth();

   shape(er,currX,currY,113,99);

   //end eyebrow_right shape



   currY = constrain(currY, -15, 0);



   if (currY<0)

   {

   currY+=1;

   }



   if (mousePressed == true)

   {

   if (mouseButton == LEFT)

   {

   float targetY = (mouseY-225);

   float dy = (targetY - currY);

   currY += dy*easing;



   //eyebrow_left shape

   smooth();

   shape(el,currX,currY,640,480);

   //end eyebrow_left shape

   }



   else if (mouseButton == RIGHT)

   {



   float targetY = (mouseY-225);

   float dy = (targetY - currY);

   currY += dy*easing;



   //eyebrow_right shape

   smooth();

   shape(er,currX,currY,640,480);

   //end eyebrow_right shape

   }

   }

  }

Activity Trend