Processing Forum

Pixel Arrays and Integers

[13 Replies]
- 01-Jul-2013 09:45 AM
- Forum: General Discussion
Hi,

I am trying to understand pixel arrays. I understand how to load them, manipulate them, and update them, but what exactly is inside this array. If I println() on every pixel I get a really big negative number. Can you point me to some reading material on this? What does this number mean and how does it store the pixel data?

Thanks,
Scott

Import Stings and Floats into an Array

[6 Replies]
- 28-May-2013 08:47 AM
- Forum: Programming Questions
Hi,

I have a .csv file that has strings (locatoin names and urls) as well as floats and I want to import these into an array. I've seen this post, which creates a float array.

From the post above, I made two separate arrays, but I am wondering if there's a more efficient way of doing this.

Thanks,
Scott
1. // load file
2. String[] lines = loadStrings("data_2.csv");
4. // get number of rows and columns
5. int rows = lines.length;
7. int cols = split(lines[0], ",").length;
9. // create array
10. float[][] floatArray = new float[rows][cols];
12. // iterate over lines
13. for (int i = 0; i < rows; i++) {
15. // split current line
16. String[] row = split(lines[i], ",");
18. // iterate over values
19. for (int j = 0; j< cols; j++) {
20. // parse and store the value
21. floatArray[i][j] = float(row[j]);
22. }
23. }
25. String [][] stringArray = new String[rows][cols];
27. // iterate over lines
28. for (int i = 0; i < rows; i++) {
29. // split current line
30. String[] row = split(lines[i], ",");
32. // iterate over values
33. for (int j = 0; j< cols; j++) {
34. // parse and store the value
35. stringArray[i][j] = row[j];
36. }
37. }
38. //test it out
39. println(stringArray[0][2] + floatArray[2][2]);

Google Street View Images

[3 Replies]
- 27-May-2013 08:21 PM
- Forum: Programming Questions
Hi All,

Is it possible to use a Google Street View Image in a Processing sketch? The API url isn't actually for an image, so I'm guessing that Processing doesn't understand how to interpret the response it gets.

My setup() look like this:
1. void setup() {
  reader = new XlsReader(this, "data.xls");
  url = "http://maps.googleapis.com/maps/api/streetview?size=400x400&l ocation=40.720032,%20-73.988354&sensor=false";
  img = loadImage(url);
  colorMode(HSB, 1);
  size (400, 400);
  frameRate(1);
  }
Of course, when i run the sketch, the first time I call img I get an error.

Thanks,

Scott

Trigonomitry -- Draw Train Tracks

[4 Replies]
- 29-Apr-2012 07:56 AM
- Forum: Programming Questions
Hi,

I am building a map drawing app and I want to draw train tracks on the map (a line with intersecting perpendicular lines), but I'm having trouble with the math. I know that I need to do some Pmouse calculations to rotate and space the lines properly, but I haven't done this kind of math in ages. My two problems are:

1. I don't know how to rotate the perpendicular lines with the mouse direction.
2. I don't know how to space the perpendicular lines evenly (every 5px, for example).

Any help is appreciated. Thanks in advance.

float x;
float y;
float px, targetX;
float py, targetY;
float easing = 0.4;
float weight = 2;
color drawColor = 0;

void setup () {
size(400, 400);
}

void draw() {
// Free hand line drawing -----------------------------------------//
strokeWeight(weight);
stroke(drawColor);
if (!mousePressed) {
    x = mouseX;
    y = mouseY;
    px = mouseX;
    py = mouseY;
}
if (mousePressed) {
    targetX = mouseX;
    float dx = targetX - x;
    if (abs(dx) > 1) {
      x+= dx* easing;
    }
    targetY = mouseY;
    float dy = targetY - y;
    if (abs(dy) > 1) {
      y += dy * easing;
    }
    line(px, py, x, y);
    float tx = (mouseX + cos(QUARTER_PI)*5);
    float ty = (mouseY + sin(QUARTER_PI)*5);
    float bx = (mouseX + cos(-QUARTER_PI)*5);
    float by = (mouseY + sin(-QUARTER_PI)*5);
    strokeWeight(1);
    line(tx, ty, bx, by);
}
py = y;
px = x;
}

