My 'real' blog doesn't play nicely with DS106 so I've imported the ds106 posts to this one for ds106 fun.

~tilde

Posted: October 18th, 2014 | Author: | Filed under: Thoughts, Tutorial, web | No Comments »
 _________  ________  _________  ________  ___       ___           ___    ___ 
|\___   ___\\   __  \|\___   ___\\   __  \|\  \     |\  \         |\  \  /  /|
\|___ \  \_\ \  \|\  \|___ \  \_\ \  \|\  \ \  \    \ \  \        \ \  \/  / /
     \ \  \ \ \  \\\  \   \ \  \ \ \   __  \ \  \    \ \  \        \ \    / / 
      \ \  \ \ \  \\\  \   \ \  \ \ \  \ \  \ \  \____\ \  \____    \/  /  /  
       \ \__\ \ \_______\   \ \__\ \ \__\ \__\ \_______\ \_______\__/  / /    
        \|__|  \|_______|    \|__|  \|__|\|__|\|_______|\|_______|\___/ /     
                                                                 \|___|/      
                                                                              
 ________   ___  ___  ________  ___       _______   ________  ________        
|\   ___  \|\  \|\  \|\   ____\|\  \     |\  ___ \ |\   __  \|\   __  \       
\ \  \\ \  \ \  \\\  \ \  \___|\ \  \    \ \   __/|\ \  \|\  \ \  \|\  \      
 \ \  \\ \  \ \  \\\  \ \  \    \ \  \    \ \  \_|/_\ \   __  \ \   _  _\     
  \ \  \\ \  \ \  \\\  \ \  \____\ \  \____\ \  \_|\ \ \  \ \  \ \  \\  \|    
   \ \__\\ \__\ \_______\ \_______\ \_______\ \_______\ \__\ \__\ \__\\ _\    
    \|__| \|__|\|_______|\|_______|\|_______|\|_______|\|__|\|__|\|__|\|__|   
                                                                              
                                                                              
  ________  ___       ___  ___  ________                                      
 |\   ____\|\  \     |\  \|\  \|\   __  \                                     
 \ \  \___|\ \  \    \ \  \\\  \ \  \|\ /_                                    
  \ \  \    \ \  \    \ \  \\\  \ \   __  \                                   
 __\ \  \____\ \  \____\ \  \\\  \ \  \|\  \                                  
|\__\ \_______\ \_______\ \_______\ \_______\                                 
\|__|\|_______|\|_______|\|_______|\|_______|

For the last couple of commutes I’ve been hooked by a ~.

(I am cross posting this at my mainly educational blog and my ds106 one because I think this is so interesting.)

It started when I read I had a couple drinks and woke up with 1,000 nerds which touches on some many interesting things, online identity, ownership, internet history and made me think about about community, teaching about the web and some of the posts Jim Groom has be posting recently (/~space for example).

The ~tilde.club set up by Paul Ford while drinking is

not a social network it is one tiny totally standard unix computer that people respectfully use together in their shared quest to build awesome web pages

It mirrors what was the standard way to give university folk accounts and allows users to work on a remote computer through the terminal, communication and creating web pages. You will get a much better idea by reading the post and going to ~tilde.club and clicking some links.

It looked interesting enough to have a shot, but I had arrived at the party a little late. Fortunately there are other tilde clubs springing up and I got in to totallynuclear.club as ~troutcolor.

All I’ve done so far is created a webpage, set up a blog and visited other members pages. I had a quick chat on the commandline with ~maze who answered some questions.

Hopefully I’ll use the blog to document what I am learning as I go. I am certainly learning. I’ve use a terminal now and then locally on my mac and even very occasionally to play with my Raspberry Pi, but this is quite different. I find myself strangely drawn to the process. For some of the users on the tilde clubs nostalgia is a reason for being their, I missed that whole section of computer history as I started late. Any webpage creation I’ve done has been by uploading files via FTP or by using blogging software or social media. The ~tilde clubs work in both a older and modern modern way. I’ve noticed similarities in the way the developers for glow blogs work, not ftp for them, they talk of git, and are often logged into some cloud server via a terminal.

There are other interesting features emerging on totallynuclear and other tilde clubs I hope to get the courage up to try the IRC chat soon.

What could it be good for

Apart from fun which is a good enough reason.

Given that I an a teacher I wonder if this could be a good way to teach pupils/students about the web. I don’t think that there is anything Perhaps cover some technology history and web literacy. Although the technology is not very shiny and new it does feel quite exciting. It also, to some extent, remove a veil from the technology and perhaps could loosen the ties to silos.

What does it look like?

This is a very short screencast just touching on the basics, which is all I know at the present.

Starters for 10

Some links to interesting totallynuclear things:


Colour of the Wire

