Processing Forum

Apply texture on beginShape(QUAD_STRIP);?

[3 Replies]
- 09-Aug-2012 02:31 PM
- Forum: Programming Questions
I have search online, but not many post talking about this problem. I would like to apply texture on a 2D shape, but I don't know why the texture doesn't show. I have try to change the image as png, jpeg or jpg(I don't even know does it matter...) And also use textureMode(NORMALIZED); or textureMode(IMAGE);, but still cannot work. Please tell me which part I have done wrong.
Thank you so much!!!
3. PImage a, b, c;
5. void setup() {
7. size(400, 400, P2D);
8. noStroke();
9. a = loadImage("ta.png");
10. b = loadImage("tb.png");
12. }
15. void draw() {
17. beginShape(QUAD_STRIP);
18. textureMode(NORMALIZED);
19. texture(a);
20. vertex(0, 100);
21. vertex(0, 300);
22. vertex(200, 200);
23. vertex(200, 400);
24. endShape();
27. beginShape(QUAD_STRIP);
28. texture(b);
29. vertex( 200, 200);
30. vertex(200, 400);
31. vertex(400, 100);
32. vertex(400, 300);
33. endShape();
36. }

Passing value in processing js to javascript

[4 Replies]
- 27-Jul-2012 12:05 PM
- Forum: Processing with Other Languages
I have a .pde file will detect user mouse click, and there are few object in it, if the user click on the first one, I will get '1' as output and so on. And I will use this value to decided a <div> content in the html file("targetDiv" in the demo code below), so I need to pass the value to javascript, and let javascript control the next step. The problem is I don't know how to pass the value("outcome" in the demo code below) to javascript(or jquery is also ok).

Below is demo code, cannot run because it is simplify code.

Please help me!!It is an important part has to be come across in my work!!!Thank you very much!

<!doctype html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="processing-1.3.6.js"></script>

<body>

<div id="targetDiv"></div>

<canvas data-processing-sources="testing.pde"></canvas>

<script type="text/javascript">

//below is something I want to do, but still don't know the details

//if (outcome == 1){

//load 1.txt in the targetDiv

//}else if(outcome == 2){

//load 2.txt in the targetDiv

//}and so on.....

</body>

</html>

and in the testing pde. ::

int outcome;

void setup() {

//sth happend

}

void draw() {

//draw some object

}

void mousePressed() {

//when user click on some obj

//output the number of the object

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

//isOver is a processing function to check the mouse click on the object or not

if (isOver(mouseX, mouseY, i)==true) {

outcome = i;

}

}

}

Moving balls towards center with collision

[11 Replies]
- 23-Jul-2012 01:54 AM
- Forum: General Discussion
Hello, I want to write a program that makes balls can move towards to the center, but they won't covered/ crash each other(collision). And may be when they arrived to the center, they will keep stay at the center point or slowly move around the center.(this part is less important actually..but I still want it can happend)

I have search online, and most of the example is talking abt collision only, or towards center only, but seems there are not example of both of them in the same program. I guess 'towards center' may actually keep affect the balls position and so do collision, so they may crash each other if i just combine two kinds of coding?

Please tell me any idea, I hope I can make it done. Thank you very much!!

beginShape() become one shape?

[8 Replies]
- 20-Jul-2012 06:29 AM
- Forum: General Discussion
Is there any ways to combine or make beginShape()'s shape become one?

I have a program and using three part of beginShape() in order to make a cube,using vertex inside, those three parts appear as a irregular rectangle. But later I need to move those cubes(from random position, draw to the center), and it is difficult to change every vertex to move it. Is there any ways can let the shape that I create become one for me to move it,scale it? So that I can move those cube just like one shape or image(?)

I know it is so abstract, if I have something doesn't explain clearly, please tell me and I will try my best to give more information. This problem is so important to me!!Please help me if you have any idea:(

Thank you so much!!!!

Fast Question:translate() not working with Processing.js?

