Tag: VisualAssignments

Posted on
by

Sherlock gun

I am reusing an old post as I though it might do for a DS106 Tutorial.

I’ve used this application for both creating gifs from short sections of movies and form video footage shot on my phone.

Last year I was following some of the DS106 fun and playing with animation gifs. Instead of using photoshop or the like I fell upon the command line application
Gifsicle which works very well indeed on OSX (and is available for lots of other platforms) Gifsicle is © Eddie Kohler.

I wanted to speed up my workflow playflow for messing about in this way and though of SuperCard, my favourite mac application. I’ve used SuperCard to create a simple application (mac only) that will, load a Quicktime compatible movie, grab a short selection of frames, and create an animated gif with a few mouse clicks. The SuperCard bit grabs the frames and then used the gifsicle app (which it contains) to create animated gifs.

I’ve tested the application only briefly on a few different macs (10.4, 10.5 & 10.6 or tiger, Leopard and mostly Snow Leopard) and it seem to work. On the old G4 10.4 machine there is a wee bit of lag grabbing the frames, but it works out ok. Update I’ve made a new build that works on Lion (2012-02-14).

There are very few features, the application will grab 10 frames and you can choose to grab them every 1-20 frames. It will export a selection of these 10 frames and allows you to do some simple colour reduction.

Here is a screencast:

You can download Movie2Gif from my dropbox, it is a rainy afternoon project miles away from a polished bit of software but might be useful/fun for someone.

I’ve found the odd .mov file that will not play in my application, opening it in QuickTime and exporting to iphone format seems to fix these.

If you Movie2Gif and give it a try, let me know how you get on, if it gets any positive feedback I’ll do a bit to improve it. Please send any suggestions, bugs etc to me.

Posted on
by

Another quick DS106

Color splash is a technique to emphasize details- you remove all color from a photo, and then restore original color to a single object, e.g. a green apple on a table. Think of the Girl in the red dress from Schindler’s List.

After watching Video Tutorial: Splash the Color : neverthesameriver I had another wee play with photoshop. A little of which is beginning to make sense.

Color Splash

Posted on
by

Photo It Like Peanut Butter — MISSION: DS106

Rather than making animated GIFs from movie scenes, for this assignment, generate one a real world object/place by using your own series of photographs as the source material. Bonus points for minimal amounts of movement, the subtle stuff.

Yesterday I saw My Animated GIF Day by Ben and thought a wee bit about his driving gif. His method seemed a wee bit dangerous so I decided to you the iPhone iTimeLapse app to grab my journey home last night. I could then get stills to make an animated gif. I’ve made a few but was not delighted with them. Today I took some more footage including some going through the clyde tunnel. This was hampered by the fact my phone holder dropped off the windscreen so I only got a wee bit. It makes quite a nice gif.

tunnel gif

I created the gif using the wee app I made as a front end to the Gifsicle commandline tool, Movie2Gif while watching a previous episode of DS106. I found that it did not properly play the movies from iTimeLapse so I had to re save then using QuickTime first.

Posted on
by

Past ds106 0clock

Ad DS106 get underway I’ve found my Daily Create rate has dropped right off. I was doing ok before the course got underway and then it went a bit pear-shaped. I managed 10 DS106 photos and a few dailycreate sounds. I managed to do the odd full assignment but was quite pleased that I already had a blog. This week I’ve really dropped out of the game. I don’t feel bad about not doing any creates but I feel a bit guilty for not paying much attention to other folks work/play. Only managed one comment his week.

Anyway according to Week 4: Photography and Visual Assignments the next bit is to try and do some Visual Assignments so this is my first the Comic Book Effect.

Method:

  1. iSight Photo at lunchtime in the office.
  2. Added clock and watchstrap in Fireworks, saved as jpg.
  3. Cut trace round in photoshop with magnetic lasso and delete office.
  4. Add background from Mr. Blue Sky – bevevans22’s posterous.
  5. Save jpg to dropbox
  6. on iPad move to photo library via dropbox app
  7. Use Halftone to make halftone effect.

