John – Page 17 – 106 drop in

Threading Bullets

A the end (or endless end) of the headless ds106 course, Mariana published a wonderful reflection on her tumblr DS106 in 106 posts and 106 bullets published at 1:06.

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:

Using Freesound.org – “Gunshot2.wav” by alukahn.

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:

beads_01

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.

Cubomatic

Cubomania!

Yesterday’s daily create was an interesting one:

Create a Self Portrait Cubomania Style

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.

Here is Cubomania! ready cubing your pictures.

Update 8 January a verson that makes gifs: Cubomania Gif!

cubomania

The Case of the Missing Tag

missing-label
Photo edited from Labels by Mrs Magic Some rights reserved

Yesterday the DS106 daily create was Create an outograph- an image where the subject has been cut out

This technique was coined by beat poet Ted Joans; see some examples from Believe the Impossible

Upload your photo to flickr and tag it dailycreate and tdc725

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.

from: Flickr: The Help Forum: Ive added tags but its not working (yet?)

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”.

Automating autocomplete Gifs

google_autocomplete

I saw an autocomplete poem on tumblr today which reminded me of Illustrating Odd Autocompletes | Bionic Teaching and the ds106 assignment that came out of it. Illustrating Odd Autocompletes.
On another post, Internet Ephemera – Sociology Edition Tom Woodward has a flickr slide show of some autocompletes, which made me think of creating an animated gif.
A bit of thought and I realised that this could be automated with a few bits and pieces. The main one being Gifsicle. Gifsicle is a command line tool for creating animated gifs, I used it in Simple Glitch and Movie2Gif.

This time I though I could use it in combination with AppleScript and Safari to produce some simple gifs.
Here is the script:
autocomplete-gif-applescript

It just asks for a bit of text and used that to create gifs by running through the alphabet, eg give it I love” and you get, I love a, I love b, etc. The final animated gif is saved on the desktop, in this example called i-love.gif

I just run this from the apple script editor. As the script uses System Events to ‘type’ you need to turn on access for assistive devices and applications for the Script Editor if you are using OS 10.9 (
OS X Mavericks: Enable access for assistive devices and applications)

You do need to have installed Gifsicle first too.
I’ve hard coded the crop into the script, if Safari is not filling the screen (not full screen) you would have to edit the script for that too.

I guess it has taken me a wee while to figure this out, but I can now produce as many autocomplete gifs as I like.
ds106