This is #DS106

One of the best things about DS106 is the riffing and playing with other participants. I dipped my toe in the daily create stream yesterday and pulled out a great example:

As I saw this late there were already a great bunch of responses, I giffed:

tdc1713

I had intended to have the notes ping right off the sheet, but this looked ok and it was late (so late I lost a few frames that would have made the jump a little more dynamic).

Todd said:

and Ron:

Today Viv iced the cake:

There are deeper thinks going on on DS106 but this is #4life

#DS106 GoodSpell Final Season

This evening Marianna & I started the final season of the DS106 Good Spell on DS106 Radio.

The DS106 Good Spell is a podcast about the open online course on digital storytelling, DS106.

Some background to this series on The DS106 Good Spell Episode 0

As usual I’ll post the audio to edutalk.cc

One of my favourite things about ds106 is how it spawns all sorts of activities like this. The Good Spell is one of my favourite favourites.

i lifted the featured image from Marianna’s  tweet  I don’t think she will mind

 

Commandline gifs: Cartoon The Nitty Gritty

I’ve covered most of this before, but given the news that someone reads this stuff, I though I’d document it a bit more.

Prerequisites: ffmpeg, imagemagick, gifsicle, I’ve installed all of these commandline apps via Homebrew.

Cartoon Fred’s ImageMagick Scripts: CARTOON.

I downloaded this then made it executable using the terminal:

chmode +x cartoon

I then moved in into /usr/local/bin/

the proper way is probably
mv cartoon /usr/local/bin/

but I did open /usr/local/bin/ which open the folder in the finder and dragged the file across.

I ned a movie so:

Which I downloaded with YouTube downloader tool – Fastesttube!.

I copied the download into a folder and renamed it dancer.mp4

In the terminal I move into the folder by typing cd and dragging the folder int the window and pressing return.

I then made a new folder mkdir jpg2

I switched to the finder and previewed the movie to find out where I want to start extracting frames, which turns out to be at 26 seconds, and I want to get 3 seconds worth at 6 frames per second:

ffmpeg -ss 00:00:26.000 -i dance.mp4 -t 00:00:03.000 -r 6 jpg2/dance_%04d.jpg

This give me 18 jpgs in a folder.

I move int othat folder and make a new one:
cd jpg2
mkdir toon

I then use cartoon to make a cartoon image for each jpg in the toon folder:

for i in *.jpg; do cartoon $i toon/$i;done
(cartoon uses imagemagick)

This takes a wee while, I then make yet another folder:

mkdir gifs

and convert all the cartoon jpgs into gifs:

for i in *.jpg; do convert $i gifs/$i.gif;done

(convert is part of imagemagick)

Finally I make a gif

gifsicle --delay 12 gifs/*.gif --loopcount -O3 --colors 16 -o ../../dance.gif

You can see the gif ends up in the top folder. There is a 12/100 of a second delay, it loops forever, is reduced to 16 colors and optimised (O3).

Screen Shot 2016-07-15 at 15.58.07

 

Along the way there are a lot of other possibilities, convert for example can adjust the brightness and contrast (and a raft of other things). I brightened these ones up a bit:

gunstick

stickgun2

In reaction to

Like the cartooning of videos a couple of posts ago there is the opportunity to see and understand a bit more about film using this technique. Jim might be thinking that (says Alan) but so far I am just having fun.

 

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: