javascript – Page 2 – 106 drop in

Chain of Command

wire01
(the above gif has nothing to do with the rest of the post, other than it is to do with the wire.)
A while back I posted about gifboard and it’s bigger brother storyboard. I’ve played a bit with storyboard and the wire this week.

Storyboard is a command line application which creates pdfs from movies with subtitles, one page per subtitle.

I just started with a bit of playing round with no particular destination in mind. The first thing I did was rip a pdf of subtitled frames from Episode 1 using storyboard. This gave me a 30mb file with >1400 ‘pages’.

I then thought that it might be an idea to get all of these pages out as images, a quick google suggested pdfseparate. This is another commandline app. I generally have no idea what commandline options are available, so I typed: man pdfseparate in the terminal and got back the man page, so it was installed.1

For once I though ahead and moved the pdf into its own folder, I then, in the terminal, cd into the folder and:

pdfseparate The\ Wire\ Episode\ 01\ -\ The\ Target.pdf  wire-ep-1-%d.pdf

The %d bit just gave me a numbered set of jpegs. I ended up with a folder full of 1497 pdfs. I really wanted images rather than pdfs so:

mkdir jpgs; sips -s format jpeg *.* --out jpgs

This command first makes a new folder called jpgs and then uses sips (built into OSX) to convert each pdf into a jpg and put it in the folder. These jpgs were quite big so I cd into the folder and:

sips --resampleWidth 300 *.jpg

Which resizes them nicely. I also duplicated the folder and made a set of smaller jpgs and some gifs with sips too.

My first thought was to make some animated gifs2, but a gif with 1497 frames turns out to be pretty big, even if you reduce it to 8bit. There are probably a few interesting gifs in this project which I might return to.

My next idea was to make one of those infinite scrolling web page with the jpg, and this turned out ok: The Wire Scrolls On, S1E1.

This gives quite an interesting view of the episode, it is pretty dark and there are a lot of closeups and expressive faces (this might be skewed by the fact we grab bits of dialog). I was quite surprised that the page loaded quite well.

After seeing that page I thought a montage would be the next obvious step. Again a quick google suggested the ImageMagick set of command line tools. Again I’d already installed these at some time in the past so it only took another google to suggest that the montage tool was the way to go. So inside the folder of smaller jpgs:

montage wire-ep-1-[1-1497].jpg out.jpg

I can’t imagine how long it would take to do something like this with a gui application. I can imagine that quite a few folk would not be all that interested in this process or the results, am thinking that it is somewhat analogous to looking at large sets of data. These image manipulating commandline tools allow different views of video to be created quickly. They also give an overview of a whole section that can be analysed and mused over.

I am not really much of a command line user although I’ve dabbled over the years and installed a fair number of applications along the way. I would recommend that dipping toes in, with say gifsicle before jumping in to install and try a pile of stuff. Google is your friend here and you can often find a command line way to do something by adding ‘command line’ to the search. In addition to the tools above, or even before, ffmpeg for example.

Update: The Wire EP 1 Mashup.

Footnotes:

1. I little digging around reminded me I had installed this as part of poppler. Poppler I’d installed using homebrew (the chain is tangling already). If you want to install various command line apps I’d recommend homebrew as a good option.

2. gifsicle is a wonderful command line application for creating animated gifs.

Go Jim, Stop Jim

Riffing off this: Educator, Learner | Animate (SOME) of the GIFs! – Educator, Learner
And recalling this: Not an animated gif

Click Jim to toggle the animation.

I’ve piut this in Mozilla Thimble if you want to remix or look at code: toggle sprite.

Gif Scraping and a DS106 Gif API

It started, as so many things do, with a tweet(bark?) from CogDog linking to The Best of ds106 GIF TV. This got me thinking of how to automate the gathering of gifs. I remembered that I had done some gif scraping a while back: Doug’s Gifs.

I wondered about scrapping tumblr in the same manner with a wee bit of php. This turns out to be quite simple: Gifs, Gifs

$url = "http://jjgifs.tumblr.com/rss"; $rss = file_get_contents($url); $matches = array(); preg_match_all('!http://[^?#\s]+\.(gif)!', $rss,$matches);

I didn’t do the regExpression myself, I must have found it on the internet when I made the page of Doug’s gifs. Anyway at this point you have a list (php array) of urls to all of the gifs on the page. I’ve not worked out the best way to handle this, but currently I am writing it to a cache file and only updating it every now and again. The list is put into a JavaScript Array.

The page Gifs, Gifs, loops through a few ds106naughts tumblrs rather than just the one. It then displays a random gif, clicking on this will display another.

This is pretty much proof of concept rather than a well though out solution, but it works. There are a few interesting things that could be done structurally. Alan has already suggested hiving off the generation to a separate php file and a cron job. We could then have a plain html/javascript page for display. He also suggest a next and previous button(√). I am guessing that it might be better to have the list in a database?

Now I have a text file with a list of ds106 gifs, it is pretty simple to have a
ds106GifAPI! This following image should be a random DS106 gif:

a random ds106 gif

The code used:

<img src="http://johnjohnston.info/oddsandends/ds106gif" alt="a random ds106 gif " />

This should give a random gif every time.

THe DS106 Gif API

Imagine you are blogging (or making any webpage) and want an exciting gif to go with your post, but you don’t just want any old gif, you want a random DS106 gif. Safe for work but not for your mind. Now you casn, simply use http://johnjohnston.info/oddsandends/ds106gif as an image url and you will get a random gif every time the page loads.

Given that my gif store is a list of gif urls the code is simple:


<?php
$cachefile = "Path/To/The/Cache/File.txt";
$gifs = file_get_contents($cachefile); 
$gifArray=explode("\n",$gifs);
$thisgif=$gifArray[rand(0,count($gifArray))];
header('Location: '.$thisgif);
?>

DS106 Random Gif API

Cubomatic

Cubomania!

Yesterday’s daily create was an interesting one:

Create a Self Portrait Cubomania Style

Cubomania is a surrealist method of making collages in which a picture or image is cut into squares and the squares are then reassembled without regard for the image
– http://en.wikipedia.org/wiki/Cubomania

One of the nice things about the daily create is the new words you learn.
I though it might be more interesting to do this with code rather than slicing and dicing an image. Turned out I was only half right on this, as other folk turned in more interesting photos, but my process was interesting to me at least.
My first thoughts were to use SuperCard on my mac, but I then though it would be fun to try to do this on the web. I’ve done a little image manipulation online before, first I though of creating a form to upload an image to a server and use php to edit it with gd. (I did this for A flickr CC). I also thought about using javascript on a canvas element which lead me to wonder if you could do this without images reaching the server. A bit of googling and Reading local files in JavaScript – HTML5 Rocks pretty much fitted the bill, letting me cut and paste a chunk of code to pull an image into a page.
Once the image was on the page I could get to work on it. I am not sure if it is worth going over the code as it is pretty horrible, but if you look at the source the manipulation is in the cubomania function.
First find out the image dimensions and set the canvas element to the correct size.

var w=document.getElementById('newimage').width;
var h= document.getElementById('newimage').height;
document.getElementById('myCanvas').height=h;
document.getElementById('myCanvas').width=w;

It is then simple to work out the width and height of each square (one tenth of the width and height) and then an array of the coordinates of the top left of each cube.
This array is duplicated and one of the two arrays is randomly shuffled.
I discovered that copying the array and then shuffling one did not work, I needed to use otiles=tiles.slice(0); to get a copy that would not change when I shuffled the original list (tiles).
For shuffling I again hit google: How to randomize (shuffle) a javascript array? – Stack Overflow

Once I have two lists it is then a case of drawing each square from one list at the location of the same slot in the second list with the HTML canvas drawImage() Method.

The last bit of the puzzle is to take the canvas image and turn it back into a ‘real’ image that can be downloaded. I’ve done that before, so only needed to check my old page.
Of course I did not get any of this right the first time. My maths is not very good and I needed a few goes to work out how to fill the array mostly by trail and error. It is very messy in there. I also stored each location as an item in the array, this meant I needed to split it when using drawImage. I ~~suspect~~ know there are many many better ways to do this.
I am not posting this as an example of good practise, or recommending it as a method, more as an example of how you can have fun with ds106 by twisting the task and that you can have fun with code without really knowing what you are doing. Half the battle is guessing what you can do and then google will help with solutions. I am also aware this is not proper coding and my problem solving methods (guess and check) are far from useful, but I do enjoy myself.

Here is Cubomania! ready cubing your pictures.

Update 8 January a verson that makes gifs: Cubomania Gif!

cubomania

Alternative Lines for the Daily Create

So Alan is barking about getting creative which pushes me towards a dailycreate or two.

Unfortunately yesterday’s Draw something abstract out of straight lines proved a bit of a problem, I stared at various iPad drawing apps, scratched a few lines and gave up.

Waking early in the morning I though about this a bit, looked at the ones that had been created while I slept and though, I could do this with HyperCard. Lacking an old enough mac and wanting to learn a little more about the canvas element in html5 I decided on a small javascript experiment.

A bit of googling and I came up with this simple page. It basically produces an image with 600 random lines.