Tag Archives: ds106

Enzo as Matrix as Megabyte as The Prisoner as Number One

Megabyte-RESIGNS_1_FlyIN Megabyte-RESIGNS_2_March
Megabyte-RESIGNS_3_Door Megabyte-RESIGNS_4_TeaCup_320_32
MegaByte_Xed_4_320 You-Won't-Hold-Me
Guilty Matrix-and-Rover2

Ah, the Multi-Frame GIF Story assignment, Animated GIF Assignment 880. Gotta love it. 

If you’ve never encountered Reboot (the first full-length, completely computer-animated TV series) then you’ll need a bit of background to fully appreciate this post and the Reboot Season 3 episode, “Number 7″, which references The Prisoner.  Reboot was ground-breaking back in the mid 90s as personal computers, modems, and the Internet started to take off. You likely know the early animation work of show creators Ian Pearson and Gavin Blair from the 1986 MTV Video-of-the-Year by Dire Straits, Money for Nothing.

I enjoyed Reboot during its first run on the Canadian cable channel YTV (Reboot was animated in Vancouver by Pearson and Blair’s Mainframe Entertainment), appreciating not only the wonderful plays-on-words related to computer tech, but also the myriad pop culture references embedded within the show. The Prisoner was one such reference, joined over the 7 -year run by others such as Mad Max, Star Trek, Elmer Fudd, James Bond, Ash and The Evil Dead, Austin Powers, Mortal Kombat, Clint Eastwood’s The Man With No Name, and The Matrix to name just a few. The opening credits to “Firewall” and the Season 3 recap performed to the Gilbert & Sullivan  “A Modern Major General,” are classic examples of the brilliance of the show (both are embedded below for your enjoyment). The day my then-young sons immediately got the Pokemon and Dragon-Ball Z references in the episode “My Two Bobs,” all was right with the world.

Anyway, here is my attempt at a one paragraph summary to set you up for the third season episode, “Number 7,” in case you choose to watch it. If you don’t watch it, you can just appreciate the references to The Prisoner in my accompanying GIFs.

In all previous episodes, Enzo Matrix is a young sprite who lives within MainFrame, helping/hindering the system’s Guardian, Bob, in protecting the city from the dangers of Game Cubes and viruses such as Megabyte and Hexadecimal. Following a game loss in the previous episode, young Enzo, his dog Friskit, and his friend AndrAIa are caught in the User’s game and are uploaded from their home system. Between the last episode and this one, time has passed, and young Enzo has grown from boy to man (now going by his last name, Matrix) as they travel from computer to computer trying to find their way home. The episode “Number 7″ explores Enzo’s understanding of his own identity and place in the grand scheme. (Note: There’s a whole “golf” thread which ties back to the usual “game” aspect of each episode. It provides for a few jokes, and the “out” at the end.)

If you choose to watch the Reboot episode Number 7, it is embedded in the prisoner106.us Archive for Week Six. I will leave you to draw your own conclusions on what “Number 7″ says about our understanding of Number Six and the overall show. But I think it offers a good commentary that complements the final two episodes of The Prisoner, “16: Once Upon a Time,” and “17: Fall Out.”

If you want to know more about Reboot, you may wish to do a little background reading about the series on either the Reboot Wikipedia entry, or for deeper detail, on the show’s own wiki — and episodes are certainly available on Youtube should you wish to watch more! However, in closing, I highly recommend the two clips embedded below.

#BeSeeingYou

"Be Seeing You (Bob)," animated GIF by @aforgrave

“Be Seeing You (Bob),” animated GIF by @aforgrave

"Be Seeing You (Dot)," animated GIF by @aforgrave

“Be Seeing You (Dot),” animated GIF by @aforgrave

"Be Seeing You (Enzo)," animated GIF by @aforgrave

“Be Seeing You (Enzo),” animated GIF by @aforgrave

Dead-on Bond Parody – Opening Credits for “Firewall”

Brilliant Season 3 Recap to Gilbert & Sullivan’s “A Modern Major-General”

A Pretty Penny (Furthering Christina’s GIF)

Christina's original GIF (1.5 MB)

Christina’s original “Number Two as Anvil” GIF (1.5 MB) by @clhendricksbc

Original, Masked, saved with 32 colours, Perceptual (478 K)

Masked, saved with 32 colours, Perceptual index (478 K) by @aforgrave

