Rotating images in 3D

Programming Questions

musically..

in Programming Questions • 2 years ago

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:

PImage world_map_img;
float angle = 0;
void setup(){
size(width, height, P3D);
world_map_img = loadImage("world_map_wikipedia.png");
}
void draw(){
increase_angle();
smooth();
image(world_map_img, 0, 0, width, height);
for(int ii; ii=0; ii<=N; ii++) {
pos_x = city_positions[ii].x;
pos_y = city_positions[ii].y;
pushMatrix();
translate(pos_x, pos_y, 0.0);
set_right_colors(ii);
ellipse(0, 0, 10, 10);
popMatrix();
}
camera( radius * cos(angle), radius * sin(angle), fixed_z_height,
width/2, height/2, 0.0,
0.0, 1.0, 0.0); // Will throw more trigonometry at it soon.
}

There are some problems I am running into:

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)
After calling 'smooth()', the drawing and movement is extremely slow.
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

Replies(9)

anchnk

Re: Rotating images in 3D

2 years ago

Well just a few hints after a quick look at your code.

First do not use width and height for your variables name. These names are defined by processing to get sketch window respective width and height.
You do not need to declare pi, processing already defined it. Just use PI (in uppercase).
If you want to enable anti-aliasing call smooth() in the setup() function not in draw(). So that you just call it once. This function is acting like a flag so you just need to call it once to say processing "hey i want anti-alias for all what happen next".
The diagonal, u're seeing is a know bug for the P3D renderer. Try to use OPENGL renderer (you need to import processing.opengl.*;)
To store your cities info you can use a PVector array rather than a 2-dimensional array. Something like :

PVector[] cities_info = {
new PVector(0.85625, 0.35416666), // Ikoma, Nara, Japan
new PVector(0.2375, 0.37083334), // Atlanta, GA
new PVector(0.2078125, 0.37708333), // College Station, Texas
new PVector(0.225, 0.30833334), // Madison, WI, US
new PVector(0.6890625, 0.47291666), // Hyderabad
new PVector(0.265625, 0.31875), // Midtown Manhattan
new PVector(0.2546875, 0.31875), // State College,PA
new PVector(0.1375, 0.27916667), // Bellevue, WA
new PVector(0.25, 0.30208334), // Toronto
new PVector(0.49375, 0.28333333) // Lausanne, SW
};

Then you can access each city coordinates with :

cities_info[i].x and cities_info[i].y

You can also create a class to regroup the cities coordinates and the cost of living in the same structure.
I can't watch the vimeo video (because of corparation proxy) so i don't know what result u're looking for and help you more.
So, this is just a start but might help you a bit.

musically..

Re: Re: Rotating images in 3D

2 years ago

Thanks for the pointers!

I have addressed these issues:

Changed the variable names width and height.
Used PI
Moved the call to smooth() to setup(). I was experimenting with drawing the image with noSmooth() and then switching to smooth() for the ellipse.
Using OPENGL in place of P3D fixed the issue of diagonal across the image. Also, it made the animation a lot smoother, too. :)
Moved to PVector instead of 2D float arrays.
I have not yet moved the cities and costs together in an Object oriented fashion. I guess that can wait for a later time.

However, to fix the flickering eclipse problem, which remained after moving to OPENGL, I found a workaround.

Now I am drawing the pictures one pixel 'above' the image, that is at z=1 while the image is drawn at z=0. That takes care of the smoothness and flickering ellipses I had.

Is this an issue or an expected behavior?

Thanks again!

musically_ut

anchnk

Re: Rotating images in 3D

2 years ago

Can you post your updated code ?
Sorry I'm working at the same time and i don't have the time to update your code.
Just to know how you're drawing ellipse and image to see if it's an issue or expected.
Maybe hint() might help regarding OPENGL anti-aliasing.

musically..

Re: Re: Rotating images in 3D

2 years ago

I had committed the code yesterday, but accidentally did not commit the source code owing to inexperience with git. Now the repository has the updated source code.

Here are the relevant parts of the setup function:

void setup(){
size(window_width, window_height, OPENGL);
smooth();
frameRate(30);
world_map_img = loadImage("world_map_wikipedia.png");
}

And here is the draw function:

void draw(){
background(0);
angle += 1;
angle %= 360;
tint(0, 153, 204, 255);
image(world_map_img, 0, 0, window_width, window_height);
float pos_x, pos_y;
for(int ii = 0; ii < cities_info.length; ii++) {
// Set both the fill color as well as the stroke color
fill(get_city_color(ii));
stroke(get_city_color(ii));
pos_x = cities_info[ii].x * window_width;
pos_y = cities_info[ii].y * window_height;
pushMatrix();
translate(pos_x, pos_y, 1);
ellipse(0, 0, 10, 10);
popMatrix();
}
float eye_x = 500 * cos(angle * PI / 180);
float eye_y = 500 * sin(angle * PI / 180);
float eye_z = 500.0;
camera(
eye_x, eye_y, eye_z, // eyeX, eyeY, eyeZ
window_width/2, window_height/2, 0.0, // centerX, centerY, centerZ
0.0, 1.0, 0.0); // upX, upY, upZ
}

The change I did was at line 18, instead of translating to (pos_x, pos_y, 0), I translate to (pos_x, pos_y, 1).

