remix – Page 2 – 106 drop in

Maze of DS106

This started as a daily create, Create a Ghostly Portrait of Someone Who Is Participating in ds106. I added Tina to Seth’s wonderful In Case of Fire Move to the Nearest Exit which was a response to the daily create: Draw something on fire.

THe first version, peek a Tina was static, but I quickly got the idea that Tina could use her ninja skills in the Escher world. I posted this to google+. Seeing Janet’s ghost, based on a wall painting go me started adding more characters and posted: Maze of DS106 A bit of a work in progress.
Since then I’ve added a few more. There are now 10 ds106 participants in the mix.

Some credits, all cc as far as I could see. I did use a flickr user icon for Seth and Janet’s google plus icon.

Ghostly Selfie | Flickr – Photo Sharing!
Vivi_Nottingham11 | Flickr – Photo Sharing!
RockyLou Ripped from Reality! | Flickr – Photo Sharing!
Haunted Melbourne Sunset | Flickr – Photo Sharing!
I knew there was something creepy about that fog | Flickr – Photo Sharing!
The ds106 99: #47 d&ds106 Monster Manual—Cogdog | bavatuesdays

The process was not very complicated basically a lot of layers. Only one or two slightly tricky bits were I copied railings to make a character appear behind them. Most of the images have changes in opacity and blend.

GLITCHaCHROME DS106 Glitch-Gifs

I am not sure what week it is in the Headless 13 season of DS106!
After moaning about google plus, I’ve used it more than any other way of keeping hold of the ds106 tale. I still do not like the locked in nature of plus, but have to admit is it easy to use.

There have been lots of interesting paths developing as riff in ds106, I got interested in Mariana Funes’ glitching and watch the first wee bit of a video that Christina Hendricks posted about glitching.

There are a lot of tutorials and explanations about glitching online, but I just messed about with the easiest way, this involves opening an image with a text editor and making some random changes.

I got quickly fed-up with the length of time it took to do this and though I could make a SuperCard project to automate the process, allow me to quickly create glitches, I then though it might be interesting to create some gifs from the glitches and added that to the project.

At the same time I was paying attention to Rochelle Lockridge’s GIFAChrome Camera. Rochelle was making some lovely careful gifs and wrapping them in a ‘custom film’. I decided to borrow the frame for my horrible careless gif changing GIFAChrome to GLITCHaCHROME.

icon I added the GLITCHaCHROME to the SuperCard project which has resulted in the Simple Glitch application.
The application is pretty simple, it should run on Mac OSX 10.6.8 or later, mostly tested on 10.9.
There are no real instructions in the application but it should be obvious how it works. I consider this version 0.4 beta, but have no real plans for further development unless I get another idea.

simple glitch download If you give it a try I’d be interested in how you get on.

Update: 29.11.13 now at version 0.4.1 Beta which fixes a bug for 10.6.8 thanks Rochelle

BrigaDS106

So at the start of this week I though I’d get back into the headless course and do some video assignments. I spent a while looking through them but this one looked like it would be fun:

Download different scene clips from one movie to create a short commercial for DS106. Clip, trim and remix them to let people know what DS106 is all about and how they can find us at ds106.us. Challenge yourself to overdub the audio to have the characters saying DS106 where it would be appropriate. Also try and add the DS106 logo onto an object in a scene. You can find an example at The DS106 Matrix

from: ds106 Assignments: Mash A Movie For DS106

Looking back at the description I see I’d completely forgot about the logo bit, I also didn’t dub the characters. Rochelle’s example is great and I started looking for some sort of SF connection, but somehow ended up in Brigadoon. Perhaps because cogdog visited Scotland last weekend.

Also because I only read the assignment once I got it into my head to make a trailer. I found the Brigadoon trailer on youtube:

Mt first idea was to find the clips used in the trailer without the text and recreate it shot by shot with new text and voice over, of course I could not find the same scenes on youtube. I did find a few clips and decided to go with the timing and titles from the trailer with different scenes behind.

I expected to do the editing in iMovie but quickly realised that its titling was not up to the zooms and swings on the original. I switched to Screenflow as I knew it could do nice transitions of text. There I found that the text could be animated nicely but not curved. So I opened up Fireworks to make transparent titles which I could animate in Screenflow.

