Processing Forum

What does PVector math function return?

[4 Replies]
- 29-Sep-2013 01:52 PM
- Forum: Programming Questions
I wrote something like
1. PVector reverse = position.mult(-1);
And it says cannot convert from void to PVector.
What's wrong?

What's wrong with this two dimension array?

[2 Replies]
- 14-Sep-2013 05:33 PM
- Forum: Programming Questions
I want to make a grid. My code as below, it shows nothing, i have no clue how to debug
2. int n=40;
4. int maxX = 120;
5. int maxY = 100;
6. Square[][]squares = new Square[maxX][maxY];
8. void setup (){
9. size(480,480);
10. background(0);
11. smooth();
12. for(int i=0;i<maxX;i++){
13. for(int j=0;j<maxY;j++){
14. int number=0;
15. squares[i][j]= new Square(number,number,100,100,100);
16. number+=n;
17. }
18. }
19. }
21. void draw(){
22. for(int i=0;i<maxX;i++){
23. for(int j=0;j<maxY;j++){
24. squares[i][j].draw();
25. }
26. }
27. }
29. class Square{
30. float x,y,a,b,c;
31. boolean ok;
32. Square(float ax,float ay,float aa,float ab,float ac){
33. x = ax;
34. y = ay;
35. a=aa;
36. b=ab;
37. c=ac;
38. ok=false;
39. }
40. void draw(){
41. fill(a,b,c);
42. stroke(255);
43. rect(x,y,n,n);
44. }
46. }

How to mirror the left half of the canvas?

[7 Replies]
- 10-Sep-2013 06:18 AM
- Forum: Programming Questions
i want to mirror the left half to the right half, but i have problem using the scale() function
my code goes like this:
2. void setup(){
4. size(800,400);
5. background(250);
6. smooth();
7. }
9. void draw(){
10. fill(0);
11. rect(0,0,200,400);
12. fill(255);
13. rect(0,200,200,400);
14. scale(-1,1);
15. copy(800,0,400,400,0,0,400,400);
16. }

Can p5.js work with imported library?

[1 Reply]
- 14-Jan-2013 11:12 PM
- Forum: Contributed Library Questions
As topic.

how to make things move in random curve instead of a line?

[3 Replies]
- 27-Oct-2012 06:54 AM
- Forum: Programming Questions
I have the classic balls that move in a line:
3. class Circle{
4. float x,y,vx,vy,size;
6. Circle(float ax,float ay){
7. x = ax;
8. y = ay;
9. size = 5;
10. vx = random(-.1,.1);
11. vy = random(-.1,.1);
12. }
14. void update(int w,int h){
15. x += vx;
16. y += vy;
17. if(x < 0 || x > w) vx *= -1;
18. if(y < 0 || y > h) vy *= -1;
19. }
21. void draw(){
22. pushStyle();
23. noStroke();
24. fill(0);
25. ellipse(x,y,size,size);
26. popStyle();
27. }
29. }
However, i don't want them moving in a line.

I want them moving in unregular curves. What can i add? noise? sin? cos?

Many thanks.

How can shapes form a text?

[2 Replies]
- 24-Oct-2012 07:46 AM
- Forum: General Discussion
Hey guys,

i wonder how this is made: http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

Those spots form a text and when clicked , they explode.

How can shapes form a text?

Thanks.

Are there plugin or framework for p5js function as sound library for p5?

[0 Replies]
- 24-Oct-2012 06:38 AM
- Forum: Processing with Other Languages
As topic.

I want to manipulate sound and visualize it in the same time on a browser. I want to change the sound's frequence.

However, imported library won't work for p5js.

So does anybody know any jQuery plugin or js framework that work in similar ways?

Many thanks.

How to erase lines between circles?

[3 Replies]
- 06-Oct-2012 08:33 AM
- Forum: Programming Questions
Hi guys, i have classic moving circles and line between them if they are less than certain distance away.

Then i make an eraser with the mouse (as you see in mouseMoved).

Now the problem is: i did erase the circles with my mouse, but those lines between them didn't.

