Author: John

CSS phenakistiscope

The linked site: phenakistiscope de bal | Succursale | Ruppert & Mulot is indeed lovely. It uses Flash. This got me thinking a wee bit about CSS animations.

CSS phenakistiscope was a first test, followed by More phenakistoscope.

Here is an example (click on the image to see it without animation):

bird-cat-12

Image from: NCSSM | Flickr – Photo Sharing! used under a Creative Commons — Attribution-NonCommercial-ShareAlike 2.0 Generic — CC BY-NC-SA 2.0

There are more examples on the pages linked above, but I’ve added the following css to this blog (using the jetpack css module).

.catchase {
    animation-duration: 2s;
    animation-timing-function: steps(13,end);
    animation-name: anticlockwise;
    animation-iteration-count: infinite;
}

@keyframes anticlockwise {
    to {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    
    from {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

CSS3 Animations have some advantages over gifs, for this sort of thing, smaller files & more colours for two.

The css contains an animation @keyframes rule containing the animation code (the anticlockwise bit above) which is referred to in the images style. The bloc above could be shortened to:

animation: anticlockwise 2s steps(11,end) infinite;

I’ve played with css animation here before: Not an animated gif and am now beginning to get a handle on it. Wondering if it could be useful for optical illusions. I’d also like to make a virtual Phenakistoscope that could load different files that need different speeds and steps. Adding some sort of mask/viewer would be nice too…

This ain’t no Rotoscope

As usual it started with a tweet:

The referenced tweet looked interesting:

I’ve tried Rotoscoping before, but this looked good. I hied over to MacOS/OSX – Paint of Persia community – itch.io, read about it. paid $5 and set things up.

At that point I realise that the app helps you to manually trace frames, seemed a wee bit time consuming. I though I’d leave it for another day. I did start musing on doing something similar, I was thinging FFmpeg & ImageMagick.

Google takes me to Fred’s ImageMagick Scripts: CARTOON.

so the plan is:

  1. export a movie to a series of images.
  2. cartoonise those image
  3. create a move from the cartoon images

Bounus points for getting the sound track back in.

I already have ffmpeg & imagemagick installed on my mac. These are commandline tools.

I downloaded the cartoon script

First find a video:

YouTube downloader tool – Fastesttube!

Rename the downloaded file shower.mp4

Open the terminal and cd into the folder that has the cartoon script and the movie in it.

First extract lots of still images (make a folder shower first mkdir shower):

ffmpeg -i shower.mp4 -r 6 shower/out_%04d.jpg

this takes the input file (-i) at 6 frames per second and create jpg files in the shower folder with the file name out_0001.jpg ,out_0002.jpg ect

Given the movie is 3 minutes 22 seconds long I end up with 1212 images in the folder. I delete the last few manually to give me 1023 images.

I now need to loop through all of those images and create a cartoon version.

the use of cartoon is basically:

./cartoon face.jpg temp.jpg

There are some paramaters you can use but I stuck to the default.

This would take the image on the left and create the one on the right:

face.out

So I move into the shower folder cd shower

mkdir out;for i in *.jpg; do ../cartoon $i out/$i.jpg;done

this script:
makes a nother folder called out

for i in *.jpg for each file with a .jpg extension in the current folder do does:

../cartoon $i out/$i.jpg runs the cartoon script from the folder above (../), and saves the output file in the out folder with the same name.

When I kicked this off I quickly realised it would take a while to r=un through 1212 images, so went to bed.

The next morning I have 1023 cartoons (I don’t imagine that it took all night).
out_0672

Time to stich these together, it took me a few goes to get the paramaters right. (google helps).

ffmpeg -f image2 -framerate 6 -i out_%04d.jpg -c:v libx264 -pix_fmt yuv420p out.mp4

  1. -f chooses the format image2 which makes an image sequence.
  2. -framerate 6 to get the smae length of movie as I started with
  3. -i infiles confusinging names out_0001.jpg ect the %04d means look for 4 figured numbers starting with 0001
  4. -c codec
  5. -pix_fmt is the pixel format, I dn’t know much about these but the script failed until I added it in

It took me a few shots until I got this right.

I then moved the out.mp4 video to the same folder as the original and

ffmpeg -i shower.mp4 -acodec copy -vn shower-audio.mp4

To extract the audio from the original file.

then:

ffmpeg -i out.mp4 -i shower-audio.mp4 -vcodec copy -acodec copy -shortest final.mp4

To add the audio from the original to the out video to give me a final one.

the -shortest parameter gets rid of the audio at the end to make up for the frames I removed.

Bingo:

At this point I remembered iMovie has a comic filter…

This post is mostly as an aid to my occasional dip into the world of commandline video editing. Posting helps me remember. It also plays a wee bit fast and loose with copyright.

The featured image is a gif giffed from a few of the stills.

ps this is quite a disturbing clip, I didn’t really watch it till I finished, could have picked a nice one!

Update, Ron commented:

What would it look like if you’d run the result videos through the script one more time. Keeping the same number of jpegs but making the lines more stand out and the fills less so you’d have black outlines and white?

That didn’t make much difference os I did some tests with the parameters for cartoon, and Ron went with increasing the brightness: ../cartoon -b 300

This gave me this:

Accidental Allure

In the past I’ve made a few experiments with randomly layering and combining images: Glen Finlas -evaluate-sequence subtract and Averages (The Prisoner) for example.

A couple of weeks ago I started playing with combining images in the browser. There are several ways to go about this, I found a nice script to blend two images on a canvas and gave that a shot. It worked well and gave interesting results.

I though that using the Flickr API I could gather a list of images and randomly blend them two at a time.

Flickr’s API will return a json list. I started using the flickr.interestingness.getList which produced some interesting (sic) combinations. However when I started to get the license of the photos most were not labled for reuse.

I switched to using a standard search (flickr.photos.search ) which allowed me to search for license that allowed reuse.

I also switched to using CSS and background-blend-mode, this allows you to have multiple images set on a background and blend them.

For example using these images:

And this code:

<div style="border:solid 1px;width:500px;height:400px;background-image:url('https://c2.staticflickr.com/8/7587/26482589423_daa3bbdbd1.jpg'),url('https://c2.staticflickr.com/8/7012/6677861899_ef6e012bc8.jpg');background-blend-mode:multiply;"></div>

give me this:

With this in my toolbag I could pull in a flickr feed, extract image URLs and info about each photo and randomly combine them. They are displayed for 10 seconds each.

This gave me this:

Random Flickr Blendr

Here are a few random blends, screen captured:

I’ve found the pictures quite compelling.

On interesting this was the change I noticed when I swapped from the interestingness list to a search for creative commons images ordered by interestingness-desc. The images became more subtle and less HDRish, i think thy are more interesting and less glossy. An unusual win for Creative commons.

Over in DS106 land the page was used for a daily create:

#tdc1588 Turn @johnjohnston’s Random Image Pairing into a Self-Help Book Title | The (new) Daily Create

Which turned up some nice images and a fairly crazy bunch of titles.

My Own:

tdc1588

What was also interesting was some responses to the page:

So I an quite pleased with the result of this bit of experimenting. I’ve learnt a little more about CSS, images, JavaScript and even practised a bit of git. On the git front I’ve installed ezyang/git-ftp which is a quick and efficient way of pushing changed files to a website via FTP and works very well indeed. Saves working directly on line or opening an FTP application.

Record Riffing

It started with a tweet:

Then Alan: Spinning Albums from Reclaim Records made this:

Which was asking for a gif:

jim-reclaim

This was a little quick and dirty, it used my original Dancing Jim from ds106 Assignments: Dancing Jim all over the world. I knocked it up just before bed time last night.

Method:

  1. Download video (I use YouTube downloader tool – Fastesttube!)
  2. Export some frames with MPEGStreanClip
  3. Import into fireworks, as layers and distribute to frames.
  4. Import gif 3 times an 1st, 10th and 19th frame
  5. Export to gif, bit of loss 256 colours

This morning I remembered a cleaned up version of the gif: August 2013 GIF Challenge #2: Dancing Jim All Over the World | I am Talky Tina and a tip to clean up further: He’s a Maniac! And He’s Dancing Like He’s Never Danced Before | de•tri•tus.

I grabbed that and:

jim-reclain-3

Finally I though to add some music:

Having downloaded Minutemen – I Felt Like a Gringo from YouTube and pulled out a bit of audio, crushing to 32bps, with audacity.

GifMovie with my GifMovie Plugin.

If you can’t tell I love the connections in this #DS106 story.

#tdc1547 Van Gogh goes #DS106

First Daily in a while, so though it was worth a quick post.

#tdc1547 Make a Van Gogh – Make him go for DS106 | The (new) Daily Create

The original DS106 image from DS106: The Open Online Community of Digital Storytellers by Jim Groom — Kickstarter Not sure who to credit as Google didn’t turn up a backstory.

The Van Gogh picture from File:Vincent van Gogh – Self-Portrait – Google Art Project.jpg – Wikimedia Commons where it says:

This is a faithful photographic reproduction of a two-dimensional, public domain work of art. The work of art itself is in the public domain for the following reason:

The author died in 1890, so this work is in the public domain in its country of origin and other countries and areas where the copyright term is the author’s life plus 100 years or less.
This work is in the public domain in the United States because it was published (or registered with the U.S. Copyright Office) before January 1, 1923.
This file has been identified as being free of known restrictions under copyright law, including all related and neighboring rights.

Which is good enough for me.

Process

vg-layersDownload both images. Open in Photoshop.

The Quick Selection Tool is my Friend.

  1. Select Van. and make new layer via copy.
  2. Duplicate that layer into DS106 image.
  3. Quick  Selection tool to cut out rear figure to new layer. Then headphones and cables to new layers too. Hide figure.
  4. Move VG layer behind main layer resize to fit.
  5. Image-> Adjustments -> Black & White…

vg-b-w

I messed about till I got it as B&W as I could.

Cropped and exported to jpg.

Other possibilities

I did think about the dark glasses:

make-art-vg-2-dg

But think the eyes had it.

 

I also though about tracing the VG picture to make it more in the style of the DS106/Sonic Youth.

Or sending the ds106 image to the twitter bot that does impressionist images…

Updates

Worth noting I flipped the VG image.

More important we know the DS106 Artist:

And I claim a couple of assignment stars: ds106 Assignments: Remix an Album Cover 😉