Author Topic: Floating 3D Chart  (Read 543 times)

Offline John

  • Forum Support / SB Dev
  • Posts: 2186
    • ScriptBasic Open Source Project
Floating 3D Chart
« on: July 29, 2018, 05:42:43 PM »
This is very cool and I would like to know how they did it.


Offline AlyssonR

  • Advocate
  • Posts: 125
Re: Floating 3D Chart
« Reply #1 on: July 30, 2018, 01:42:52 AM »
I always hated this kind of thing.

You start with a 2D object (x- & y- axes) made up of other 2D objects, you then apply an altitude to a copy of them, so that you have a series of flat shapes floating above the (x,y,0) plane. Apply an outline in the (x,y,0) plane and fill it with a background colour.

Draw in the surfaces connecting the (x,y,0) shape to the (x,y,z) shape using the colour of your choice (in this case, the boundary colour).

Drop the object into a 3-D rotation package (this is the bit that really, really hurts when you try to write it yourself), and set a series of transitions and shading options - the one in your GIF is quite basic, and away you go.

3D rotation and shading engines are best presented as objects with pre-settable parameters for shading, shadow, light source options, etc. and with a call that takes an object descriptor, rotation(α,β,γ), translation(x,y,z) etc.

High-level 3D engines tend to be rather slow and glitchy, but a proper, optimised 3D library can be both fast and seamless. Only compiling in the necessary features helps.

Offline John

  • Forum Support / SB Dev
  • Posts: 2186
    • ScriptBasic Open Source Project
Re: Floating 3D Chart
« Reply #2 on: July 30, 2018, 02:31:32 AM »
This may be a JavaScript example. I'm trying to find more details on how it was done.


Offline John

  • Forum Support / SB Dev
  • Posts: 2186
    • ScriptBasic Open Source Project
Re: Floating 3D Chart
« Reply #4 on: August 01, 2018, 12:53:08 AM »
Those are some great chart APIs!

Offline AlyssonR

  • Advocate
  • Posts: 125
Re: Floating 3D Chart
« Reply #5 on: August 01, 2018, 01:05:02 AM »
Best I can do ....

Of course, the idea is to chop out the bits that you like and hack them with a hammer and a craft-knife until they generate the core features that you want.

You then plug the result into a 3D animation api of some sort.


On the other hand, I never use flashy tools like that, it's all rather mundane rich text and image driven stuff.

Offline John

  • Forum Support / SB Dev
  • Posts: 2186
    • ScriptBasic Open Source Project
Re: Floating 3D Chart
« Reply #6 on: August 01, 2018, 01:17:55 AM »
It's probably HTML5 based.

Offline AlyssonR

  • Advocate
  • Posts: 125
Re: Floating 3D Chart
« Reply #7 on: August 02, 2018, 01:04:04 PM »
Even worse.

I'm still trying to get my head round HTML3. ;)

CSS is a dark art and Java is just voodoo speak to me.  :o

Offline Marcus

  • BASIC Developer
  • Posts: 11
    • NaaLaa
Re: Floating 3D Chart
« Reply #8 on: August 10, 2018, 02:23:42 PM »
I agree, html, html5, javascript, css ... what becomes the messy standard is so random.

Offline AlyssonR

  • Advocate
  • Posts: 125
Re: Floating 3D Chart
« Reply #9 on: August 11, 2018, 02:13:29 PM »
There's a standard?

I thought the design was based on picking keywords and ideas out of a hat - and then translating the lot into English from English via Japanese, Urdu, Russian, Hindi and Rongorongo.

Of course, it could just have been a core idea and a process of gravitational accretion.

Offline Marcus

  • BASIC Developer
  • Posts: 11
    • NaaLaa
Re: Floating 3D Chart
« Reply #10 on: August 12, 2018, 01:40:59 AM »
There's a standard?

I thought the design was based on picking keywords and ideas out of a hat - and then translating the lot into English from English via Japanese, Urdu, Russian, Hindi and Rongorongo.

Of course, it could just have been a core idea and a process of gravitational accretion.

Haha :)