Optical Illusion Mode - Extreme Rotation!

[mkunoff]

I initially reached out to ChrisK about this, but I’m sure things are quite busy right now so I’m going public with this idea to get some feedback. My main question is - Is it possible to get the same rotation rates as I have in the examples below?

I’m a big fan of the ETC and I’m just now getting my feel wet with Python/pygame and I would definitely like to help expand the library of patches. Considering video is not a viable option on the ETC (and I’m not bothered by that), I have an idea which I hope will interest users, and the aesthetics of it fits the Critter and Guitari style (imo). We can create interesting animated content via the rotation of still images (PNG) which are designed for optical illusions and/or animations via techniques such as the phenakistoscope and Benham’s disk.

These 3 examples are all done simply by rotating a PNG (preferably transparent) and modulating it’s speed.

Here’s an example using a monochrome concentric pattern, spinning at increasing rates:

Now we can add a color gradient to amp up the effect and with even higher rotation rates (the result is amazing):

And now an example of a phenakistoscope technique (8 frames a second):

The techniques for the first two clips would be much simpler to implement than the phenakistoscope, since that technique depends on a much lower frame rate (8-12 frames/second is common). I was able to replicate this by outputting at that frame rate, but for 60 fps, I had to do discreet 45 degree rotations in 8 frame chunks (no tweening) to replicate the “look” of 8 fps.

Since the ETC operates at 60 fps, do you think it’s possible to replicate the same rotational speeds? Or is there some limitation I haven’t considered yet?

I would love to hear any feedback about it and maybe if someone with Python/Pygame experience would be willing to guide me in the right direction, As far audio input goes, I was thinking triggers would cycle through all the rotational rates, sequentially or randomly.

Thanks for reading all this! -Mark Kunoff

[thetechnobear]

etc is 30fps

[mkunoff]

Oh crap! Well, 30 FPS still looks pretty awesome too. It’s processing now…

[Wannop]

They would be incredible!

[thetechnobear]

this is it running on the Organelle/OTC
(well as close as i could find a similar image… if you supply the one your using i can try that)

Mark Harris

you alter the speed of rotation with knob 1…
as i said the speed is limited to 30fps max, so in practice, I found a varying rotation between 0-10 degrees per frame, seems to give me most ‘effects’
seem to not be stressing the cpu much

I did find another nice effect, which was having two rotating circles overlapping, you can get some nice interference patterns

EDIT: so been doing some hunting for other ‘optical issue’ images, some do look really good , and the cpu is really low… so now I need to get them reacting to music, I think changing their speed is the most logical thing to do

[mkunoff]

Holy sh*t - you rock!!! I can supply you with plenty of images if you want. I’ve attached the color wheel version from my example. I’m anxious to check out the code and learn from it.

Is there a limit to the speed of rotation? I realize the 30FPS is a factor, but I was quite surprised by the strobing effects at super high speeds.

Also, how taxing would it be to have an image behind the transparent PNG? (or better yet - a slideshow.)!

[matt_x]

Blimey. Time to sell my Solar 250

[mkunoff]

@matt_x

Solar 250

Wow, just checked out that projector. Thanks for that tidbit, had no idea!

I think we are onto something with rotating images. It’s a quirky approach which fits the C&G aesthetic I must say.

@thetechnobear - What do you think of the phenakistoscope idea? Really low frame rates are needed, but I saw in a recent Python tutorial where it seems you can control the rate below 30? Programmatically could be done as well, just rotate the image in chunks every few frames depending on the frames in the image - in the above case it is 8. Using Chrome, check out all of the phenakistoscopes which can be found…
https://www.google.com/search?q=phenakistoscope&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj48L6h553YAhUi94MKHZMOCOYQ_AUICigB&biw=1352&bih=717

[thetechnobear]

ok, in colour…
https://www.instagram.com/p/BdAjhW8B48t/?taken-by=thetechnobear

this one i think is slightly better, as rather than just take white as the alpha, I selected the background to make transparent, so the actual circle doesnt have transparency, which gives it more definition I think.

and yes, you can clearly see the strobing affect at high speed, not sure how clear it is for an iPhone video of a TV screen ;)… when it gets dark, im going to fire up my projector.

the code really is trivial