I was hoping something of the rabbit from Alice would come through.

I would like to be make a much better watch, (need a bit of time;-)) and be able to do the halftone in photoshop.

I did manage a couple of photoshop tutorials this week, nice short ones from Matt Gemmell,
Etched effects and Subtle UI texture which I found useful. I found another tip here: Splash The Color from a DS106r.

Posted on
by

Jim at ted

After I saw Yamily Feud | Ben Harwood – DS106 – Spring 2012 I was thinking of the yams dancing at TED, as I already had Jim dancing I did this. It uses Ben Rimes’ ted template and Andrew Allingham’s ds106 radio poster/design.

I’ve also posted this in the ds106 category here but not the default, hopefully this will get picked up by ds106 but not go into my main feed. This will give folk who read ScotEduBlogs a break as DS106 hots up (If I manage to keep up the current activity rate).

Posted on
by

studying… by fazen
Attribution License

A couple of days ago I was reading Building the No English Words Translation Tool on Alan Levine's space for barking about and playing with technology he described how he was building a tool for ds106 Words With No English Translation with some JavaScript, as I popped on a comment I was reminded of http://iheartquotes.com/api an API for getting quotes. and had a wee play to produce Pics for Quotes (or a better title) a simple webpage that pulls in a random quote and then allows you to click on it to search flickr for the word clicked on. I wondered if this could be a ds106 assignment.

Alan comment back with some suggestions:

“Visualize That Quote”- rather than provide choices to pick from Flickr for each word; maybe random generate one image per word. The activity would be to illustrate/explain the quote in pictures with the least number of pictures required. The user could X out ones they did not need (and they would dissapear) and perhaps allow a click to generate a new random image to replace it. They would then do a screenshot to save their work? Perhaps generate a score where there is advantages to lower numbers of pictures and fewer image replacements?

I did a bit of work and got a basic implimentation of Alan's suggestions going. Alan then blogged about it again with some more suggestions:

  • See if it can skip unnecessary words like “a”, “the”, “of”
  • Be able to return a word if we accidentally click it closed
  • Tweak the css for thr “attribution” link at bottom (sometimes overlaps the license text)
  • Make it so when you hide the titlebars, it also hides the text of the words and the quote, to make it a true guessing game.

I've managed to make most of these changes and have a sort of working page: Visualize That Quote that has become a ds106 Assignment Visualize That Quote — MISSION: DS106

What Visualize That Quote Does

  1. Pulls in a random quote of less than 8 characters from the Quotes API and displays it.
  2. Searchs Flickr for a creative commons images to go with each word and shows one for each word.
  3. Allows you to swap out the images by clicking.
  4. You can reorder remove or hide images.

Here are a few examples I churned out without much though while testing this:

The DS106 Effect

It is great to get the quality of feedback and suggestion from a blogger I've read for years. The whole ds106 network is incredibly supportive even before the course has started. I started riffing off Alan's idea and was pushed and encouraged to improve something that started as a slightly pointless exercise to be come almost useful. This reinforces, for me, the power of blogging and commenting in learning. I've spend a few hours polishing something, learning as I went due to the community effect. I'd already had some of this in ds106 related posts. The current exchange has been particularly powerful becasue it was not just a well done, but a you could do this

Once I go back to work, tomorrow, I am not sure how much of ds106 I'll be able to keep up with as even before the spring course there is a fair flood of posts, but I'll give it a fair try.

I'll also be thinking a bit harder about how I comment on pupil blogs, too often it is easy to go for well doen and leave it at that.

How it Works

A mix of jquery, php & jQuery UI.

Part of the ds106 ethic seem to be to explain how something is done so that others can learn from it. My coding will not stand much of a critical eye, I am no programmer, but some folk might find this interesting or even useful.