So how can i erase the circle and meanwhile erase the line related to it ???
2. int maxCircles = 20;
3. Circle[] circles = new Circle[maxCircles];
5. void setup(){
6. size(400,400);
7. smooth();
8. for(int i = 0; i < maxCircles; i++) circles[i] = new Circle(random(width),random(height),random(20,40));
9. }
11. void draw(){
12. background(255);
13. for(int i = 0; i < maxCircles; i++){
14. circles[i].update();
15. circles[i].display();
17. for(int j = 0; j < maxCircles; j++){
18. if(dist(circles[i].x,circles[i].y,circles[j].x,circles[j].y)<40){
19. stroke(0,50);
20. line(circles[i].x,circles[i].y,circles[j].x,circles[j].y);}
21. }
22. }
23. }
25. void mouseMoved(){
27. for(int i = 0; i < maxCircles; i++){
28. float distance = dist(mouseX,mouseY,circles[i].x,circles[i].y);
29. if(distance<20){
30. circles[i].r--;
31. }
32. }
33. }
35. class Circle{
36. float x,y,vx,vy,r;
37. Circle(float ax,float ay,float ar){
38. x = ax;
39. y = ay;
40. r = ar;
42. vx = random(-.1,.1);
43. vy = random(-.1,.1);
44. }
45. void update(){
46. x += vx;
47. y += vy;
48. r=constrain(r,0,40);
50. }
51. void display(){
52. noStroke();
53. fill(0,50);
54. ellipse(x,y,r,r);
55. }
56. }
Many thanks.

How to realize the DRAWING processing in Processing?

[7 Replies]
- 04-Oct-2012 08:13 AM
- Forum: General Discussion
We all know how to draw a line in Processing.

But when we draw a line, the line is shown immediately.

What if i want to witness the drawing process, namely, to see the line moving forward, gradually completes a whole line.

Here's what i want to realize: to DRAW several lines and curves which finally turn into some pattern.

So how to make that happen? Using array?

Many thanks.

btw, there was a guy casting doubt on my question, i accidentally delete the question instead of editing it, so i rewrite this one, sorry >_<

How can i use chrome webcam API and the processing.js to manipulate the video?

[4 Replies]
- 03-Oct-2012 06:44 PM
- Forum: Processing with Other Languages
As topic,

i want to play with the webcam and chrome webcam API comes in handy, no plugin is needed.

However, i am not familiar with javascript syntax, so i still want to use processing.js to manipulate the video.

So how should the code be like?

GetUserMedia in the canvas,then? How can i tell the processing.js that there is a video in the canvas?

Detect the window size for show thing and not show thing, Firefox ok but chrome does not,why?

[3 Replies]
- 26-Sep-2012 04:54 AM
- Forum: Processing with Other Languages
i use jQuery to detect the size of the browser window, if it's smaller than a certain size, the canvas' content won't be shown, also an alert for extending your browser window will appear.

the html looks like this:
```
       <!DOCTYPE html>
       <html>
       <head>
       <meta charset="utf-8">

       <script type="text/javascript" src="jQuery.js"></script>
       <script type="text/javascript" src="dirtyhand9.js"></script>
       <script type="text/javascript" src="processing.js"></script>
       <script type="text/processing" data-processing-target="mycanvas">
       void setup(){.........
```
In the canvas, i use processing.js combined with jQuery. Only when the size larger than that will the draw function work
```
    void setup(){

    size( $(window).width()-20,$(window).height()-20 );}

    void draw(){
    background(255);

    if(width>= 1024 && height>=768 ){......
```
and then i write dirtyhand9.js for the alert :
```
   $(document).ready(function(){

   $("#alert").hide();

       if( $(window).width()-20<1024 || $(window).height()-20<768){
       $("#alert").show();};
```
And now is the problem:

it works just the way i want in Firefox; However in Chrome, it doesn't.

Every first time i open it with Chrome, it always shows the alert and nothing in canvas no matter what size the windows is. But it works fine after i refresh the page in Chrome.

I guess the cause of this problem lies in Chrome's jQuery detecting??

it detects the size after document is ready??

But before it is ready, the processing.js fails to get the width and height, so it shows nothing. and why the alert shown?? Have no idea.

So does anyone know the cause? Or the possible solution????

Many thanks.

How to fix: the default size is shown before jQuery detects the width and height, and it won't resize until i do it manually

[5 Replies]
- 25-Sep-2012 12:16 AM
- Forum: Processing with Other Languages
Hi everyone,
i use processing.js and jQuery and the code below to detect the size of the browser
void setup () {
```
    size( $(window).width(),
        $(window).height() );
```
However, the default size is shown before the jQuery successfully detects the width and height, and it won't resize until i do it manually
i am thinking about automatic page refresh .

So how can i tell the computer to refresh page after document loaded?

btw, window.innerWidth, window.innerHeight works the same as what i see with jQuery

how to use ArrayList?

[5 Replies]
- 21-Sep-2012 02:44 AM
- Forum: General Discussion
The explanation of ArrayList is the segment of code: http://processing.org/reference/ArrayList.html

It lacks the class. I don't understand. Could somebody complete it so as to make it be better understood?

Thank you sooooooooo much

why do the circles disappear from the screen？

[2 Replies]
- 18-Sep-2012 04:38 PM
- Forum: Programming Questions
Code as below, one quick question: why do the circles disappear from the screen when my mouse is playing with them? i've already add the boundary check however it does not seem to work. why???

i want to play with those cirecles. like i am tracing them and they are running away from me. but i want them always on the screen, instead of running away and disappear forever.
1. int maxCircle = 200;
2. float minDistance=20;
3. float distance1;
4. float distance2;
5. Circle [] circles= new Circle[maxCircle];
8. void setup(){
9. size(800,800);
10. smooth();
11. for(int i=0;i<maxCircle;i++){
12. circles[i] = new Circle(random(width),random(height),random(2,20));
13. }
14. }
17. void draw(){
18. background(255,255);
19. for(int i=0;i<maxCircle;i++){
20. circles[i].update(width,height);
23. for(int j=0;j<maxCircle;j++){
24. distance1 = dist(circles[i].x,circles[i].y,circles[j].x,circles[j].y);
25. if(distance1<minDistance){
26. stroke(0,10);
27. noFill();
28. line(circles[i].x,circles[i].y,circles[j].x,circles[j].y);}}
31. circles[i].display();
33. }
35. }
37. void mouseMoved(){
38. for(int i = 0; i<maxCircle;i++){
39. distance2 = dist(mouseX,mouseY,circles[i].x,circles[i].y);
41. circles[i].x-=(mouseX-circles[i].x)/distance2;
42. circles[i].y-=(mouseX-circles[i].y)/distance2;
45. if(circles[i].x<circles[i].r || circles[i].x>width-circles[i].r) {
46. circles[i].vx*=-1;
47. };
48. if(circles[i].y<circles[i].r || circles[i].y> height-circles[i].r) {
49. circles[i].vy*=-1;
50. };
51. }
54. class Circle{
55. float x,y,vx,vy,r,speed;
57. Circle(float tempx, float tempy, float tempr){
58. x=tempx;
59. y=tempy;
60. vx=random(-1,1);
61. vy=random(-1,1);
62. r=tempr;
63. }
65. void update(int w,int h){
66. x+=vx;
67. y+=vy;
69. if(x<r || x>w-r){
70. vx*=-1;};
71. if(y<r || y>h-r){
72. vy*=-1;};
73. }
76. void display(){
77. fill(0,50);
78. noStroke();
79. ellipse(x,y,r,r);
80. }
82. }

how to make mouseClicked function vary from click times?

[4 Replies]
- 18-Sep-2012 07:21 AM
- Forum: General Discussion
As title, what i want to realize with Processing:

There are classical circles running across on the screen, then:

the first time you click the mouse,all the circles freeze(stop moving);

the second time you click the mouse, you draw a new circle with your mouse position.

Okay now is the problem: how to tell the computer to act differently? After all, they are all clicks, seem the same to the computer.

Does anybody know? Thank you very much.

how to move shape in a certain arc and line?

[2 Replies]
- 08-Sep-2012 07:57 PM
- Forum: General Discussion
i made classic random moving circles as in the picture:

And here's what i want to realize:

when mouseClicked , the circles line up like:

i think i can check the position of all the circles. if theirs y position are within 1/2height, they should form the arc.

if are larger then 1/2height, they form the line.

But the trick is : how to form those shape?

i mean, i know how to form a round , just move their centre of circle towards a point.

but LINE(how to move theirs x position)??? even ARC ??? really have no idea.

Does anyone know?

Thank you very much.

Prcessing following control

[1 Reply]
- 08-Sep-2012 07:56 AM
- Forum: Programming Questions
code as below:
1. int maxCircle = 200;
2. float minDistance=2;
3. float distance;
4. Circle [] circles= new Circle[maxCircle];
7. void setup(){
8. size(800,800);
9. smooth();
10. for(int i=0;i<maxCircle;i++){
11. circles[i] = new Circle(random(width),random(height),random(2,20));
12. }
13. }
16. void draw(){
17. background(255,255);
18. for(int i=0;i<maxCircle;i++){
19. circles[i].update(width,height);
22. for(int j=0;j<maxCircle;j++){
23. distance = dist(circles[i].x,circles[i].y,circles[j].x,circles[j].y);
24. if(distance<minDistance){
25. stroke(0,50);
26. noFill();
27. line(circles[i].x,circles[i].y,circles[j].x,circles[j].y);}}
30. circles[i].display();
32. }
34. }
36. void mouseMoved(){
37. for(int i = 0; i<maxCircle;i++){
38. circles[i].x+=(mouseX-circles[i].x)*.2;
39. circles[i].y+=(mouseX-circles[i].y)*.2;}}
44. class Circle{
45. float x,y,vx,vy,r,speed;
47. Circle(float tempx, float tempy, float tempr){
48. x=tempx;
49. y=tempy;
50. vx=random(-1,1);
51. vy=random(-1,1);
52. r=tempr;
53. }
55. void update(int w,int h){
56. x+=vx;
57. y+=vy;
59. if(x<r || x>w-r){
60. vx*=-1;};
61. if(y<r || y>h-r){
62. vy*=-1;};
63. }
66. void display(){
67. fill(0,50);
68. noStroke();
69. ellipse(x,y,r,r);
70. }
72. }
Two questions:

1.Why doesn't the line function work?

2.How can i make circles move smoothly(respectively) following my mouse instead of squeezing into one point abruptly?

Thank you very much.

code shows nothing on the browser. don't know why

[2 Replies]
- 02-Sep-2012 03:50 AM
- Forum: Programming Questions
My intention is to draw two eyes based on the mouse location.So i define an Eye class and then call its draw method with valiable mouseX and mouseY. However, it shows nothing on the browser.

Also, i wonder how to detect the size of the browser because screen.width and screen.height don't seem to work within a browser.

void setup(){

size(800,800);

smooth();

background(225);

}

if (mousePressed){

Face.draw(mouseX,mouseY);}

class Face{

float x,y,a;

Face(float ax,float ay){

x=ax;

y=ay;

a=random(1,5);}

void draw{

noFill();

stroke(0);

//eye1

ellipse(x+2.2*a,y-a,a/2,a/2);

//eyelashes1

arc(x+2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；

//eyebrows1

arc(x+3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);

//eye2

ellipse(x-2.2*a,y-a,a/2,a/2);

//eyelashes2

arc(x-2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；

//eyebrows2

arc(x-3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);}}

</script>

</head>

<body></body>

<canvas id="mycanvas"></canvas>

</html>

i'm a beginner, so i don't know if my problem is stupid or not.

But any hint is welcomed:)

Thank you.

creating art with processing

How to calculate distance between two changing shapes(dependent valiable)?

[2 Replies]
- 26-Aug-2012 08:54 AM
- Forum: General Discussion
Firstly, i draw lots of circles and they are moving slightly because I add noise in the centre of a circle.

Second, I draw some patterns combining ellipse(mouseX,mouseY,random(1,3),random(1,3)),rect, line, etc.

Third, and this is the problem, I want to make the circles change color if they have a distance from the patterns less than a certain amount.

How could I calculate the distance between those circles' center and the pattern's border? They are both dependent variables.

Maybe because the shape functions are so well-packaged that they're not easy to break and use . i found a way to calculate Point to line distance : processing.org/discourse/beta/num_1276644884.html

However i don't understand it.

And then i found another way to think : to make it a problem of compare each element in the array with every other element in the array https://forum.processing.org/topic/constantly-resizing-ellipse-based-on-distance,

but i still dont know how to modify shape function like ellipse(x,y,radius1,radius2)into an array.

Please give me any hint.Thanks.

Activity Trend