By now I’d spent a fair bit of time on this with nothing to show so I only spent a few minutes realising that recreating the text accurately would take more time than I had. I just found a vaguely similar font and used that. I also used a brighter yellow that the original.

brig-title-04

The workflow was, copy a frame from QuickTime of the original trailer, paste into Fireworks. Add text, messing a little with the spacing. Then aligned the text to a path if I needed a curve, dropped a shadow, grouped and gave a quick blur. Hid the scheenshot layer and exported as a transparent png. I hide all the layers, added the next screenshot a did the next bit of text. All the graphics from one document for laziness.

Back in screenflow I edited the clips, animated the overlay and added a voice over. Screenflow is a pretty nice tool for this sort of thing and would be good and doing the animated typography sort of movie too.

This took a fair amount of time, if I had ben willing to spend more time it would have been less rough, the text could have been better, the voice over I just used the first take with my macs inbuilt mic as I did that bit at lunchtime in work. I had to extract audio from different bits of video and move it around, again I did a fairly quick and dirty job of this, trying to balance time and fun. THis is the final effort:

You might notice that some of the characters are aligned weirdly or rotated a bit, this was first due to accident, I could have cleaned up the path they were aligned to in Fireworks but left them in and made some more for extra klunky charm;-)

Flicking a Five Card Story

Five Card Story: leaving

a Five Card Flickr story created by johnjohnston

flickr photo by dwtno

flickr photo by Serenae

flickr photo by bionicteaching

flickr photo by katerha

flickr photo by shareski

Thro the fence,

A mossy climb,

Deeper.

Leaving the city:

Into a cleaner space.

This week it is suggested that we try a Five Card Flickr story, I took a run at it yesterday.

As I clicked trough the activity, I kept getting ideas that would turn away as I loaded another set of cards, instead of going with the flow I restarted a few times. Better perhaps to just pick up the cards as they are dealt? I didn’t end up with much of a story.

Today I though I’d post it and my mind turned to styling the code provided a little, it then wandered onto maybe making a slideshow, the result is above.
I started off by adding a wee bit of css to add a frame/border round the photo.
You need to use the text/html editor in WordPress (similar in other systems too) to paste in the code from Five Card Flickr, I edited a bit in a text editor first as this is easier than using the blog editor.

First I wrapped the paragraphs containing the images in a div, putting:
<div id=”5cards”>
Before the first p tag and:
</div> after the last.

I then added a style block:
<style type=”text/css” media=”screen”>
#fivecards{height:320px;width:500px;} #fivecards p{text-align:center;; }
#fivecards img{max-width:500px;max-height:300px;border:solid 1px;padding:10px;box-shadow: 5px 5px 2px #888888;margin:5px} #fivecards a{color:#000}
</style>
This gave the images a border and a shadow.

U
I then needed some JavaScript to sort out the slideshow.

First I need to hide all but one of the images:
div4search=document.getElementById('5cards');
var someas = div4search.getElementsByTagName('p');
for (var i=1; i < someas.length; i++) {
someas[i].style.display ="none";
};

Next I need a timer to hide the current image and show the next one.

I found a nice timer class: Object Oriented Programming with JavaScript : Timer Class – Daily Coding which looked as if it would do the trick.
So added the code for the class to the post inside the script tag.
I then added a timer_tick function which will be fired every time the timer ticked:

function timer_tick(){
	document.getElementById("div1").innerHTML =index;
	var someas = div4search.getElementsByTagName('p');
	for (var i=0; i < someas.length; i++) {
		if (someas[i].offsetWidth>0){
			someas[i].style.display ="none";
			if (i==someas.length-1){j=0;}else{j=i+1;}
			someas[j].style.display ="block"
			break;
		};
 	};
}

This is not very elegant, instead of remembering which photo is showing I just run through them all and the one that is visible is the current one. If it is the last I show the first, else I show the next.
I added this to the script block.
The other thing I did was to take the javascript and run it through Minify Javascript Online this put it all one one line. I think you need to do this in wordpress or the editor messes up by adding p tags in the middle of the script.

Not a particularly good way to approach this in a general way, but a nice wee problem for pushing my babysteps javascript a bit. I often wonder if there show be a wee bit of htlm/css/javascript in ds106 and I frequently use messing about in this way to avoid the main question;-)