Turn white pixels transparent

[5 Replies]
- 15-Mar-2012 08:42 AM
- Forum: Programming Questions
Hi,

I want to write a program that will turn white pixels transparent. I have a bunch of images I need edited, and I think this would be the fastest way.

I've found some examples in the forum, but none of them save the image with transparent pixels to my desktop. Am I missing something here?

Here is one of the examples I am working with:
1. String FILENAME = "oak.png";
2. PImage img;
3. PImage newImg;
4. int x;
5. int y;
6. int i;
8. img = loadImage( FILENAME );
9. newImg = createImage( img.width, img.height, ARGB );
10. for( x = 0; x < img.width; x++ ){
11. for( y = 0; y < img.height; y++ ){
12. i = ( ( y * img.width ) + x );
13. if( img.pixels[i] == color( 0, 0, 0 ) ){
14. newImg.pixels[i] = color( 0, 0, 0, 0 );
15. }
16. else {
17. newImg.pixels[i] = img.pixels[i];
18. }
19. }
20. }
21. newImg.save( FILENAME );

Move item through an ArrayList

[6 Replies]
- 06-Mar-2012 06:26 AM
- Forum: Programming Questions
Hi,

I have an array list that gets populated when you add objects to the screen. I want to be able to select one object and move it up or down through the array list so that the object is moved to the foreground or background (changing the z-index, more or less). I found an old forum post and modified the code to make something work.

The code below sort of does what I want, but not really. In the if(key=='q') section it moves the selected item to the back and moves the 0 item to the front. I don't want the 0 item moved to the front, I want every following item in the index to move up one.

In the if(key=='w') section it moves the selected item to the front and removes the highest indexed item. Don't want that either.

Thanks in advance.
1. void keyPressed () {
2. if (key == 't') {
3. shapeMove.add(new ShapeMove("tree.gif", 100+btn*50, 100, 150, 150));
4. btn++;
5. }
6. if (key == 'q') {
7. int ff = 0; // First false index
8. ShapeMove sf = (ShapeMove)shapeMove.get(0); // image w/ false index
9. for (int i = 0; i < shapeMove.size(); i++) {
10. ShapeMove s = (ShapeMove)shapeMove.get(i);
11. if (s.selected) {
12. // Replace it with the current photo with false
13. shapeMove.set(i, sf);
14. // Put the selected image in place of the first false photo (and move this index)
15. shapeMove.set(ff++, s);
16. // Next photo is the next to swap (might also advance ff up to the next unselected photo)
17. sf = (ShapeMove)shapeMove.get(ff);
18. }
19. }
20. }
21. if (key == 'w') {
22. int ff = shapeMove.size()-1; // First false index
23. ShapeMove sf = (ShapeMove)shapeMove.get(0); // photo with false
24. for (int i = shapeMove.size()-1; i >= 0; i--) {
25. ShapeMove s = (ShapeMove)shapeMove.get(i);
26. if (s.selected)
27. {
28. // Replace it with the current photo with false
29. shapeMove.set(i, sf);
30. // Put the selected image in place of the first false photo (and move this index)
31. shapeMove.set(ff--, s);
32. // Next photo is the next to swap (might also advance ff up to the next unselected photo)
33. sf = (ShapeMove)shapeMove.get(ff);
34. }
35. }
36. }
}

Object Classes and PImages

[3 Replies]
- 02-Mar-2012 08:36 AM
- Forum: Programming Questions
Hi,

