4 ms·
I didn't find this, I was given it by a grizzled veteran, but... Back in '99 I had a lot of experience with Adobe's SVG plugin, especially around the javascrip
by shaftway 3y ago
I didn't find this, I was given it by a grizzled veteran, but...
Back in '99 I had a lot of experience with Adobe's SVG plugin, especially around the javascript capabilities. I had been commissioned to build some demos but given free reign. One of them was a 3D molecule structure. SVG doesn't have any real 3D capabilities, so I was effectively using it as a canvas with a ton of javascript to move things around.
Today I know that the "proper" way to do this is with a matrix for camera position and orientation with a bunch of math, but this is back when I was young and dumb. So I ended up writing about 3 full screens of trig calculations to figure out exactly where each atom should be and to track mouse drags to rotate the whole thing. Remember that this was back in the 90's, so my 2-3 frames per second was nothing to sneer at. It worked pretty well, but there was a bit of weirdness with the coordinate systems; dragging up would rotate the top away from you at first, but if you turned the model around to the side it would be backwards.
So I show this off to a coworker of mine. This guy worked on some early Sega Genesis games, and he was like "oh cool, how did you do it" so I pulled up my source. He goes "huh. Try this" and deletes all of my trig code and replaces it with this:
dZ = 0.001 * mouseDeltaX;
dX = 0.001 * mouseDeltaY;
for i in atoms {
atoms[i].x += dZ * atoms[i].y;
atoms[i].y -= dZ * atoms[i].x;
atoms[i].y += dX * atoms[i].z;
atoms[i].z -= dX * aroms[i].y;
}
It was glorious.
My frame rate shot up to an easy 30 fps and because this calculates the next position iteratively the weird orientation problem I had was gone. This approximates circles, but it was close enough that 48 hours of spinning led to no visible degradation.