The Quotes API will send json, but although that worked in desktop test I couldn't get it working on the web due to cross domin problems, I tried setting it to jsonp and that brought it in but I got errors trying to parse it with jQuery. Knowing very little about this stuff I side stepped it by pulling the json in with php so I could get that with jQuery's ajax stuff. Any jQuery/Javascript (and css) is all on the one page and you can have a look if you are interested by viewing the source of Visualize That Quote. It is not a pretty sight, as my method of coding is guess and check and google and guess and check. I have a tendency just to get things going and then push on.

This quote is put on the page, next javascript strips out all of the punctuation using:
str=str.replace( /[^a-zA-Z ]/g, '').replace( /ss+/g, ' ' );
Which I got from How can I strip all punctuation from a string in JavaScript using regex? – Stack Overflow. The script then pulls in html to show random flickr image via a php file which uses phpFlickr: randomFlickr you can see the code with some notes. I am recycling this from elsewhere (A flickr CC search toy). One the javascript has the code it puts it on the page.

More javascript swaps out the pictures for others when they are clicked.jQuery makes that pretty simple. jQuery UI handles all the dragging:

$("#flickr").sortable({
		handle: '.drag',
		revert: true
		    });

Which is pretty simple. I just copied that from the jQuery UI site.

Most of the other things are deal with my toggling their visibility with jQuery again: $('.attribution').toggle(); in this case this hides or shows the attribution for all the pictures, these are in a span with the css class .attribution.

How it could be better

  1. The flickr search could return json rather than html, this would give a better logic to building the set of images. I'd need to learn how to produce json with php and to process this with jQuery.
  2. Most of the work is done with simple functions, these are called from hard coded onclicks, the more common way to do this with jQuery seems to ad these with jQuery when the pages is loaded.
  3. Rather than expect users to take manual screenshots it should be possible to created composite images with the attribution and optionally the text stampled on. I've done a little of this sort of thing before (the stamp function of A flickr CC search toy) but this would streach me and google a bit.
  4. Alternativly an embed code that would embed a wee set of thumbnail pics and link to a full viewing of the creation. In both this and the last case I'd need to figure out what to do if a user reorders the images. In this case I might need a database.

Given the return to work tomorrow, all the fun I'll have on ds106 and Colin Maxwell's Ed Tech Creative Collective I am not sure if I'll get to this any time soon, but I've had a great time with this so far, if you are part of ds106 I hop you finf the assignment useful, I am very open to more ideas and suggestions.

Posted on
by

My first attempt at a ds106 assignment. I was reading Alan Levine’s post Building the No English Words Translation Tool about a new DS106 assignment Make The Untranslatable Understood the task is:

Use the Random Words with No English Translation tool to generate a word that could be better understood with a photo or image. Find a creative commons image or make your own, and include the word somehow in the image (using a desktop photo editor or web tool like Aviary or PicNIk). Then share it with someone and ask if it makes sense.

I click through a few and then got sidetracked (more about that later).

Today I reloaded the tool and Uitwaaien popped up.

“Literally, this Dutch word means to walk in the wind, but in the more figurative (and commonly used) sense, it means to take a brief break in the countryside to clear one’s head.”

I slightly disremembered this, thinking of head in the clouds which reminded me of the cover of On Having No Head: Zen and the Rediscovery of the Obvious by Douglas Harding. This lead me to this (click for larger versions):

Uitwaaien 440

and this:

Uitwaaien Crop 440

Checking images for the cover of On Having No Head it seems that my memory was faulty again, not quite how I remembered it. Not to worry.

One of the resions I am joining in with ds106 is to learn how to photoshop, having a fairly unused copy on my work laptop, but here I went for my comfort zome of fireworks 8 (the last one with a really good edu discount). I mostly use fireworks for cropping and maybe dropping the odd shadow but Feathered selections and transparent gradients in Fireworks 3 go me on the right track

Howto 8

I faded the head a wee bit too much but I know how to do it now. I had 2 photos ofthe same place one with me in it one without (Credit to my daughter Christine). I tool my head area out of the photo without me and cropped it to a wee rect round my head as a layer on the photo of me. I then masked the layer with a graident as per instructuions.