I have written an object class that has all the characteristics I want, now I want to reuse if a bunch of times with different PImages. Here's what it looks like:
1. class ShapeMove
2. {
3. int x;
4. int y;
5. int h;
6. int w;
7. int origx;
8. int origy;
9. int deltax;
10. int deltay;
11. int posXdiff;
12. int posYdiff;
13. int xdragdelta;
14. int ydragdelta;
15. boolean locked = false;
16. boolean imCaptured = false;
17. boolean selected;
18. // boolean overMe = false;
19. //
20. ShapeMove(PImage lamppost, int _x, int _y, int _w, int _h)
21. {
22. x = _x;
23. y = _y;
24. h = _h;
25. w = _w;
26. }
... a bunch of stuff about moving and resizing ...
1. void display()
2. {
3. image(lamppost, x, y, w, h);
4. }
5. }
As it stands, if I want to add a new object with a different PImage, I have to duplicate the whole class and rename it. I don't want to do that. I think there is a way to to this where the constructor calls for "String filename", but I'm not sure. Alternatively, I could make a child class, but I don't know how to do that yet.
How do I use different PImages for different instances of my ShapeMove object?

Thanks for the help.

Click Button to Add an Object -- OOP

[14 Replies]
- 26-Feb-2012 06:26 AM
- Forum: Programming Questions
Hi,

I have written a small program that allows you to manipulate objects with the mouse and some key strokes. I want to start with a blank canvas with a button. When you click on the button a new ShapeMove is added to the canvas. I feel like this should be pretty simple, but I'm stumped.

Here's my code so far. Sorry it's so long. The button class is at the very bottom. I'm using PImages but in this example it's all rectangles.

Thanks
1. int x; // shape x
2. int y; // shape y
3. int h; // shape height
4. int w; // shape width
5. int b = 0; //counts button clicks
6. boolean captured;
7. boolean isOverSomething;
8. ShapeMove[] shapeMove = new ShapeMove[3];
9. Button button;
11. void setup()
12. {
13. size(800, 500);
14. for (int i = 0; i <= 2; i++)
15. {
16. shapeMove[i] = new ShapeMove(0, 0, 200, 200);
17. }
18. button = new Button(200, 300);
19. }
21. void draw()
22. {
23. background(255);
24. button.display();
25. if (b > 0)
26. {
27. fill(120, 250,0);
28. shapeMove[b-1].update();
29. shapeMove[b-1].display();
30. }
31. }
33. //////////////////////////////////////////////////////////////////////////
34. class ShapeMove
35. {
36. int x;
37. int y;
38. int h;
39. int w;
40. int origx;
41. int origy;
42. int deltax;
43. int deltay;
44. int posXdiff;
45. int posYdiff;
46. int xdragdelta;
47. int ydragdelta;
48. boolean over;
49. boolean locked = false;
50. boolean imCaptured = false;
51. boolean overMe = false;
54. ShapeMove(int _x, int _y, int _h, int _w)
55. {
56. x = _x;
57. y = _y;
58. h = _h;
59. w = _w;
60. }
62. void isover()
63. {
64. if (mouseX >= x && mouseX <=x+w &&
65. mouseY >= y && mouseY <= y+h)
66. {
67. over = true;
68. isOverSomething = true;
69. }
70. else
71. {
72. over = false;
73. isOverSomething = false;
74. }
75. }
77. void overme()
78. {
79. if(isOverSomething) // over something
80. {
81. if(overMe) // over me!
82. {
83. if(!over)
84. {
85. overMe = false;
86. isOverSomething = false;
87. }
88. }
89. }
90. else // not over anything at the moment
91. {
92. if(over) // over me!
93. {
94. overMe = true;
95. isOverSomething = true;
96. }
97. }
98. }
100. void update()
101. {
102. if (over && mousePressed && !imCaptured && !captured)
103. {
104. deltax = x - mouseX;
105. deltay = y - mouseY;
106. origx = x;
107. origy = y;
108. captured = true;
109. imCaptured = true;
110. }
111. if (!mousePressed && imCaptured)
112. {
113. captured = false;
114. imCaptured = false;
115. }
116. if (imCaptured)
117. {
118. xdragdelta = x - (mouseX + posXdiff);
119. ydragdelta = y - (mouseY + posYdiff);
120. x = mouseX + deltax;
121. y = mouseY + deltay;
122. }
123. }
125. void changesize()
126. {
127. if (over && keyPressed)
128. {
129. if (key == 'b')
130. {
131. h += 2;
132. w += 2;
133. }
134. if (key == 's')
135. {
136. h -= 2;
137. w -= 2;
138. }
139. }
140. }
142. void display()
143. {
144. rect(x, y, h, w);
145. changesize();
146. }
147. }
148. /////////////////////////////////////////////////////////////////////////
149. class Button
150. {
151. int rectX, rectY; // Position of square button
152. int rectSize = 50; // Diameter of rect
153. color rectColor;
154. color rectHighlight;
155. boolean rectOver = false;
157. Button(int _rectX, int _rectY)
158. {
159. smooth();
160. rectColor = color(0);
161. rectHighlight = color(51);
162. rectX = _rectX;
163. rectY = _rectY;
164. }
166. void display()
167. {
168. update(mouseX, mouseY);
169. if(rectOver) {
170. fill(rectHighlight);
171. } else {
172. fill(rectColor);
173. }
174. stroke(255);
175. rect(rectX, rectY, rectSize, rectSize);
176. }
178. void update(int x, int y)
179. {
180. if ( overRect(rectX, rectY, rectSize, rectSize) )
181. {
182. rectOver = true;
183. } else {
184. rectOver = false;
185. }
186. }
188. void mousePressed()
189. {
190. if(rectOver)
191. {
192. b++;
193. }
194. }
196. boolean overRect(int x, int y, int width, int height)
197. {
198. if (mouseX >= x && mouseX <= x+width &&
199. mouseY >= y && mouseY <= y+height) {
200. return true;
201. } else {
202. return false;
203. }
204. }
205. }