Making GIFs from scratch can be somewhat of an arcane Science at times. While there can be a good number of strategies to which one can turn to decrease file size, there is always a point at which the Art begins to suffer. While a smaller GIF may be desirable (if only as a challenge — high speed broadband makes the original intent somewhat moot), there is a point at which the reduced dimensions, or reduced colour depth, or the reduced number of frames introduces too much compromise and your GIF starts to look like crap. There is an interesting documentation outlining some of this in Tina’s post “@Tumblr, Meet Me at the Stairs,” where she attempts a number of different approaches to getting her GIF to post on Tumblr.

Having said that, it’s always nice to be able to optimize a GIF and still have it say what you want it to say.

Initial Strategies: Dimensions, Number of Frames, Colours

So when Christina (@clhendricksbc) posted her GIF of Number Two and the Penny Farthing this morning (first image, above), there was an immediate impulse to respond to her attempts at decreasing the file size when she said, ‘So it’s 1.5 MB as is, which isn’t too bad.”

Christina had already made 3 attempts at compromise:

  • she reduced the dimensions of her image to 400 pixels (wide) by 280 pixels high;
  • she reduced the number of frames (sometimes there are duplicates which can be deleted);
  • she adjusted the colour depth/indexing of the GIF.

All of these approaches can be viable options to apply when looking to reduce the size of the GIF.  And each of the three, if taken to the extreme, can take your GIF out of the realm of Art and reduce it too far.

  • make the dimensions too small, and people can’t see the detail;
  • remove too many frames, and you lose the nuances and distinctions that individual frames provide;
  • reduce the colour depth too much, and you get banding, blotches, washouts, and a generally poor quality image.

Another Strategy to Try: Masking

In looking to decrease Christina’s file size from 1.5 MB, there was one as-yet-untried strategy can make all the difference in the world. Note that it does not always result in significant file size reduction — it depends on the nature of the image being animated.

Christina’s Number Two and the Penny Farthing GIF is an ideal candidate for masking, as it features a fairly large area which does not change from frame to frame.

If you study the GIF above you will see that the movement is limited to Number Two’s hands and his face. The significant purple curtain behind and his jacket/sleeve represent an unchanging area, that if only referenced once, makes for a much smaller GIF.

Consider the following:

  1. Imaging keeping a large part of the GIF static.
  2. Poke a hole through the static image where the movement from the other frames needs to show through.
  3. Let the frames cycle behind the mostly static image, so that the only parts that change from frame to frame are the small bits that show through the window.
"Making a Mask" animated GIF by @aforgrave

“Making a Mask” animated GIF by @aforgrave

To accomplish this, you study the frames to identify where you want to retain motion. If you compare the two GIFs at the top, you will see that I have made the decision not to retain the movement of the bicycle saddle — the hands and the face tell a story, the moving seat is not so important.

  1. Select the area you want to isolate —  use a selection tool like the lasso
  2. Use Select>Inverse to select everything BUT what you want to remove.
  3. Use Layer>New Layer via Copy to create a new layer which forms a static foreground and place it at the top of the stack. By default it will be toggled on to display in every frame.

Now save the GIF again, and voila, an instantly reduced file size.

Notes:

  1. If you err on the side of caution (make the initial selection smaller rather than larger) you can always erase bits of your top layer if you need a little bit more motion to show through.
  2. If you make the hole too large, you can always delete that layer and make new common layer to replace it. You are not changing your existing layers, only duplicating part of one to use for all.
  3. If you have varying qualities in the image of the frames from different layers), choosing a really good quality layer to use for your mask suddenly promotes the good quality throughout the whole GIF.
  4. In some situations, you make find it valuable to create a composite mask from two or more layers so that you eliminate distracting movements that are not central to your GIF.
  5. The counterpoint to creating a masking layer is to create a common background, and then animate small portions of your image in front. This also results in a reduced file size.

Try Masks!

Working to understand and make use of masking in your GIFs can really open up a number of possibilities — not only for reducing file sizes, but also for increasing the quality and uniformity of your GIF across the frames. If, in emphasizing part of an image, you eliminate distracting movements in other parts of the image, you are helping to focus the viewers attention –and that can better help to tell your story.

In exploring Christina’s question, I have also started to extend my limited understanding of the options provide by different kinds of indexing. Rather than share that here, I will create a separate post where that can be the focus.

#BeSeeingYou

What is Going On?

Something is going on. I have been keeping a log over the past week. You can read my ongoing log.