Posted: October 12th, 2014 | Author: | Filed under: remix, Tutorial, web | Tags: , , , , , | No Comments »

After the last post I’ve watched a few more episodes and have arrived in Season 3 of the wire. I though it might be interesting to see the overall colours of different episodes or seasons and compare them.

Following the same path1 as in the previous post I created a montage of screenshots from Episode 1 of season 3. I sort of expected it to be a bit brighter but:

out-1000

A bit of googling took me to Image Color Summarizer – RGB and HSV Image Statistics and:

Image Color Summarizer – RGB and HSV Image Statistics Season 1 Episode 1

Image Color Summarizer – RGB and HSV Image Statistics Season 3 Episode 1

Both described as dark faded red.

colours-of-the-wire

I wonder if it would be interesting to expand this to other episodes and series or if everything looks dark.


Footnotes:

1. I had a few problems with Storyboard this time as the .srt file I downloaded didn’t work, a quick google found one that did. I also noticed that the montage code I posted last time was missing a parameter --geometry +0+0 to remove padding


Chain of Command

Posted: October 2nd, 2014 | Author: | Filed under: remix, Tutorial, web | Tags: , , , , , | 1 Comment »

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 jpegs; sips -s format jpeg *.* --out jpgs

This command first makes a new folder called jpegs and then uses sips (built into OSX) to convert each pdf into a jpeg 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.

infinite-scroll

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

out-1000
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.


all in the game

Posted: September 13th, 2014 | Author: | Filed under: Uncategorized | Tags: , , | No Comments »

Wire Characters Season 1

My last couple of posts have been about using and setting up videogrep.py.

Videogrep is a python script that searches through dialog in videos and then cuts together a new video based on what it finds. Basically, it’s a command-line “supercut” generator.

I’ve been thinking about how to use it, especially since Jim Groom gave it a rousing reception( Wiring Supercuts & The Game Supercut ).

I’ve always liked the suspect board on the wire, where the detectives pin up pictures of suspects in a mindmap fashion, and wondered if I could make a board with Supercut videos of the characters. Turns out I can: Wire Characters Season 1.

A man must have a code

The Wire Season 1 Episode 07   one Arrest

First thing I had to do was make the supercuts, I just used the method described in the previous post, with one wrinkle. Some of the characters are refered to by more than one name, some times Kima is Greggs, I wanted to catch all of the references. It turns out that the default search for videogrep is a regular expression. Now I don’t know much (anything) about regEx, but a quick google game me the pipe character as OR, so:

python ../videogrep.py -i /Users/john/Movies/The\ Wire/Season\ 1 -s 'Kima|Greggs' -o Kima.mp4

Gets clips with either Kima or Greggs in the subtitles.

I then convert the mp4 files with miro video converter, using iphone as the setting, this lets me hear the clips which lose sound on my system. I open the output movies with QuickTime Pro find a still and hit copy. Switch to Fireworks and paste into a new document, save as a jpge with the same name as the video apart from the file extension.

I’ve now got a folder full of movies and images and just need a html file to display them.

I wanted to do a few things with the display of the videos, I wanted them to be is some sort of disarray as if pinned on, not all lined up. I also was making this in between all of the supercutting. This lead me to put the videos on the page with Javascript rather than hard coding all the tags. If you are really interested you can view the code on the page, I’ll just blog a few concepts here. I did hardcode an array of the names, without the file extensions and a matching one with the character names. It was them easy to loop through these arrays creating video elements and populating them with the video source and the jpg images as posters.

The CSS gives the div wrapping the video a white background and a drop shadow, some javascript rotates the divs (JavaScript Rotate | KaisarCode) and randomised the margins between them and the white border width.

I also used the javascript to scale down the video to fit more across the page and css to set the page width to 1600 pixels (side scroll I am afraid).

when it’s not your turn

I also missed a few things out.

  • The files are big, converting them with miro made them bigger, I guess I could use ffmpeg to do a better job of that, I could also scale them down to the size they are displayed.
  • The videos do not play in Firefox on a mac, firefox does not support the video format in the video tag. I had a very quick try using mediaelement.js to add flash for firefox but it looked like it would be too much work to display properly. I could also convert all the files to ogg for firefox, I might try that in combonation with scaleing them down a bit at a later date.

Update: I’ve run all the videos first throught te commandline ffmpg to downsize them to 360×240 and then ffmpeg2theora to create ogg versions.

Dope on the damn table

So while some of this has been for self education around javascript and css there are a few ds106 style things that spring to mind from the exercise.

The supercuts get the parts of the video where a character is mentions, sometimes this is never when they are on screen. I had to use other parts of the movie to get posters for some characters. The supercuts let you focus on the character from other characters points of view and the POV of the writers and directors. Some characters I love and feel are important are not refered to much by name, the video file sizes gives a view of this, Ellis Carver’s video is tiny (I love how his character in season 1 hints of his growth during the wire as a whole).

