Processing Forum

Screen name:
musically_ut
Blog:
http://musicallyut.blogspot.com

musically_ut's Profile

2 Posts

5 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Fading Animation

[3 Replies]
- 16-Jan-2011 06:12 AM
- Forum: Programming Questions
I am trying to make a fading effect in Processing and I came up with this quick hack of sorts.

Could someone with some experience kindly tell me if this is indeed the best way of doing it or is there something better?
2. PGraphics pg;
4. void setup() {
5. size(320, 200);
6. pg = createGraphics(width, height, P2D);
7. smooth();
8. frameRate(60);
9. colorMode(RGB, 255, 255, 255);
10. pg.colorMode(RGB, 255, 255, 255);
11. }
13. void draw() {
14. background(0);
16. pg.beginDraw();
17. pg.tint(255, 255, 255, 200); // Make the next version of the image a little 'lighter'
18. pg.image(pg, 0.5, 0.5); // Put the PGraphics on top of itself (Not sure why I need 0.5 here)
19. pg.endDraw();
21. image(pg, 0, 0); // Paste the PGraphics object as an image
22. println(frameRate);
23. }
25. // On clicking, make an ellipse which will fade away into oblivion soon.
26. // The playing with colorMode is only to get aesthetically pleasing colors.
27. void mousePressed() {
28. pg.beginDraw();
29. pg.colorMode(HSB, 360, 100, 100);
30. float hue = random(360);
31. pg.fill(hue, 100, 100);
32. pg.stroke(hue, 100, 100);
33. pg.ellipse(mouseX, mouseY, 10, 10);
34. pg.colorMode(RGB, 255, 255, 255);
35. pg.endDraw();
36. }
Though this implementation works for the black background, I cannot get the transparent layer effect with it.

That is, if I place an image at the background (instead of doing a background(0) on line 14), then the image(pg, 0, 0) covers it with the black background. I would want the image to persist, with the fading ellipses over it.

Any ways/libraries to achieve this effect?

Thanks.

~

musically_ut

Rotating images in 3D

[9 Replies]
- 07-Dec-2010 04:28 AM
- Forum: Programming Questions
Hi,

I am a beginner in Processing (and 3D visualization) and I am trying to learn it by doing a small project in it.

I want a rotating map of the world with a few ellipses marking some cities on it.

Here is gist of how I am going about it:
1. PImage world_map_img;
2. float angle = 0;
4. void setup(){
5. size(width, height, P3D);
6. world_map_img = loadImage("world_map_wikipedia.png");
7. }
9. void draw(){
10. increase_angle();
11. smooth();
12. image(world_map_img, 0, 0, width, height);
13. for(int ii; ii=0; ii<=N; ii++) {
14. pos_x = city_positions[ii].x;
15. pos_y = city_positions[ii].y;
16. pushMatrix();
17. translate(pos_x, pos_y, 0.0);
18. set_right_colors(ii);
19. ellipse(0, 0, 10, 10);
20. popMatrix();
21. }
23. camera( radius * cos(angle), radius * sin(angle), fixed_z_height,
24. width/2, height/2, 0.0,
25. 0.0, 1.0, 0.0); // Will throw more trigonometry at it soon.
26. }
There are some problems I am running into:
1. If I do not call 'smooth()', the image drawn is distorted (https://github.com/musically-ut/World-prices/raw/master/screen_shots/16_58_46.png)
2. After calling 'smooth()', the drawing and movement is extremely slow.
3. There is a diagonal line across the map and the ellipses are very flaky ( https://github.com/musically-ut/World-prices/raw/master/screen_shots/20_58_47.png)
I am guessing (after reading the preliminary 3D tutorials, which do not seem to promote the use of camera function) that this is not the recommended way of doing things. Hence, before I blame everything from my Laptop hardware to the Java software, I would like a second opinion of how this should be done.

One option is loading the image pixel by pixel and doing the transformations by hand; I am hoping there is a better way?

The end result I would like is the background map of the world rotating as here: http://vimeo.com/4587178

Also, the source code (with the data files) is posted here: https://github.com/musically-ut/World-prices

Any code review/feedback/pointer-to-guidelines is welcome!

Thanks!

~

musically_ut

«Prev
Next »

Response title

Attachments

New to this Portal?

Activity Trend