[2 Replies]
- 20-Jul-2012 12:57 AM
- Forum: Processing with Other Languages
I am very new in processing js, the following question is stupid but I don't know why when it happend...

It is a simplify code to show my problem, the translate function are not working when I run this code as html file using processing js. (Start from the comment line //****). I have tested it in processing and it is works fine, those rectangles should go to next row if they are out of the screen. But I just see the first row of rects when I running as html file.

Can anyone tell me what's wrong? Thank you very much!!!!!!
1. <script src="processing-1.3.6.min.js"></script>
  <script type="text/processing" data-processing-target="mycanvas">
5. int CubeSize = 40 * 4;
6. int CubeCenter = 20 * 4;
7. int MaxBoundary = 30 * 4;
8. int MinBoundary = 10 * 4;
11. int alphaValue = 200;
12. int CubeNum = 100;
15. int x = 0;
16. int countRan = 0;
20. boolean checked = false;
23. void setup() {
25. background(100);
26. size(800, 800);
27. smooth();
28. noStroke();
32. int CubeRow = (800 / (CubeSize += 5))-1;
36. for (int i = 0; i < CubeNum; i++) {
39. if (i == 0) {
40. translate(5, 0);
41. }
42. else {
43. //*************************
44. if (x == CubeRow) {
45. int Zero = ((CubeSize ) * (CubeRow-1));
46. translate(-Zero, 0);
47. translate(0, CubeSize);
48. x = 0;
49. }
50. else {
51. translate(CubeSize, 0);
52. }
53. }
56. text(i, CubeCenter, CubeCenter);
57. rect(0, 0, 50, 50);
58. x++;
59. }
60. }
62. </script>
  
  <canvas id="mycanvas"></canvas>

Random Shape covered area?

[6 Replies]
- 18-Jul-2012 12:16 PM
- Forum: General Discussion
If I randomly draw 50 rects on the screen (meaning the position are random), is there are any way to let me know which area are still not covered? That's mean if the rect are black, the background are white, can I know there are any white space are not covered by those rect? (I may use beginShape to create those rectangles.)

Doesn't need to know the position, but once there are white, I can detect there have space.

Thank you very much!!!

XY Position of SVG child

[4 Replies]
- 08-Jun-2012 11:46 AM
- Forum: Core Library Questions
Is there any way to know the X, Y position of an child of SVG? Because I will need to move the child later on, but not far away form the original position, so if I know the original position of that child, I can set it to other position.

I have read some posts here, and I know that have a function called "getParams()", I have try that but I don't know what value it return, may be this is the answer of my question? But please explain to me more how this function works or what the value of this function returned.

Thank you!!

mouse over and show image

[8 Replies]
- 18-May-2012 08:02 AM
- Forum: General Discussion
I am working on a program that have to use mouse over or mouse click. I have different buildings(image) on the screen, and when the mouse over one of the blocks, an image(a face or a mouth) will apear in the block, and also appear the text in the array with the same block.

For example, when my mouse over the first block, an image will show in the blocks, and a line of the text array [0] (the fist block in the array) will appear. So I need to get which block I am focus on (the index number of blocks) and show image in that block.

The problem is I don't know how to check the mouse over the block and get the index number of that block.
1. Because the buildings are actually image, and I cannot check the position(x, y) of every blocks, they are not align.

2. I have read this page( https://forum.processing.org/topic/mouse-over-getchild-in-pshape) , and use the library inside, but the problem is when I have to show the image, I have to make those image as path in AI, and one face are make by many paths, so when I have to getChild, I don't know how to get the exactly child. The problem is I am also an idiot in AI and drawing. Is there any easy way to make things as an svg?

3. The library I have seen is basically change the color of one part(the child), but if I want it to be visible or invisible, I cannot do it.

4. I know PShape can make shape become visible or invisible, but PShape have to know the exactly position of every shape(where they should put), so return to the first problem, I don't know the position......

Sorry it is a long question, but i hope someone can help me:(
Thank you for you time. Thanks a lot.

Activity Trend