manipulate multiple PImage with mouse

[13 Replies]
- 20-Feb-2012 06:09 PM
- Forum: Programming Questions
Hi,

I'm really new to programming and I need a bit of help. I want to write an app that has a bank of elements (PImage or Shape elements) on the left and a background image on the right. I want to be able to click on the elements on the left to add them to the image one at a time (or drag it on to the canvas), and I want to be able to resize the elements individually.

Is Processing capable of this? I know that might sound confusing, so I'll start with just one question. In this example have commented out the images and replaced them with rectangles. I want to be able to manipulate each rectangle individually, without affecting the other one. In my app, I want these to be images (.png) rather than shapes.

Now that I've typed this out. I feel like I should be able to answer my own question, but I'm stumped. Maybe I've been looking at this too long.

Thanks in advance!
2. //PImage clv;
3. Tree tree;
4. Tree tree2;
6. void setup() {
7. size(800, 500);
8. smooth();
9. imageMode(CENTER);
10. // clv = loadImage("clv.png");
11. // tree = new Tree("tree.gif", 50, 50);
12. // tree2 = new Tree("tree.gif", 33, 60);
13. tree = new Tree(50,50);
14. tree2 = new Tree(150,150);
15. }
17. void draw() {
18. // background(clv);
19. background(150);
20. tree.display();
21. tree.move();
22. tree2.display();
23. tree2.move();
24. }
26. class Tree {
27. PImage tree;
28. float x,y;
30. Tree(
31. //String filename,
32. float x_, float y_) {
33. // tree = loadImage(filename);
34. x = x_;
35. y = y_;
36. }
38. void display() {
39. // translate(x,y);
40. // image(tree, x, y);
41. rect(x,y,100,200);
42. }
44. void move() {
45. if (mousePressed) {
46. x=mouseX;
47. y=mouseY;
48. }
49. }
50. }

Activity Trend