[import os
import pygame
import glob

image_index = 0
images = []
angle = 0



def setup(screen, etc) :
    global images, image_index
    for filepath in sorted(glob.glob(etc.mode_root + '/Images/*.png')):
        filename = os.path.basename(filepath)
        print 'loading image file: ' + filename
        img = pygame.image.load(filepath)
        images.append(img)


def draw(screen, etc) :
    global images, image_index, angle
    
    angle -= (etc.knob1 * 180)
    if angle < -360 : angle = 0

    if etc.audio_trig or etc.midi_note_new :
        image_index += 1
        if image_index == len(images) : image_index = 0
    
    img = pygame.transform.rotate(images[image_index],angle)

    y = int(0.5* 720) - int(img.get_height() * .5)
    x = int(0.5 * 1280) - int(img.get_width() * .5)
    screen.blit(img, (x,y))

this loads a set of images in mode/images , toggled with a trigger, so i can easily switch between them to see what they look like

I’ll check out the phenakistoscope… need to read up a bit.

one thing, I’ll admit im not quite sure about your terminology for rotation speed (where you talk about 128kX)…
as I dont think you can go above 180 x 30 = 5400x … but perhaps I’m missing something.
the reason being you can rotate N degrees each frame, but you have to consider 359 deg , is the same as -1 deg, so 181 = -179 deg (so you can rotate a max of 5400x in each direction)
… but perhaps your numbers come from higher frame rates?

@mkunoff

Also, how taxing would it be to have an image behind the transparent PNG? (or better yet - a slideshow.)!

the slideshow will cost the same as a static image really… image behind will lower the framerate, would have to test 20-40%?

as an aside,
a bit of good news I did hack otc, to lift the framerate… and found I could render this at 40 fps, of course this means cpu jumps to 95%, but what this means is, at 30fps , we probably have about 20% ‘in hand’, so space for more effects etc

[thetechnobear]

is this what you had in mind @mkunoff ?

Mark Harris

… not the best images as basis, just what i could quickly find on google image search, and then sort out in gimp
but i think this is the concept, no?

[mkunoff]

OMG! You are my Santa!! Merry Merry Christmas Christmas!!!

[mkunoff]

Dude - seriously. I am so grateful for this!! Can I send you some money or a gift card?

So, as far as triggers go… you could randomly modulate position, scale and rotation speed. If you could also make a mode with background image, or slideshow - that would be an amazing mode with so much possibility!

I’m now working on a library of images for this! I should keep the size consistent, yes? What dimensions would you say are ideal? 600x600px?

[thetechnobear]

nah, its ok, I do it all for fun… it’ll be interesting to see what others can come up with…
as you can see from above, its only a couple of lines of code.

@mkunoff

So, as far as triggers go… you could randomly modulate position, scale and rotation speed

yeah, this is all possible, ive just put it on the knobs control, so I didnt have to hook up audio
but for sure, using the audio in to modulate the speed, or triggers to flip, all very easy

if you prepped the images well, I think you could also color key the image, so you can change both the foreground and background.

btw: in the last one with 2 images, these are completely independent rotations/images, at I was still getting 20-30fps.

@mkunoff

I’m now working on a library of images for this! I should keep the size consistent, yes? What dimensions would you say are ideal? 600x600px?

dimensions, well this code will work with anything, and you can potentially rescale at startup if necessary, or even on the fly (costs you fps ;)) … ive been using 320x320, just because thats half the vertical resolution, so would leave some space for other things to happen
(as you know, the main thing, is ensuring the image is square, and exactly centred, unless you want a wobbly effect )

[mkunoff]

Great! I’m putting the images together now. Most will be PNG with transparent background - this is what you mean by Color Key, yes?

I think I will make 2 sets - small and large. 320/640px

May I ask for one specific mode? Image slideshow background (I plan to use full 1280x720 image for the background) with one spinning disc image in the center with adjustable scale, and maybe the ability to cycle through the spin images.

Wow - this is so awesome.

[thetechnobear]

@mkunoff

May I ask for one specific mode? Image slideshow background (I plan to use full 1280x720 image for the background) with one spinning disc image in the center with adjustable scale, and maybe the ability to cycle through the spin images.

I’ll have a look tomorrow, as not much time left today.
… I guess, I’ll muse over how to interact with the images.

the thing to bare in mind, is I cannot calculating the ‘stop motion’ speed on the phenakistoscope, as i dont know the number of images… so thats probably under user control…
… but for non stop motion stuff, thats could be under audio control, at least within certain bounds.

colour key, probably wrong term actually…
what i actually would like to be able to do with the monochrome images, is mess with the colour palette.
basically translate black to another colour …

(yes your right the backgrounds should all be transparent in the png… this is so you dont have to worry about the rotating background, which you can see on the ‘swapping heads’ example, as thats not got the alpha exactly right… as it wasnt a pure background colour)

[mkunoff]

Perhaps a user variable for the frame rate on the phenakistoscope mode?

Can Pygame be used to parse a filename? So, if you put the frame rate in the filename?

Thank you so much for all of this! I’m getting all the images together - it will be quite the selection!

Oh! Also for your “color key” idea - I now understand! - Here is an 8-bit 2-color PNG…

[thetechnobear]

@mkunoff

Can Pygame be used to parse a filename? So, if you put the frame rate in the filename?

yes… but i think we need to tie down what we mean by frame rate. (see my above comment)

frame rate is theoretically fixed (see below!) at 30 fps, so what really we are talking about is how many degrees do we rotate per frame… or you could call this ‘rotations per second’ if you wish.

so for stop motion, if there are 6 images, you need to rotate at a multiple of 360/6…
so the cougar one, I noticed was ‘stopped’ at 0.3333 * 360, i.e. 120… and id need to check, but i suspect, whilst its 6 pictures, perhaps its only 3 different frames (id need to check)
… so yeah, at that point you do get FPS, but only because we know the number of images.

i also suspect the rotation speed might still need fine tuning, if the FPS drops below 30fps due to heavier cpu load … but id need to check this.
(i.e fps is capped at 30fps, but higher cpu might mean you only get e.g. 20fps)

also of course this is all only about stop motion… for images like your rotating colours, what speed you want, really depends what effect you want, as different speeds, have different visual effects.

anyway, the code is simple, so once we have the basic version, its easy enough to do variations.

btw, there is an interesting relationship, which i have not figured out between the image used and the FPS, the cougar example uses 25% less cpu than the others.
I’m not sure why, i suspect it might be something to do with image size/transparency?
(its has a high percentage of transparency compare to other images)

[mkunoff]

I’d like to hear your feedback on the 2-color PNG before I render out those versions, but if it would make it possible to apply color, and be able to modulate the color - that would be fantastic.

Otherwise, I have a bunch of images rendered as monochrome or color 24-bit PNGs. I’ll host them in a more appropriate place later, but here they are - https://we.tl/syQvvV4xmi.

[mkunoff]

Here’s an example with one of the new images, ‘contrazt-02’. A wide variety of patterns emerge and things really get strobing at the highest speeds.

[oweno]

This is all looking really cool! nice work, can’t wait to try it out.