Articles Hierarchy

Articles Home » Processing » processing JS update: test 3D view

processing JS update: test 3D view

for several times i used processing and also the sister project processing js
many times i ended up in searching for a better solution
but i try again from time to time, just to watch that baby grow.

but first i have a different problem:
on my not too old laptop ( i5-3210M cpu )
what i got with a win 7 ulti SP1 64 bit installed at a thai shop,
what understandable i never updated...
i have a problem to run WEB GL in firefox browser.
reading about that i got the idea i need driver update ( possibly after windows update.. )
digging again about that here some news:
i check the site and little bit down the WEB GL section no examples are shown.
but following this i open new firefox browser window
in address field type about:config and get a settings list
and in line webgl.force-enabled click to set it true.
now i update the above processing site page and see the examples.
i am a lucky man!

at i wanted to download / update, but the 2 links give me the just code pages, what i am supposed to do?
ok, right top is a link "Fork me on GitHub" and there right find the "download zip" button.
today get the v1.4.8 version. ? Released 25 March 2014?
no, webpage little bit old: the download shows 1.4.13 (released March 21, 2015) in
and "version": "1.4.16" in package.json
sorry, but it looks that that maintainer group need some coordination, anyhow i not understand what is it with and of
pls see more here

i test IE11 and FIREFOX 45.0.1 work, google chrome 49.0.2623.110.m NOT.

now the understanding is that you need to download the file
processing.js or processing.min.js ( depend on what functions you need??)( and not the full ZIP )
store at your server and write a index.html and a sketch.js ( .pde?) file also there.
well, as we talk java, you not need a server at all, just for play / develop you can do that in any path on your computer! ( a double click on index.html ( or test.html ) will start the thing. )
also there is no need to "have" or "serve" the processing files, any browser can load it at run time, so instead of the line script src="processing.js" you can use ( link to ) or
and you do not need any of that file handling...
also the other files: according to the quick start guide you can even include processing code directly in the webpage. i try to do that minimal set up first.

see here and get the code for a test. if you put your code into a separate file like pjs.pde and call it from index.html with
canvas data-processing-sources="pjs.pde". if now the file pjs.pde is really hidden i can not say.

i not play micro controller for some time because i have a other project, i plan / build a house.
as i was ever fascinated with 3D drawings, but with autocad i failed on that again and again,
now i use google (trimble) free sketch up make from here
as i can not talk with the building company.. also not via my "long hair dictionary", aka thai wife,
make drawings is the best way to express my ideas.
so i draw the details, make screen shots and put them on a "working" web page, or print on my laser printer.
but i also found a perfect way to bring the whole 3D drawing ONLINE, converting the sketch up drawing to sketchfab, see here.
both tools have that HMI to view 3D, while for a camera you call it
pan -- move
tilde -- rotate
zoom -- magnify
on computer screen you use the mouse to view your model from all sides,
mouse wheel makes the zoom, right mouse button allow the move, left mouse button allow the rotate now here called ORBIT.

here play with processing i want first try to do same, any 3D object what the user can view from all sides.
a good object for start could be the color cube what i used in a setpoint program for my first arduino RGB LED pwm project long time ago.
see here, just with the original example code,
now only need to work on the mouse operation code: already close with this code

But actually i wanted that 3Dview/operation for a new project with processing:
solar system with planet path...
now ( acc KEPLER laws ) i need first to get understanding and info about ellipsis / (sun in ) focus / eccentricity
wiki give me list of planets and in the detail links the data for the elliptic path and also planet size...

here as teaser the first look:

from here.
i got the ellipsis data and planet size in already, but for the next step, the orientation of the ellipsis in the solar system need to convert the angle info into a rotation ( before draw the ellipsis ), but still search about the axis system? wiki
also the understanding of the rotation in processing:
for the axis it looks like in processing i first must rotate Z ( - omega ) and then rotate Y ( - inclination)

here i made a extra test , what reads ( pls use [view page source] ) very confusing because for the translate focus back and forth for drawing the ellipsis with sun in focus. again the center has a yellow sun, a white ellipse with same center, for a planet path it must be moved to the blue ellipse what has the sun in focus1. then it must be rotated ( Z ) for omega: " It is the angle from a reference direction, called the origin of longitude, to the direction of the ascending node, " gives the cyan ellipse
and then ( Y ) for the inclination creates the purple elliptic disk.

and the real job: what is the planet position at a given time?
if pos = 0 ( rad ) the planets are in Aphelion ( far from sun and also far (up) from reference plane )
same as max x and z, each in its ellipse after rotation and inclination.
if the "Mean anomaly" ( i think it's at epoch ) angle ( as rad ) mean it was the position of the planet
at J2000 ( 1.1.2000 12:00 ) that angle must just be added to above (top) position.
i not find a info how to calculate the planet position ( over time ) ( regarding the WIKI INFO,
so i found my own easy way:
- i calculate the JDN days for a needed date, subtract the JD2000 and have the (earth ) days since J2000.
- divided by the orbital days for each planet gives its N.x rotations since J2000
we not need the N rotations, only the 0.x part and that in rad, added to the position at J2000.
even if the way is not completely wrong still i know that the position / speed related is very wrong.

as this works as a constant average angle speed ( what is ok for a circle ) here for the ellipse it is very wrong
( more wrong as a constant speed ) as for the Aphelion it simulates the fastest speed ( where it should be the lowest )

but besides the ellipse speed a planet year works fine, like with arrow right and arrow up ( increase month and day ) its nice to see the planets rotate.
with this i give you the working version ( check in another day again, the show is getting better and better: )

but how to check it?

for the visualization there is following problem, the real distances are big, the objects, even sun small.
so, to see something i start cheating: i show objects bigger:
sun by 20
planets by 1000
but as in real live, once you start lying, you cant stop:
// problem, i cheat with planet size, but the moon distance is relatively small
// so the moon rotates inside earth!!
// so for the moon we must cheat double, by make its distance from earth ( a ) also bigger
moon_a_cheat by 50

i was interested in the speed, way, time over a elliptic planet way,
found some info, but mostly math i did not understand,
now, i am a excel guy, in google sheets i put some earth planet data, and calculations and then try to do my own elliptic integrals, just by columns, using only 10deg steps / 36 lines.
i wanted to see the change of speed way time depending on e "eccentricity", using earth data but a e = 0.6 instead of 0.0167 i see:

and together:

even i like the interactive tools where you see a planet on a ellipse moving slow and fast, try this
but never i have seen it like in my graphs.
i was even able to simulate that curve by a spline u(t)/U_sim= (w + e*sin(w))/2PI , but at e > 0.5 the error at the perihelion increases, still i might use that for a position correction of the planets, but also go on digging more info.
this sounds interesting: Computing planetary positions

just see this: