pouët.net

Rubber Vector

category: code [glöplog]
Hello!

I'm very interested about the rubber vector effect, like in Octorubber, Natsu no Gomu or Dubzilla. But I have some questions, maybe you can help me.

Is the twisting effect made only on one axis or on the three? (in the linked demos above, it seems the twisting effect is made vertically, maybe I'm wrong?)

How the lines of the cube can be curved when moving the vertexes? (when I move my vertexes, the lines of my cube remain straight)

Your help will be appreciated as I really love this effect and want to try it!
added on the 2018-05-15 09:58:18 by UnlkA0 UnlkA0
My understanding of the effect is that it's actually done in screen-space as a post-effect; you split the image up into lines, and each successive line is rendered one frame later than the other.

It's not the most spectacular illustration but I accidentally reproduced a crude version of this effect in Median: https://youtu.be/i4vf8kpQ3hA?t=35 - note how the motion of the cube seems to "rubber" through the image once image gets split into sections.
added on the 2018-05-15 10:02:45 by Gargaj Gargaj
The main idea here is that you have several frames of a regular cube rendered in memory. This is often done by presenting the cube normally, at which time you can populate the render buffers while displaying them normally. Once there are enough of these "history buffers", the effect is achieved by displaying different scanlines from different history buffers (usually selected by a sinus or some other periodic thing). I believe it's also common to continue rendering the object normally and cycling history buffers to keep it more dynamic.
added on the 2018-05-15 10:20:02 by ferris ferris
Quote:
displaying different scanlines

Now that I think about it and have taken a look at the vectorslime in Crystal Dream 2, I'm now wondering if indeed they have to be scanlines, or you can just do a lookup based on any texture to make the rubber less aligned to the horizontal lines.
added on the 2018-05-15 10:22:15 by Gargaj Gargaj
Per-scanline is the traditional approach, probably because that mapped nicely to the display architecture of the old platforms. (Note that on those machines a naive "have a large enough array of historical framebuffers" quickly runs into memory issues ).

Anyway, doing non-scanline-based rubbering is a nice evolution of the original effect, as proven by some old vector slime effects on PC, a few of my own old AGA prods (such as the screenshot effect here), and Excess' recent (and very pretty) Aurora
So if understand well, the twist effect is done on the already rendered cube.

I need to:
- render different cube rotation steps in memory
- when displaying a frame, I select, with a sin function, lines among the rendered cubes in memory
Something like that?

Gargaj: I love Median's design! Thanks for the link, I didn't know it!
added on the 2018-05-15 10:58:26 by UnlkA0 UnlkA0
Blitz Basic has example of rubber
added on the 2018-05-15 11:07:35 by g0blinish g0blinish
I believe the vectorslime in CD2 uses diagonal lines (45 degrees), not scanlines.
added on the 2018-05-15 11:47:28 by Sesse Sesse
Not to get too off topic, but I wonder if there's distance function to recreate the "rubber" style effects in shader? I've always wanted to use the "bending cube" style effects in a shader, but I don't know how you'd make it happen.
Offset your time variable based on the fragment's position?
added on the 2018-05-18 07:27:43 by yzi yzi
I guess in raymarching you're probably better off just distorting the space.
added on the 2018-05-18 09:07:22 by Gargaj Gargaj
Quote:
I guess in raymarching you're probably better off just distorting the space.


Yeah I could see that, but I can't imagine how that would look for a "bend" rather than a straight translation. Someone must have done something like that before.
Code:rotY() { ... angle = iTime + r.y; ... }
added on the 2018-05-18 10:04:51 by pohar pohar
better use some sinus/cosinus to make it look sexy! ;)
Code: rotate(p.xz, sin(p.y+time)); return cube(p, float3(1,10,1);
Quote:
Offset your time variable based on the fragment's position?

Yup, that's how we used to do it in 3D space back in the early 2000s:

BB Image
BB Image
added on the 2018-05-18 13:37:41 by gloom gloom
That's per-vertex, though, not per fragment :-) (FWIW, the offset is based on distance from the origin of the object.)

…also, per-vertex envmapping sure is ugly.
added on the 2018-05-18 23:07:52 by Sesse Sesse
In case someone still didn't get the idea, it's to take any effect like this one

http://glslsandbox.com/e#46977.0

and then change it so that stuff is distorted according to the scanline position

http://glslsandbox.com/e#47051.0

Rubber/jelly anything.
added on the 2018-05-18 23:37:43 by yzi yzi
In the end of Anataus 4 it was done by keeping multiple frames of the effect in a frame buffer and showing stuff from different frames
https://www.youtube.com/watch?v=3jJqsP7W-ec&t=3m28s
added on the 2018-05-18 23:43:03 by yzi yzi
http://www.pouet.net/prod.php?which=3008
added on the 2018-05-19 09:04:17 by dixan dixan
Back in 1994 i did a Rubber-Logo in
gimme alcohol by BONZAI BROS.
and as it was fullscreen on VanillaA1200 i also prerendered all the frames for a 90°-Rotation (on y-axis) of a Textured Cube into Memory...in the Demo you´ll see a Graphic being shown for a very long time while it prerenders those...and then via Sinus-Table-Lookup showed different Rotations per Scanline. That´s how everyone did it i think, as realtime wasn´t possible at 14MHz.

Nowadays i would do that with raymarching, as i posted above!
Here´s what Sesse described, something i used in my last TextMode-Demo TMDC20 Compothriller by Genesis Project & Tristar & Red Sector Inc., which is what i would call modern-rubber-vectors:
Code: rotate(p, length(p)+time);

This needs the rotation to be applied before you translate the object in space of course.
The original rubbercompo thread on ADA also contains some info about different Amiga implementations.
my attempt should be possible with a scanline approach. basically you keep several buffers in memory and do the lookup from there. the lookupvalues is done via a buffer, you could use some kind of color-cycling as well, which i think the vectorslime in cd2 does, but it might also have one or more feedbackbuffers (most likely scanline-spans).

here is the result i got:
BB Image
added on the 2018-05-20 04:29:22 by rudi rudi
for a more detailed explanation.
1. you have either a flat-shaded cube rotating in realtime, or an animation of a cube rotating, by maybe RLE-compression or some fast computation to render it to some backbuffer.
2. you do a realtime-plasma or color-cycling of some image with sines, or perhaps keep these as separate spans.
3. you keep history buffers or horisontal-spans. In my example, i used 24. this might be too much for slow cpu's, or lack of memory, which is the reason I mentioned feedback buffers (there might be a trick there i haven't discovered yet).
4. For the "history-buffers" in punkt 3, the plasma/sine-offscreen buffer from punkt 2 is used as lookup-value for the same pixel-position as the "history-buffers". This finally this is rendered to the screenmem.
added on the 2018-05-20 04:44:38 by rudi rudi
http://g0blinish.ucoz.ru/forblog/jellocube.zip
added on the 2018-05-20 05:28:47 by g0blinish g0blinish
For raymarching, i created this a longtime ago.

https://www.shadertoy.com/view/XdGSRz

it just offset the rotation per scanline.
added on the 2018-05-20 07:55:08 by SCA SCA

login