For those who have been able to access the #VillageUnderground, there is also a shared file at /home/johnjohnston/shared.txt — You can contribute if you can navigate to that location and enable your nano editor. Perhaps we can explore and find a way out …

"My prisoner.txt log as of June 28th," by @aforgrave

“My prisoner.txt log as of June 28th,” by @aforgrave

Attribution

The haunting music heard along with the waves is Ag by Jari Pitkänen, sourced on Jamendo.com by searching first for “ethereal” and then picking a song that matched what I wanted. Ag is licensed CC BY-NC-SA.  The waves are stock sound effects from within iMovie.

I Can Read Televison – Free Man

“I Can Read Television: Free Man 2″ by aforgrave on Flickr

I like the “I Can Read Movies” Design Assignment 55. It’s fun to try to capture a movie (or television show) with a cover image as well as imagine the design of an old paperback book.

The Basics

  • This book cover is based on the Spacesick’s Jurassic Park rendering — I liked the black background and roughed edges for my Prisoner book.
  • I font matched the “I Can Read Movies font on whatfontis.com with a close match Zona Pro, and used that to re do “I Can Read Movies” to “I Can Read Television.”
  • To deal with the movie-to-television switch, I sourced and licensed an icon of a Television on The Noun Project by John Caserta and updated the logo and publisher branding in the upper left corner.
  • In conjunction with the logo revision, I switched the colour scheme from yellow/black to red/black.
  • Giving the book a 6 of 1 numbering seemed appropriate.
  • The teaser beneath the title was re-written, and the title redone (using the Village font) to Free Man. I think “Free Man” perhaps communicates a wider and appropriately more open-ended set of messages for the show than just “I am a Free Man.”

The Cover Image

"MiniFilm2," animated GIF by @aforgrave

“MiniFilm2,” animated GIF by @aforgrave

The trickiest part of this particular book cover was getting a silhouette image of Number Six on the beach during his “I am not a number, I am a free man!” speech. Although I somehow have a fairly good idea of the physical movements he goes through at that moment, it’s surprising how poorly lit that sequence is. I tried four times (from different sources, too) to capture frames that I could use.

I’d had a run at enhancing this sequence once already when I tackled “Google Says … I am Not a Number” last week. It might be easy to miss in the original GIF, but there is an excerpt of the whole opening scene hidden in the search results at the end. In working with the frames from the defiant speech, I had to significantly adjust both the brightness AND the contrast to get something useable.

So in working to get a silhouette of Number Six on the beach, I again went back and tried to adjust brightness and contrast.

I tried adjusting brightness and contrast manually, frame by frame, in Photoshop. Labourious work, and I wasn’t pleased with the results. I needed more frames to work with than I’d originally grabbed.

I went back into MPEG Streamclip and tried exporting at 24 frames per second rather than the 6 per second I had previously used.  Unfortunately, that didn’t give me any better silhouettes than the ones I’d had before, just more of them.

MPEG Streamclip allows you to select the colours or shades of grey in the images that you export. I tried 256 greys, as well as 16 greys, hoping that it might give me a good silhouette separate from the background. Unfortunately, that is the real problem with what has been shot — not enough light and not enough contrast.  Two few greys didn’t give enough detail. Too many greys and there wasn’t enough distinction.

MPEG Streamclip also allows you to adjust brightness and contrast during the export process. Good to know, but the first time I ramped the brightness right up (as I did in Photoshop on a frame by frame basis) I just got a whole bunch of white frames. So I had to experiment there, too.

In the end, although I am not really happy with the result, I wound up with a series of frames to which I applied a Filter (Brush: Dark Strokes) that resulted in the following animation.

"Free Man," animated GIF by @aforgrave

“Free Man,” animated GIF by @aforgrave

I selected a frame from towards the end of the sequence after the throw, where Number Six stands staring back at The Village. In the interests of time, I went with that frame — inverting it to make Number Six light and then doing a free-hand tracing around the ragged silhouette in black. I then erased all but the black-outlined silhouette using the eraser tool and placed it on the black background.

You can see the original colour of the silhouette below (the lightest, front-most one, with the black outline). Still experimenting, I added a couple extra copies with decreasing transparency, rotating and offsetting them to suggest a jarred, out-of-place character, and in the end, went with the just the third (greatest opacity) silhouette only.

“I Can Read Television Free Man 1,” by aforgrave on Flickr

I may still return to the beach scene to continue to explore methods to refine the quality of that image, but for now, it is time for other things!

Terminal Waypoint

“Village Tunnel” image by @aforgrave

I have continued to have success in avoiding the “sleep light” at lights out, and have made some additional progress in exploring the secret crawlspace I found beneath my cottage in The Village. After several successive evenings of further exploration, I have uncovered a vast underground labyrinth of tunnels and corridors. While I have encountered a large number of locked doors along my explorations, I have in one instance found a room within which I have discovered a piece of functioning network hardware.

"N1 Terminal," animated GIF by @aforgrave

“N1 Terminal,” animated GIF by @aforgrave

The workstation seemed deserted when I came upon it, but it was logged on and there was a half-consumed cup of warm coffee beside it. I did not linger. I quickly created an account for myself and then hastily left when I suddenly heard a nearby toilet flush and water running in a sink.

Although the terminal has only allowed me a low-level access to a rudimentary network, I have managed to create and place a file on the network with the hopes that others may somehow access my file. I believe that if we can somehow work together, we may be able to somehow map out these tunnels and hopefully find some kind of exit that leads beyond the mountains.

"Message in a Digital Bottle," animated GIF by @aforgrave

“Message in a Digital Bottle,” animated GIF by @aforgrave

I will return to this location sporadically. I do not want to encounter the coffee drinking user or any other wardens. I have discovered an adjacent room with some dusty, disconnected terminals. I do not know whether it might be possible to connect one to the Village network through my cottage phone. But I may try to move something up late one night when everyone is asleep and see if I can have some success with that.

————————-

Breaking the Third Wall

If you read my recent post about the trip this week to the Canadian Cold War Museum at the Diefenbunker near Ottawa,  you will be able to see the original images that I have used in support of this little narrative.

  • The coffee mug was mocked up on Zazzle (anybody want one?) and inserted with Photoshop. Drop Shadow and some darkening to blend in.
  • A few existing letters in the original image of the terminal were removed and the N1 was added to possibly suggest something if you ponder it for a second.
  • I put up a Village poster on the wall, added a couple of thumbtacks to keep it in place.
  • There are a couple of flashing buttons on the console, just to liven things up a bit.

The terminal image at the bottom is a screen capture (cursor animated in) of the actual message that I  posted. John has set the permissions such that other Residents who are members of the tilde club with access may be able to add their own messages within the text file by navigating to /home/johnjohnston/shared.txt. I’ll check in later and see if anyone has dropped by. I have an earlier version of the file that is web accessible here.

The terminal image is just a screen capture of a wonderful SSH app on my iPad/iPhone called Cathode. It does a great job in giving you access, and provides a super fun retro CRT appearance to enjoy as you type in everything from scratch. (Well, you can also paste in, but that’s not nearly as much fun.) Lo and behold, I see there is also a version that I can put on my Mac. For when the Terminal just won’t do.  Check out a video about it!   It’s a fun way to access a server from your phone at Starbucks! (Use your cellular connection.)

"Cathode: Disregard Decades of User Interface Progress" from secretgeometry.com

“Cathode: Disregard Decades of User Interface Progress” from secretgeometry.com

#prisoner106 Summer 2015

#noir106 Winter 2015

ECOO 2014 #bit14

#ecoo14 #bit14 Bring IT Together

#wire106 Fall 2014

Bava/Nobody WIRE106 T-Shirt

3D Anaglyphs

3D Glasses_FLAT AnaglyphBADGE GREY fill BLACK

3D Glasses_FLAT Anaglyph-A-GIF BADGE GREY fill BLACK

The Daily Create T-Shirt

#thoughtvectors

ds106 Spring 2014

#ds106 The DS106 Workplace

ds106 Summer 2013

Posts by Date

September 2015
S M T W T F S
« Aug    
 12345
6789101112
13141516171819
20212223242526
27282930  

Creative Commons

Visitors to de•tri•tus

105theHive.org


MiniCYHMN? | Status | 64K | Listening Options

Winampwindows Media PlayerReal PlayerQuickTime
Listening to 105theHive - details

ds106rad.io FAQs

What is ds106rad.io?
ds106rad.io is #4life.
Why do you ds106rad.io?
#4life.
Who is ds106rad.io?
ds106rad.io is of The Earth. That's you, brother!

105theHive.org MiniPlayer

MiniCYHMN? | Status | 64K | Listening Options