Author: John

Ripping up a Shredder Head

So a new rather interesting DS106 assignments, For The Remix!

A series of photographs taken by Jonathan Worth of author Cory Doctorow are now available for you to remix, regenerate, and to make new art, especially in light of the themes and topics of his books.

The deal seems to be you should think deeply, share your idea and processes. More details: FTR! For The Remix! | remixing cory doctorow and How Do You Think Yoda Got So Wise? – CogDogBlog.

So I had a look a the pictures, watch Jonathan’s introductory video and though I might stretch to a quick gif.

Looking at the thumbnails, Mr. Doctorow’s office is impressive, with a nice range of cables and kit. I was hoping to play with the idea of printing some of the head shots, riffing of the idea of Jonathan sharing digital copies for free while selling prints. This idea he borrowed from Cory’s famous publishing method.

On downloading the high rez image I found what I though might be a useful printer was in fact a shredder, so I got rid of that idea:

shreader

I like the idea of taking a 45mb, 4000 dpi, 8000 odd pixel image and ripping a 500 pixel, 128 colour, 72 dpi gif out of it.

Here is how

Unlinke most ds106ers I use Fireworks for giffing, mostly because I am familiar with it as I got a really great deal on Fireworks 8 but being a teacher years ago. Fireworks has some nice features for giffing. An image can have layers and frames, layers can persist across frames.

Here is what I did:

  1. The downloaded image opened automatically in preview.
  2. I cropped out the shredder and switched to Fireworks.
  3. Created a new document, Fireworks assumes you want to use the clipboard and set the image dimension to that, about 3000 pixels.
  4. Paste in the clip.
  5. Switch back to preview and copy one of the cory heads from the thumbnail sheet.
  6. Back to fireworks.
  7. The original layer is set to be shared across frames, I make a new layer, not shared. (This from the popup menus in the layer palette) and paste in the head.
  8. Draw a white rect for a frame and group it with the head. (I think I saw a polaroid ref somewhere?)
  9. I then used the polygon tool to cut out the lower section of the shredder.
  10. Make a new layer, set to share across frames, paste in the bottom half of the shredder.
  11. Move this new layer to the top, so that the head, animation layer is sandwiched between the two other layers.
  12. Move the animation layer so it is about to go into the shredder.
  13. Using the frames palette, I duplicate the first frame. Move the head into the shredder a bit.
  14. Repeat.
  15. Use the frames palette to adjust the delay on each frame.
  16. Resize the whole image to 500 pixels across.
  17. Export to animated gif.

method

Some folk still want to print

After all that I still wanted to print, so a quick search of flicker finds Printer Tiger

THis was a little trickier as I needed to skew the head a bit, I think photoshop has better tools for this.

print

Credits

Images of Cory Doctorow, Jonathan Worth, Creative Commons — Attribution 3.0 Unported — CC BY 3.0

Printer Tiger, Marco Varisco, Creative Commons — Attribution-ShareAlike 2.0 Generic — CC BY-SA 2.0

Dancing Jim Over the World

Last night a old gif of mine got tweeted:

and I replied:

As I love recycling, I dug out the old gif, which I also use for my Jim Groom Internet glasses and giffed it up a bit:

jim_groom_office
jim_groom_white-house
jim_groom_peking

I think there are already assignments that this sort of fits into. ds106 Assignments: Noiseprofessor’s Jim Groom Art perhaps, but perhaps giffing Jim around the world could be one in its own right?
In case you want to join in here is a Dancing Jim Template An animated 9 frame gif with transparent background. The back ground is pretty big to make it easy to edit. Here is how I do it with Fireworks.

  1. Open the gif
  2. Make a new background layer that is Shared across frames
  3. Add an image to this background layer
  4. Move background around to get Jim in the right place
  5. Optionally cut out part of background and past into new foreground layer, so that the figure is partially behind, EG the shoulder of the office guy above.

The original gif is getting a wee bit tatty now, having been through the gif wringer and at some point it may be worth revisiting the original film and extracting another.

All backgrounds from Morguefile.com free stock photos, no attribution needed.

Update: I made this an assignment: ds106 Assignments: Dancing Jim all over the world

5 Sound Stories a toy for #ds106

I’ve been working on a version of Alan Levine’s Five Card Flickr for audio rather than images. Very much a work in progress. Only tested on a mac (FF, Safari & chrome) and Windows 7 (IE9), no support for iOS (limitation of how iOS plays audio and my lack of knowhow).

5 Sound Stories

I’d appreciate any tests or playing around if anyone has a spare 5 minutes.

5 Sound Stories is a way to create short soundscapes and save them along with some texts. It was inspired by Five Card Flickr and the suggestion of pascale colonna, @colonna69, in a tweet or two.

The idea is to load a set of sounds, either from a list of keywords or at random and create a soundscape. The result can be embedded here is an example:

 

FreeSound

I am using the Freesound API which allows you to browse, search, and retrieve information about Freesound users, packs, and the sounds themselves

Freesound is a collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds.