This does not present any perceptible difference in the heights (the eye is 500 times further away from the image), while solving the flickering ellipses issue.

These screenshots will give an indication of what has changed (these are stills, the animation keeps rotating this image):

Is this an Anti-aliasing issue?

Thanks.

musically_ut

Update: Am unable to paste code properly for some reason. Sorry for the mis-formatting, and the mailbox spamming, if any.

anchnk

Re: Rotating images in 3D

2 years ago

Is this an Anti-aliasing issue?

No for me it's correct.

Note that you can still optimize your code.

Actually your computing the ellipse colors each draw cycles.

I think you can do it once store color values in an array (for example) and then just read that array once you need to access ellipses' colors.

You can also create a function that would generate the image as a off-screen buffer (see PGraphics() and PImage() and then use that buffer as a texture for a quad which is rotating (see texture()). However not sure that will speed up things significantly.

And you can access window-width and window-height using width and height variables.

Just use size(800, 480, OPENGL) and instead of window_width and window_height use width, and height.
Doing that you just create two more variables that aren't needed.

Last point, i'd make the object move instead of the camera.

Maybe something like:

translate(width/2, height/2, -500);
rotateX(cos(angle * PI/180.0));
rotateY(sin(angle * PI/180));

At the end of your draw() block.

I'm sure your code can run smoother than it's now with a few optimisation.
I'm testing your code on a computer which has 120MB ram and 8MB video memory.
And the sketch is laggy :)

anchnk

Re: Rotating images in 3D

2 years ago

Let me know if this code run smoother.

musically..

Re: Re: Rotating images in 3D

2 years ago

There was no perceptible difference in the performance of the two codes, and the flickering ellipses persisted on my system. Could be because I am using OpenJDK and not Sun Java (A dialog box informs me everytime I restart Processing).

Anyhow, since the performance was no longer an issue, I continued forward with the code, added video recording using GSVideo, and the final result looks somewhat like this: http://www.youtube.com/watch?v=kfpimsJ4iA8

I tried to imitate the FireCube example's way of making a 3D fire. It looked kind of ok, but was too slow + had transparency issues (the backgoround image instead of the flames was visible behind the near transparent smoke). Hence, I reverted to using the sliding ellipses to make the flames.

The updated code (with more screen-shots + a video) is in the repository: https://github.com/musically-ut/World-prices

Are there better/radically different fire-effect algorithms out there? Or should I start a new topic for it?

And thanks for all the help!

musically_ut

schanin

save the 3D movie as avi / mov / ogg

1 year ago

Hello everyone asking and answering on that topics.

One year later I come I across this forumpost, because I having troubles with saving 3D movies - first I worked with P3D and 'normal' MovieMaker, which saved the files, but much too small.

This Forumpost helped me a lot to 'clean' my code and thought using OPENGL and GSMovieMaker would save my files in the right size.

Like in the final code of 'musically' ( https://github.com/musically-ut/World-prices) - I added the record bollean and keypress for start and stop the recording, which luckily my opengl running more fluently. Even though the 'saving-functions' within the code are equal to yours, all the saved files, would it be mov, avi or ogg, are broken.

Could you tell me, what other issues could bother this code? My memorysettings? my RAM? My Versions (I am working on MAX OSX 10.6.8 and Processing 1.2.1)

Or might it be a misstake in my code, which I don't see? - this is it:

import codeanticode.gsvideo.*;
import processing.opengl.*;
GSMovieMaker mm;
boolean recording = false;
PImage bg;
PImage texmap;
PImage img1
float rotier;
int sDetail = 35; // Sphere detail setting
float rotationX = 0;
float rotationY = 0;
float velocityX = 0;
float velocityY = 0;
float globeRadius = 350;
float pushBack = 0;
int alph = 80; // alphavalue of Sphere
float[] cx, cz, sphereX, sphereY, sphereZ;
float sinLUT[];
float cosLUT[];
float SINCOS_PRECISION = 0.5;
int SINCOS_LENGTH = int(360.0 / SINCOS_PRECISION);
void setup() {
println("call size");
size(620, 680, OPENGL);
texmap = loadImage("eck4_colcol.png");
initializeSphere(sDetail);
img1 = loadImage("mitte1.png");
}
void draw() {
background(0);
rotier += 0.01;
int gross = 570;
elem(7, rotier, gross, img1, 10); // saveral pattern moving around a center, based on a textureEx
renderGlobe(); // a turning shpere maped with patterns based on a textureEx
if(recording) {
loadPixels();
mm.finish();
mm.addFrame(pixels);
}
println(frameCount);
}
void keyPressed() {
if(key == ' ' && !recording) {
mm = new GSMovieMaker(this, width, height, "innegump20.ogg", GSMovieMaker.XVID, GSMovieMaker.MEDIUM, 24);
mm.start();
recording = true;
} else if (key == ' ' && recording) {
mm.finish();
exit();
}
}

Thank you so much for your help.

Best,

Janine

musically..

Re: Rotating images in 3D

1 year ago

Hi Janine,

I have forgotten most details of the code I wrote, but I see one minor difference between your code and mine: you call

mm.finish()

in the draw() function. By my understanding, it should be called only once, when actually ending the recording of the video.

Try removing it and tell me if it helps.

All the best!

Top Reply