Although I’ve now watched most of season 1 (third time round) I’ve struggled to watch with a critical eye, or even an eye to a gif, the programme is too absorbing and emotionally involving. It has reinforced the series as my favourite tv. I am especially noticing the parts when charcters show complexity beyond normal tv. Kima, presented very positivly, leads the charge to kick and beat a youth that hits the rather usless police Pogue (or Mahone). The emotion showed by the character at the end of episode 10 and the beginning of 11 is viceral, rewatching brings back the shock from the first viewing in a suprisingly powerful way.

Watching the supercuts allows you to step back a bit, pulls information about a character together in a suprising way letting you see the character and how their story is told in new light.


and all the pieces matter

Posted: September 9th, 2014 | Author: | Filed under: mashup, Tutorial | Tags: , , | 1 Comment »
and-all-the-pieces-matter

Gif using gifboard

This is a quick intro to installing videogrep.py a tool for making supercut movies. Written in haste, consider it a rough draft.

Videogrep is a python program run from the command line. This is quite different from using applications with a GUI. I am hoping to write up a few different tools I use for playing DS106 and will try and come back and expand on this.

More about Videogrep: Automatic Supercuts with Python – Sam Lavigne.

Code: antiboredom/videogrep · GitHub.

Caveats

  • I am no expert in using the command line. I’ve failed on quite a few attempts at installing.
  • As with a lot of software you can make mistakes, bad things can happen. You will be giving the software author control over your computer.
  • I am using Mac OS X
  • There is not a lot of detail here, I’ll come back and improve if it seems useful.
  • It is probably sensible to read all of the linked pages here rather than just go on trust.

Dependencies

Videogrep depends on a few python modules and programs. These are installed with pip (A tool for installing and managing Python packages) which you may need to install.

You also need to install FFMPEG (FFmpeg is a free software project that produces libraries and programs for handling multimedia data. ). One way to install FFmpg is with homebrew, which you need to install first!

Homebrew and ffmpeg

Homebrew, is a package manager it is installed and used via the commandline so you will need to open the terminal app.

You run stuff in the terminal by typing (or pasting) after the prompt my prompt is johnj:~ john$ if I am in my home directory which is called johnj

On the Homebrew site you can copy a line of text which if pasted into the terminal will install homebrew when you press return. I’d go to the site and copy from there rather than from here.

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

The script explains what it will do and then pauses before it does it.

Once the script has finished it will recommend running:

brew doctor

To check all is ok, so type that and hit return, wait a while and the prompt returns. you can now install FFmpeg. The videogrep notes suggest you do with this:

brew install ffmpeg --with-libvpx --with-libvorbis

So try that, type it in at the prompt in the terminal, lots of text should stream by, by the time it stops FFmpeg should be installed. You can check by typing

ffmpeg -h

Which will display the help.

pip

Next you want to install pip, which lets you install other stuff. Again at the prompt type:

easy_install pip

Some text will go by and the prompt should come back.

Videogrep

Finally

Down load the zip file from antiboredom/videogrep · GitHub unzip and put it somewhere handy, your desktop folder for example.

The folder is called ‘videogrep-master’ I’ve just left it as that.

Inside the folder is a txt file requirements.txt this lists the python modules that you need to install, you don’t need to open it. Back in the terminal, cd into the videogrep folder:

cd path/to/folder

to do that type cd at the prompt and drag the folder into the terminal window, I see:

johnj john$ cd /Users/john/Desktop/videogrep-master

hit return and type:

pip install -r requirements.txt

and return again a ton of text will scroll past as past.

At the end, unless you have errors you are ready to go.

First cut

You need a video file and an srt file to match, there names must be the same except for the extension, eg:

  • The Wire Season 1 Episode 06 – The Wire.avi
  • The Wire Season 1 Episode 06 – The Wire.srt

If you followed the above steps your prompt should show you are in the videogrep-master folder:

johnj:videogrep-master john$

type:

python videogrep.py --input path/to/srt file  --search pieces --output pieces.mp4

more text scrolls past the terminal. A video pieces.mp4 appears in the folder, it is the supercut video.

 

Problems along the way

I had a couple, first in installing the requirments.txt I kept getting errors about pattern. To solve this I went to pattern, downloaded pattern and installed it. I then removed that line from requirments.txt and saved it before running pip install -r requirements.txt again.

The second problem I had was the movies created had no sound. I didn’t fix that, I just used miro video converter to convert the files to apple or iphone ones which did the trick. I am guessing this could have been fixed with ffmpeg too as miro video converter is, as far as I know, a gui for ffmpeg.