Freesound is pretty easy to use, I had a bash a while back with flickrSounds so had an idea of how to use it. Unfortunately my JavaScript skills are pretty limited so the code is a horror story at the moment. I am using jQuery to handle the requests to free sound and produce the players and interface. I suspect that there is some really neat way of doing this with object orientated coding, but I’ve just got a bunch of functions and placeholders on the webpage.

Saving to a Database

The other piece of coding I had to do was to save the generated soundscapes and associated information in some way. I’ve just copied this from Five Card Flickr. Alan supplies the source code and this is really easy to copy and alter as it is very well commented indeed.  Since this is shared under the terms of the GNU General Public License I think that means I have to make the code of this available too. The JavaScript is easy enough to see (and wince at) in the browser, but it is part of my plan to finish this, clean up as much as possible and add some comments then share it.

Twitter Help

The web aplication still needs a lot of work, I’ve had some great feedback from Alan and Pascale Colonna (colonna69 on Twitter) over a few tweets.

Pascale came up with some ideas of how this could be used in primary school which I hope, with her permission, to add to the site and Alan has pushed me to refine the UI a bit.

Pascale also noted that this doesn’t play well on an iOS device. This is due to the lack of the ability to preload audio on iOS (I guess to save bandwidth) I think I’ve figured out a workaround but it is going to be a while before I get that together.

I’d love to get more help and suggestions either via twitter or in the comments here.

Learning by Doing and Riffing

This seems to fit my learning style, I’ve tried code academy , books, tutorials but none get me into the groove as much as trying something that is a bit to hard for me. Google is a great help, although for this sort of thing it always seems to end up on Stack Overflow. Working my way through a tutorial, I never run over time, miss what real people are saying to me. This is the power of learning #ds106 style, dive in and do.

wecodejam_econo

Of course one of the dangers of learning this way is a lack of rigour, no one is checking my work, there is a lot of sloppiness in my code, this is were dipping back into the likes of code academy helps. My Javascript is improving a little and my occasional visits to tutorials, learning sites etc is helped by having something to reflect on, hopefully, revisit and refactor.

The other real powerful thing about #ds106 is that participants are encouraged to borrow, copy, steal and riff off their fellow learners (with attribution). Here again I am riffing off @cogdog, Alan Levine.

This is not a MOOC,  and I am not going to label it with anything in particular but learning with pals is powerful.

I hope this will make a useful assignment or two for DS106 and I’ll be submitting soon.

Not an animated gif

Using this png and CSS sprites.
jgsprites

Copying CSS sprite sheet animation – jsFiddle
Using my much reused favourite (of the ones I’ve made) animated gif. I converted it to a long strip.

So the CSS without the vendor prefixes


.jg {
	margin:auto;
    width: 203px;
    height: 203px;
    background-image: url("jgsprites.png");
	animation: play 1.5s steps(9) infinite;

}

@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -1827px; }
}

I had to strip all of the returns out of the CSS and paste it into the WordPress blog editor to get it to work.

Storyboard and Gifboard

I saw a link from somewhere in my RSS reader, probably hacker news, to Storyboard: Read your TV and Movies..

Storyboard creates pdfs from movies with subtitles, one page per subtitle.

Storyboard transforms your videos into other types of media.

Make a GIF of a favorite joke from a TV show, or make a book out of a movie you love.
Starting with subtitles included in the video file or available online, Storyboard scans a video for scene changes and is able to put together a PDF that you can put
onto your phone or e-reader, letting you read instead of watch.

…

Gifboard, another program included with Storyboard, can use those same subtitles to create a GIF based on a line of dialog in the video.

from: Storyboard: Read your TV and Movies.

This would seem to be right up DS106’s street.

Getting started

Storyboard is a commandline, ruby, application and the installation and running needs you to use the terminal. I do not spend a lot of time in the terminal but can manage a few things. StoryBoard also need a few other things in place first. Most of these can be installed using Homebrew! I mostly followed the instructions on the storyboard page. I got a fair number of errors, needed to install other things etc but managed to guess my way through.

Giffing

The bit I was interested in was creating gifs for movies. This is how it works. I did a quick search on my mac and found a Movie, Smultronstallet aka Wild Strawberries, that had a subtitle .srt file.

In the terminal I went to this folder, and issued the command:

gifboard -t "kiss" Smultronstallet.avi

This then presented me with a choice of subtitle tracks, and after I choose one, a list of subtitles with the word kiss in it, I choose one, after a bit of messaging in the terminal window, my gif was created.

Smultronstallet-kiss1

It turns out that some AVI files have the subtitles incorporated in them and gifboard can handle them too.

The quality of the gifs is not as good as many of the ones I’ve seen produced by ds106ista and the files sizes seem big, I shrunk some by deleting every second frame and increasing the delay, others are improved by simply deletign a frame or two.

I see occasional errors but mostly repeating the command in the terminal seems to fix this.

AS to how useful this is I am not sure, the storyboard option produces and interesting alt view of a whole movie. Gifboard is another tool that some ds106 folk might enjoy playing with.

Here are a couple more gifs, any guesses as to the movies?

grunt kill_us_all kill_rich

 

Here are my storyboard install notes which show some of the problems I had (just a txt file).

footsteps