...more recent posts
An addendum to class 4, these are the additional links we spoke about (I was going to do them at a later class but you were all so demanding):
http://aleksandradomanovic.com/
http://oliverlaric.com/
I also figured out the clever way Oliver did these moving pixel portraits: http://oliverlaric.com/pixel/christophpriglinger.htm. He gridded off the original image and created a small GIF of each grid square, reassembled them in one long line of 'img src' tags and excluded any line breaks. Simple and brilliant. Once we start the photoshop instructionals you can make some of each other, and we'll see if I'm right . We're in a tiny perfect open-source universe here.
We will still discuss Olia Lialina's site at another time, so I won't include the link since we were just looking at her opening page.
Class #4
A few loose ends I should tie up from last class since we got sidetracked with youTube hacking.
First of all, I meant to show you some of links to work that show some different collection strategies (some more successful than others):
http://doublehappiness.ilikenicethings.com/?p=173
http://doublehappiness.ilikenicethings.com/?p=504#comments
http://doublehappiness.ilikenicethings.com/?p=911
http://doublehappiness.ilikenicethings.com/?p=1307#comments
http://www.sweetgifs.com/?pg=1
http://nastynets.com/?p=470
http://nastynets.com/?p=566#comments
http://doublehappiness.ilikenicethings.com/?p=53
http://www.digitalmediatree.com/tommoody/?31122(space bloom)
http://www.digitalmediatree.com/sallymckay/ovvlvverk/pageback/42653/
I'm raising the bar ever so slightly as each class goes on.
I'll repeat that the collection assignment will be one of two final assignments.
minimum 25, max 50.
Lists of things that are invested with meaning or interest for you. Must be compelling for you or it won’t be for me.
You can go as low brow or high brow as you want . (No kitteh animations with earphones. That's the only rule. All other kittehs are acceptable.) You will have to find an interesting way to place this collection on an html page, a way that is somehow works with what you're showing us.
Another search method for your collection assignment:
Go to an on-line language translator, http://babelfish.yahoo.com/translate_txt, get translations for your keyword in several languages and try all of those languages with a Google image search. http://images.google.ca/imghp?hl=en&tab=wi the results will always be different. Try other search engines, for example http://www.dogpile.com/ is an aggregate of a bunch of diferent search engines. Every engine has its own search algorithm that is going to yield different results.
Last class I meant to talk more about tables. you've probably discovered them already on that three schools tutorial page: http://www.w3schools.com/html/html_examples.asp. They are totally counter intuitive, a major pain and one of the main reasons why Dreamweaver exists. However, Dreamweaver doesn't give us enough control as artists, that's why we've been hand-scripting stuff in this class
One row and three columns:
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
| 100 | 200 | 300 |
so here's an example of an artist clearly using tables (yes back to Chris Ashley because he always surprises me with something wonderful) http://looksee.chrisashley.net/archives/756
If we strip the images we have this underlying structure (I added a border and left spaces between the coloured cells into show it better, but it only seems to work in IE):
As I mentioned in a previous class, go to the three schools link, find the tables tutorials and insert your own images in, you'll start to get an intuitive understanding of how you can make them work for you.
Now we can look at a seemingly more cacophonous page: http://jpegmess.org/1.html. by an artist from Chicago named Robert Wodzinski. Mess is deceptive, this is very sophisticated work, and for those who love "more is more" there's a lot you can learn from looking at what he's doing. Remember we are talking about 2D pictorial space, you learned about composition in your foundation year.
I'd make the same point about the surf club double happiness that many of you have already seen in other sample links: http://doublehappiness.ilikenicethings.com/
These artists are all well aware of how they're placing their posts within the framing device that they all agreed on. They're currently in a show at vertexList http://www.vertexlist.net/ in Williamsburg, Brooklyn.
Tom moody posted some images from the installation: http://www.tommoody.us/archives/2008/09/13/double-happiness-at-vertexlist/
I partially agree with Tom's assertion:"Taste and restraint are concepts they have no use for, making them the most lifelike of the surf clubs."
But I think they show an incredible amount of taste in their choices for the installation. (They aren't throwing shit in a pile)
It also reminds me of fastwürms' Donkey@Ninja@Witch that some of you may have seen last year at the AGYU.
Now lets get to the insanely fun stuff. GIFs: Graphics Interchange Format you can read about the technical history here: http://en.wikipedia.org/wiki/GIF
from Moody's post at artfagcity (http://www.artfagcity.com/) - http://www.artfagcity.com/2008/08/05/img-mgmt-psychotronic-gifs/#comments
"Animated GIFs have evolved over the last several years into a kind of ubiquitous “mini-cinema,” entirely native to the personal computer and the World Wide Web. Almost anyone can make one and almost every browser will read them. (From Wikipedia: “the Graphics Interchange Format is an 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.”)
In other words, no YouTube compression, no wait time, no subscriptions or proprietary formats to view, and they can be made in the most elementary and cheap imaging programs (free if you search for open source). GIFs are the purest expression of the democratic web and along with JPEGs and PNGs comprise its most authentic visual language.
As an artist I am attracted to this medium and have been making and posting GIFs for several years. This mini-cinema can be “scaled up” for galleries and film festivals but it’s equally fun to surrender it to the big pool of home-made creations that circulates on the Web. It’s gratifying to find GIFs you made yourself circulating on the pages of strangers months or years later. I don’t consider this “mail art”–it is too chaotic and lacks that practice’s genre rules. At the same time I do consider it a legit and underexamined form of post-studio art."
This is the gif I first saw On Tom Moody's blog that indicated to me that there was some wonderful stuff going on created by people were weren't neccessarily thinking of themselves as artists.
(this one's pretty great too. Can't remember where I found it)
Her too.
Below are animations by Sally McKay that got me excited about making them myself:
|
|
||
|
|
|
|
|
|
| 
|
 | |
 | |
 |  |  |
We made so much fun of this one: http://www.digitalmediatree.com/sallymckay/comment/37805/
For more graphic based animations, Tom Moody's archive is a good reference for you: http://www.tommoody.us/archives/category/animation-others/
Today we are going to download a simple gif animator program (If Paul wasn't able to get to it): http://www.blumentals.net/download/
then right click this wankerman animation and save it to your hard drive:
Simple is deceptive there is a lot you can do with this program.
animation by Petra Cortright
(can't remember where I got these, so I don't have an artists' credit)
Lesson # 3
This isn't a correspondence course, stay for the whole class unless I let you go early.
Put your name on top of your html pages with this line below it, the tape thing didn't work for me last class:
The code looks like this: <HR NOSHADE WIDTH="100%">
Play with its attributes, don't see any? Try some out from other tags. I will explain right now the difference between relative and absolute values.
-a few interesting things from last class, fuck ups as opportunities. All the experiments later I tried didn't work. (I wanted to make HTML plaid, maybe I can do it with CSS)
-pushing the medium to do surprising things
-learning to use these tricks in a way that has some organic relationship to the images
a lovely restrained use of gifs: http://www.petracortright.com/
(marquees!)
http://nastynets.com/?p=616
http://nastynets.com/?p=572
http://www.gooooooooooooooooooooooooooooooooooooooooooooooooooooogle.com/100mmarquee.html
http://loshadka.org/billy/huge.html
http://nastynets.com/?p=542
http://nastynets.com/?p=603
http://nastynets.com/?p=1435
Instead of doing an important tutorial on tables the hard way, we will go to the best web based tools I have found for learning scripts on line:
First of all, a good list of tags and attributes for reference: http://www.html-reference.com/ Here you'll find atributes for a lot of tags
now to tucows.com for alleycode shareware: http://www.tucows.com/preview/315334, download the software to your machine.
Other tools:
The best HTML instruction ever: http://www.w3schools.com/html/html_examples.asp b/t/w the font tag is being depreciated so we have to experiment with css (cascading style sheets)
Experiment with placing images and /or text in remixes
some examples:
http://www.digitalmediatree.com/tommoody/?41322
http://www.digitalmediatree.com/tommoody/?41297
http://www.digitalmediatree.com/tommoody/?40630
http://www.eyekhan.com/eyekhan/EYEKHANLABS-GIFS.html
http://www.digitalmediatree.com/tommoody/?39410
http://www.digitalmediatree.com/tommoody/?39293
http://www.digitalmediatree.com/tommoody/?37206
Read this post on GIFs: http://www.artfagcity.com/2008/08/05/img-mgmt-psychotronic-gifs/#comments
http://www.digitalmediatree.com/sallymckay/LMfoundGIFs/
Use picsee to look at the actual dimensions of the gifs I use: http://www.nastynets.com/picsee/
another great resource for animated gifs is: http://www.txt2pic.com/glitters/1.htm
(Some of the keeners can hack into these pages):
http://www.krazydad.com/makecolors.php
http://oliverlaric.com/displacement.htm
YouTube hacks:
http://www.tech-recipes.com/rx/2108/youtube_hack_automatically_start_loop_videos
More on hacking:
cover youtube in blood: http://nastynets.com/?p=923
http://nastynets.com/?p=412
http://www.brohans.com/2007/01/30/video-can-you-embed-two-youtube-videos-on-top-of-each-other-answer-yes
http://www.tech-recipes.com/rx/2522/youtube_how_to_save_youtube_videos_pc_mpg_avi_format
More collections:
http://doublehappiness.ilikenicethings.com/?p=173
http://doublehappiness.ilikenicethings.com/?p=504#comments
http://doublehappiness.ilikenicethings.com/?p=911
http://doublehappiness.ilikenicethings.com/?p=1307#comments
http://www.sweetgifs.com/?pg=1
http://nastynets.com/?p=470
http://nastynets.com/?p=566#comments
http://doublehappiness.ilikenicethings.com/?p=53
Blingee: http://blingee.com/
Make a blingee today!
If you still have time read the two essays on Web vernacular:
http://art.teleportacia.org/observation/vernacular/
http://www.contemporary-home-computing.org/vernacular-web-2/
Next class:
- bring a digital image of yourself. One that you like.
- we download a simple gif animator
We have 20 days free of charge, so don't download it yet: http://www.blumentals.net/egifan/download.php
Then we'll move on to the tools in photoshop for animations.
From Ellen Stafford The flickering effect only works in firefox:
‘
Lesson #2
(partially based on http://docs.google.com/View?docid=dfptfv4s_108d28533nt written by Laura Britt Greig)
first of all some references for your collections project and how have other artists have dealt with it:
Collections:
http://www.cherylsourkes.com/index.htm
http://denver.cn/
http://www.flickr.com/photos/marisaolson/sets/72157602681001997/
http://www.theageofmammals.com/groupshot/
http://guthguth.blogspot.com/2006/04/halt-robot_14.html
http://twitter.com/vvork/
http://nastynets.com/?p=424
http://nastynets.com/?p=580
http://www.artisforthepeople.com/19lamps.htm
http://www.loshadka.org:80/wp/?p=305
Now to today's lessons:
hackers vs. defaults
Hackers (very briefly, I don't want to go into too much detail until later in the course):
http://fffff.at/how-to-curate-yourself-into-the-new-museum/ (Borna Sammak) (I love him)
http://404.jodi.org/
These next two links courtesy of Chris Ashley:
http://www.advancedpoetx.com/
(Siegfried Holzbauer is an Austrian visual artist often using language as a way to generate blocky HTML images- working in the Concrete Poetry vein.)
http://www.donrelyea.com/algorithmic_art.htm
(Don Relyea is an artist and musician who is a real life accomplished programmer and writes his own software to create digital images from scratch or from other sources, like photos. He makes a lot of work. A couple of years ago he wrote The Reductionizer, which converts jpegs into html tables http://www.donrelyea.com/reductionizer_project.htm he says he got the idea of this by seeing some of Chris Ashley's tables that have a background image)
Defaults
Corporate blog software,
blogger
LiveJournal
WordPress
myspace etc.
So we need an HTML primer here since using Dreamweaver teaches us nothing.
(For the students who know HTML: http://looksee.chrisashley.net/archives/603
Download the source and create an HTML file on your desktop, isolate the actual image and start playing with the values.)
For the rest of you:
1. Open a new plain text document
Mac users: open Text Edit, hit Command-Shift-T (or Format -> Make Plain Text)
PC users: open Notepad
2. Write the following code in the document:
<html>
<head> <title> hello, world! </title> </head>
<body>
Hello, World!
</body>
</html>
3. Save the document as index.html on your Desktop
4. In your favorite web browser, go to File -> Open File and open index.html
Check out these tags for manipulationg text:
<b>hi</b>
hi
<i>hi</i> <
hi
What are all these < and > things doing here? When you place a certain thing within these you are making something known as a tag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document. A more advanced tag for maipulating text:
<font size="+2" color="blue">Hi!</font>
Hi!
Now check out the wonderful world of hexidecimal colours: http://www.december.com/html/spec/colorhslhex6.html#12
<font size="+3" color="#5A9108">H</font><font size="+5" color="#8A4C0F">i</font><font size="+7" color="#8A0F0F">!</font>
Hi!
Carriage returns are produced with the <br> tag (doesn't have to be closed) so whenever you want a new line use it.
isn't coloured text fun!
La Coppa Del Mondo Fifa
Hey La Francia!
On Sunday mio gatto Italiano is going to whup the hell
out of votre ugly-ass chien Français.
And then mio gatto is going to roll around on the ground writhing
in fake agony and votre chien is going to get all the blame.
That's why we call it The Beautiful Game.
Now for images:
Create a folder on your hard drive and name it 'library' or images or whatever.
Name it "library".
Download an image from here:
http://www.emotihost.com/ver1/pageindex.htm
Right click the image you want and save it to that folder.
to load your image onto your page, you use the 'img src' tag:
<img src="library/confidence.jpg"> (you don't need to close an image tag)
The "/" you see in web addresses represent folders, so if you have a jpg image called "luisvuiton.jpg" in a folder called "library" (which is a good practice..), that's why the tag reads: <img src="library/luisvuiton.jpg">
This file is stored 'locally'. "library/luisvuiton.jpg" is the pathname to the file.
On a web page, the image resides on a server so you would write the pathname so that the browser can find the image and load it. It's a 'remote' file.
for example: here is the link to cat eyes: http://www.digitalmediatree.com/library/image/179/cateyes.gif
to link to a remote file you have to enter the remote pathname: <img src="http://www.digitalmediatree.com/library/image/179/cateyes.gif">
The different image formats are good for different things. A good rule of thumb is this: jpgs for photos, pngs for graphics, and gifs for animation.
there are attributes we can add to this tag and they are important for our purposes.
<img src="library/creepyhug.gif" width="75" height="65" border="0" alt="don't touch me!">
This is where we get to have fun distorting images:
<img src="library/creepyhug.gif" width="700" height="650" border="2" alt="go away">
Here is a link to basic elements of HTML for your future reference: http://werbach.com/barebones/barebones.html#general
the marquee tag that will change your life and destroy art:
<marquee> image or text or object (youtube and swf's)</marquee>
It has attributes too: http://www.html-reference.com/MARQUEE.htm