User:Eleanorg/Prototyping Notes 27 Oct 2011
27 October 2011 Prototyping
HOMEWORK REVIEW
- Silvio - grabs image from open clip art, then divides into component parts & makes patterns with them using python
- Sebastian - Grabs an image, searches for a similar image, repeats. << good example for transformation technique I've been looking for in my independent research.
See also 'Google anxiety monitor' by Renee et al (De Geuzen), searches for politically loaded words in four languages simultaneously and displays the varying results. Now broken as Google has changed image search URLS - interesting dependency questions
- Jasper - Converts a video from a youtube URL into an animated SVG. How could this be played with; availability of each individual frame? How could they be manipulated?
- Laura - 'In need of glasses' - Each letter of alphabet is assigned a shade of grey, and a little rectangle of this shade is printed for each letter in the text. Probably the most similar to my one; text becomes an image that is then printed like text (in lines)
- Mirjam - Creates a dream 'haiku' by making markov chain from a diary entry of her dreams. Really nice way of 'making dreams' - essentially Markov chain imitates the way your subconscious generates stories from a store of memories. Making dreams out of dreams.
- Andre -Animated rectangles using 'transform' in XMl, using a for loop to create 'rippling' effect:
<animateTransform attributeName="transform" begin="1" dur="{5}" type="rotate" from="360 {3} {4}" to="0 {3} {4}" repeatCount="indefinite" id="animateTransform8537" />
Also - 'Clock' - first line rotates every second, another every minute, another every day. Lovely abstract use of the idea of the clock as scripted object.
- Jonas - Splits up In Search Of Lost Time into blocks of 140 characters and tweets them. Imports 'twitter' and uses twitter API (? <r>) to make it easy. << Steal this code! Maintained by a cron job set up on a server, to run every hour. Will take just over 6 years to complete. << <r> See Jem Finer etc, long-term artwork
Uses python feature 'slice notation' to grab sections of text based on number of characters: first = swan[0:140]
Using slice notation: text = "blah bloody blaaaa" print text[0] - prints 'blah' (0th word) print text[0:10] - prints characters 0 to 10 print text[:140] - prints first 140 print text[10:] - prints everything from character 10 onwards
foo = text[0:2] print foo - will print text characters 0 to 2
- Inge Python script generates a series of random rectangles in a loop, prints to an SVG file.
Also: 'Soldier Soldier' remix putting 'nonsense' or unexpected words. Echoes 'mad lib' game where player asks partner for random nouns etc, filling them in and producing funny sentences: http://en.wikipedia.org/wiki/Mad_Libs
Could work this up into a more finished end result: push finished text to inkscape and export as .pdf, for example. OR - how to take a text and turn it into a mad lib - taking out words?
- Laurier - Visualisation of a Markov chain generated from a text in Gutenburg database. Creates an SVG with the text, manipulated with javascript so you can interact with it visually in a browser.
<r> Project Gutenburg database - could be great resource/ inspiration for projects
- Dave - cool update of the zeotrope, where you 'animate' a series of stills manually by cranking a handle. In this one, you animate them by scrolling.
Notes on my homework:
- Could make a CGI (?) so that a new 'text' is produced on each page reload - Moving beyond random number generation as a way of making choices about content. Look at similarity engines like Andre & Sebastian have been playing with. - Pushing text/image blurring further: fontforge font editor; can export SVG
USING LIBRARIES & PATHS TO STORE THEM CORRECTLY - Library is a piece of software that you can only access via python - Software is launchable from anywhere because it's in the $PATH variable - stores a list of places where programs can be found, working through them until it finds the program that has been asked for. To see this list just type echo $PATH - Key Unix idea is that pretty much everything is in the filesystem and has its own path. Programs all have their own path, usually in /usr/bin or /bin
MAKING INKSCAPE EXTENSIONS
- Put your extensions in .config/inkscape/extensions
- Save them with .inx extension - this is an XML file understood by Inkscape as an extension; it basically points to the python script that will actually do the actions
- Save the python script in the same folder, with with .py extension
- For basic 'hello world' code for the .inx and .py files, see http://pzwart3.wdka.hro.nl/wiki/Creating_an_Inkscape_Effect_with_Python_%26_ElementTree
Standard skeleton code for the .py file works like this:
- import libraries
import sys, codecs from lxml import etree
- open the SVG file, using Codecs as it's good with encoding
f = codecs.open(sys.argv[-1], encoding="utf-8")
- parses the file to an element tree object
doc = etree.parse(f)
- In the middle here is where you manipulate the tree
- Push tree to standard out
sys.stdout.write(etree.tostring(doc, encoding="utf-8", xml_declaration=True))
Instead of pushing to std out, you could just use a 'print' command and print an SVG image like in the scripts we did last week.
ELEMENT TREE (xpath) A way of representing an XML document, which lets you manipulate it easily. Makes XML file into a kind of list - like in the XML editor in Inkscape doc = etree.parse(f) line in the python script makes the document into an etree object, so that the extension can manipulate it.
You can also use it on an HTML file - for example, rather than a plain text search, you ask for a specific
within a specific
you want. There are better tools for manipulating HTML, but it is very useful for RSS feeds, which are in XML format.
foo.xpath("//svg:rect") - searches anywhere in the document with // for the term svg:rect foo.xpath("
you can then assign the 'search result' to a variable: foo = t.xpath("//svg:path)[0] this variable contains the first result which matches this search for "svg:path"
...then you can manipulate it by assigning it new values. ...then you can dump the manipulated XML into a string, thus created a changed SVG file.