So far I’ve giffed a few images from the the Take 1840 exhibition. I then to find animating gifs as an end in itself, it is interesting that the both these projects seem to be thinking them as art.(there are some amazing examples at Tate Collectives tumblr).
I’ve also been reading The Academic GIF where Jim Groom is talking about how to:
integrate animated GIFs into a curriculum centred around film analysis.
The Tate challenge has become a ds106 Assignment, which already has some submissions, Tom Woodward producing beautifully subtle and a much more dramatic version of the same painting. Alan Levine puts both subtlety and humour in the same gif.
For the tate gifs I’ve changed tactics a little. I’ve been using photoshop to split the images into layers before switching to Fireworks for animation. Photoshop has superior selection tools.
I an unsure if anything I’ve done is Art but it is interesting in lots of different ways, from visual puns and jokes through problem solving. I wonder if gifs could become part of an arts curriculum in schools?
Mariana and I have been musing on a collaborative project based on the list. As she commented on her own post:
* An exclusive Radio Show planned to unpack the ideas ‘Golden DS106 bullets’ with guests in the hot seat and in conversation with the hosts (surprise for #DS106Radio next year)
Being connected to DS106 the first thing to do is to make some art, Paul has already started 106 Bullets, and I started playing this weekend. I had commented on the post:
This is just brilliant. 106 prayer beads. You have brought depth to headless ds106. These bullets would be great as a initial reading for ds106 or as a series of meditations during a round.
So I am riffing on beads & bullets, mantras & koans. The image at the top came is a wee photoshop experiment, I spent some time googling on how to wrap an image round a cylinder, after a tour of some that used the 3D menu I settled on warping a layer following: Warp Tool Effect – Photoshop Tutorials – CSSCreme.com.
I am afraid I still find Fireworks easier to use so imported this image it Fireworks for the duplication. I am now managing to use photoshop for selection as the tools are a lot better than Fireworks. (I am of course barely scratching the surface of photoshop’s power).
Next I started thinking of bumpers, still on bullets and messed about with Garageband a wee bit:
I was still wondering about the 3D tools in photoshop so started playing. I found I could make a bead from the DS106 Skull and Crossbones:
This was really easy, I make a 2×2 grid of the image grouped and then from the 3D menu choose New Shape from Layer -> Sphere I had one bead. I then duplicated it and rotated it with the tools from the 3D palette so I had half a dozen beads. This opened in Fireworks for some duplication.
I posted these images to the DS106 google plus group and got some interesting feedback: John Johnston – Google+ – pile of ds106 beads. Almost enjoying a little photoshop,…
Some of this was a distaste for bullets and skulls. I understand this, especially the bullets, I’ve giffed a few gunshots out of movies but it can feel a bit odd. (I do like thrillers and movies with guns though). I am happy to live somewhere where guns are mostly contained in fiction. With the Skull and crossbones I am a lot more relaxed, thinking of romantic piracy. Interesting to keep these thoughs need the surface and not get carried away. Hopefully the flowers, if not the skulls, will indicate that my bullets are peaceful and metaphorical puns.
Finally I though it might be nice to animate the beads:
This was the first pass. I am using my old friend SuperCard, a mac scripting application. I made 6 graphics, one for each of the different beads, these were duplicated until I had 106 beads on the ‘card’.
SuperCard makes it easy to manipulate object. I wrote a script to put each graphic on a random space on the card. Another change the size of the beads at random. Finally one to move each bead a small random amount and dump an image of the card to the disk. Looping through that a few times gave me a set of jpegs. There were taken into fireworks to be distributed to frames and exported as an animated gif.
As an example of how simple SuperCard is, here is the script to randomly move a graphic:
on randomMove n
get the loc of bg grc n
add random(60)-30 to item 1 of it
add random(60)-30 to item 2 of it
set the loc of bg grc n to it
end randomMove
Almost english!
I am thinking of changing this a bit, to roll the beads around and change their postion front to back, I might get some interesting gifs from this.
Cubomania is a surrealist method of making collages in which a picture or image is cut into squares and the squares are then reassembled without regard for the image – http://en.wikipedia.org/wiki/Cubomania
One of the nice things about the daily create is the new words you learn.
I though it might be more interesting to do this with code rather than slicing and dicing an image. Turned out I was only half right on this, as other folk turned in more interesting photos, but my process was interesting to me at least.
My first thoughts were to use SuperCard on my mac, but I then though it would be fun to try to do this on the web. I’ve done a little image manipulation online before, first I though of creating a form to upload an image to a server and use php to edit it with gd. (I did this for A flickr CC). I also thought about using javascript on a canvas element which lead me to wonder if you could do this without images reaching the server. A bit of googling and Reading local files in JavaScript – HTML5 Rocks pretty much fitted the bill, letting me cut and paste a chunk of code to pull an image into a page.
Once the image was on the page I could get to work on it. I am not sure if it is worth going over the code as it is pretty horrible, but if you look at the source the manipulation is in the cubomania function.
First find out the image dimensions and set the canvas element to the correct size.
var w=document.getElementById('newimage').width;
var h= document.getElementById('newimage').height;
document.getElementById('myCanvas').height=h;
document.getElementById('myCanvas').width=w;
It is then simple to work out the width and height of each square (one tenth of the width and height) and then an array of the coordinates of the top left of each cube.
This array is duplicated and one of the two arrays is randomly shuffled.
I discovered that copying the array and then shuffling one did not work, I needed to use otiles=tiles.slice(0); to get a copy that would not change when I shuffled the original list (tiles).
For shuffling I again hit google: How to randomize (shuffle) a javascript array? – Stack Overflow
Once I have two lists it is then a case of drawing each square from one list at the location of the same slot in the second list with the HTML canvas drawImage() Method.
The last bit of the puzzle is to take the canvas image and turn it back into a ‘real’ image that can be downloaded. I’ve done that before, so only needed to check my old page.
Of course I did not get any of this right the first time. My maths is not very good and I needed a few goes to work out how to fill the array mostly by trail and error. It is very messy in there. I also stored each location as an item in the array, this meant I needed to split it when using drawImage. I suspect know there are many many better ways to do this.
I am not posting this as an example of good practise, or recommending it as a method, more as an example of how you can have fun with ds106 by twisting the task and that you can have fun with code without really knowing what you are doing. Half the battle is guessing what you can do and then google will help with solutions. I am also aware this is not proper coding and my problem solving methods (guess and check) are far from useful, but I do enjoy myself.
Sounded interesting and easy enough to do in a few minutes. I made a few and learned a we bit more about photoshop in the process (basically, select, new layer via copy and then adding a Fill layer using the selected layer as mask). I’ve found I’ve gone to photoshop a little bit more recently as its selection tools are better than fireworks’s.
I uploaded the photo to Flickr and added the correct tags:
At that point there were no other photos tagged tdc725. This morning I checked the photo flickr and clicked to see photos with the same tag. I saw quite a few but mine was not on the list, and therefore not on the Daily Create page. I’ve seen this a few time before and tried removing and adding the tag to no effect. Then I googled and found: Flickr: The Help Forum: Ive added tags but its not working (yet?)
This post gave a clue and worked for me:
Just in case it helps others – I found that if I went into the privacy settings for a photo and re-saved (it was already set to anyone) then they pretty much appeared immediately in public tag searches.
I clicked Show More after Additional info on the photo page.
I then clicked Edit after Anyone can see this photo
I clicked Save on the dialog, even though it already said anyone could see the photo.
The phot showed up in the tag search immediately Flickr: “tdc725”.
