theNewAesthetic.js uses the HTML5 canvas element, so you'll need a modern browser (fux IE), there's a tad bit of server side activities, so (where noted) it's best to run a local server for development ( i.e. MAMP or WAMP )
At its best, this could be a useful movement. At its worst, another meme.questions? thoughts? contact: nickbriz[at]gmail[dot]com
- Aimée Knight
[NA] exists wherever there is satellite surveillance, locative mapping, smartphone photos, wifi coverage and Photoshop. - Bruce Sterlingwe'll start with two methods for creating backdrops for your NA compositions, .bg() and .googleMaps()
the .bg() method doesn't require any parameters. By default this will render a 'Photoshop' transparency layer (i.e. grey/white grid). You can change the color of the PSD transparency gird by specifying a hex-color value (i.e. "#ff0000" = red) as a string. You can also send the string "rainbow" to get a rainbow PSD transparency grid
you can also create 'satellite surveillance' backdrops using the .googleMaps() method. To use this method you must first set the .apiKey property to your own Google Maps (V3) API Key. The .googleMaps() method requires three parameters
NA.apiKey = "yourGoogleAPIkey"; NA.googleMaps("roadmap",38.88968,-77.009096); //"type", latitude, longitude
you can use the following types = "roadmap", "satellite", "hybrid" and "terrain". Optional arguments include zoom level (integer), X and Y positions (integers) as well as width and height of the map (% in integers)
NA.apiKey = "yourGoogleAPIkey"; NA.googleMaps("satellite",38.88968,-77.009096,18, 100, 100, 50, 50); //"type", latitude, longitude, zoom, X, Y, Width, Height
another method which goes great with .bg() is the .drawAnts() method for drawing PSD selection ants. There are two ways to draw selection ant lines, the first is by sending parameters that specify the starting X and Y coordinates and the finishing X and Y coordinates (integers)
NA.drawAnts(50,250,250,250); NA.drawAnts(250,250,150,50); NA.drawAnts(150,50,50,250); NA.drawAnts(100,150,200,150); //startX, startY, finishX, finishY
the second way is to set starting X and Y coordinates followed by null,null and then specifying the length of the line and the angle (integers)
NA.drawAnts(50,50,null,null,300,30); //startX, startY, null, null, length, angle
Appropriating + remixing graphic markers/standards from marginalised or "other-fied" disciplines/decades does not a new genre/paradigm make, especially when begging to be [or deliberately engineered to be] monetised by a system and/or individuals determined to emergent-capture [yes, this includes institutionally sanctioned galleries + alternative galleries + oldschool curators + newskool aggregators + conference-merry-go-rounders + theorists + panels + karma-seeking discourse boffins]. Codify, hipsterise + aggrandise at your leisure, but be prepared for watered-down, digestible, bastardised versions of worthwhile social + expressive currencies. - Mez Breezethe library includes a method for rendering some of the more popular interface elements/icons often appropriated in NA worx, as well as a couple special icon methods. The basic method is .icons() which requires you to specify a "type"
at the moment these include, "file"(Xerox Star File c1981), "spaceInvader" (by Tomohiro Nishikado c1978), "watch" (Apple, by Susan Kare c1980s), "fillBucket" (Apple, by Susan Kare c1980s), "arrow" (universal cursor arrow) and "pointer" (universal cursor pointer).
optional parameters include X and Y position (integer), pixel size (integer) and the color (hex-color value string).
NA.icons('file',20,20,4,"#ff0000"); NA.icons('spaceInvader',100,20,4); NA.icons('watch',160,20,4,"#00ff00"); NA.icons('fillBucket',220,20,4); NA.icons('arrow',300,20,4,"#0000ff"); NA.icons('pointer',360,20,4); //"type", X, Y, size, "color"
when rendering the "fillBucket" you can add an additional paramater at the end to change the color of the paint individually. This is also a hex-color value string.
one special icon method is .hourglass(), this is an animated icon which does not require any parameters by default
the basic .icons() method, the optional parameters include X and Y positions (integers), pixel size (integer) and color (hex-color value string) which can also be "rainbow"
NA.hourglass(100,50,8,"#000"); //X, Y, size, "color"
go social with .fb() icon
James Bridle is a Walter Benjamin critic in an "age of digital accumulation". Bridle carries out a valiant cut-and-paste campaign that looks sorta like traditional criticism, but is actually blogging and tumblring. His New Aesthetic Tumblr bears the resemblance to thoughtful critique that mass production once did to handmade artifacts. - Bruce Sterling
like the .hourglass() method there are no required parameters, the .fb() method renders a facebook 'like' thumbs-up icon which can be clicked. When clicked, the user is taken to a facebook share page which will allow them to post your NA composition to their wall. Optional parameters include X and Y positions (integers), pixel size (integer), and up three different color parameters (hex-color value string) outline color, sleeve color and hand color.
NA.fb(100,20,16); //X, Y, size
//with shares.php script NA.fb(100,20,4);
The tools we make shape culture. The culture of technology is a human culture and a human experience. Reconciling with our inventions, we embrace the stylized pixel-goo as a reflection of ourselves. - Jonathan Minardall of the image 'filter' methods use the HTML5 getImageData() method which requires that the image be hosted on a web server, and that the code accessing the image data is hosted on the same domain as the image. You can use something like MAMP or WAMP to develop locally.
the .pixelizeImg() method takes one required parameter, the source image path (string)
optional parameters include X and Y positions (integers) and pixelization size (integer) which by default is 8
NA.pixelizeImg("cat.jpeg",100,0,12); //"image", X, Y, pixel-size
at the moment there is no animated gif support in canvas. To get around this issue there is a special method .pixelizeGif() which takes a sprite sheet and (in essence) renders these as animated gifs. This method takes one more required argument, the number of frames in the sprite sheet image (integer)
this method also includes an additional parameter for setting the speed of the animated loop in milliseconds (integer)
NA.pixelizeGif('mario.png',5,10,10,12,100); //"image", #frames, X, Y, size, speed
Yes, digital glitch is as much of a cultural artifact as the graininess of film or the bad colors of Polaroids. - Marius Watzlike the .pixelizeImg() method .glitchImg() also makes use of the HTML5 getImageData() method and thus requires that the composition be hosted on a server (see MAMP or WAMP for local development)
the .glitchImg() method takes one required parameter, the source image path (string)
optional parameters include X and Y positions (integers), glitch amount applied to horizontal data (integer) glitch amount applied to vertical data (integer)
NA.glitchImg("cat.jpeg",0,0,125,135); //"image", X, Y, glitchX, glitchY
A glitch isn't inherently "New Aesthetic," but it certainly becomes that when appropriated. Just like the voxel sculptures, glitch revels in the visual result of a functional system purely for its aesthetic merit. - Kyle McDonaldjust as with .pixelizeGif() in order to get around canvas' lack of support for animated gifs, the .glitchGif() method takes a sprite sheet as an image source and animates it. This requires an additional parameter to specify the amount of frames in the sprite sheet (integer)
optional parameters are the same as the .glitchImg() method with an additional parameter for setting the speed of the animated loop in milliseconds (integer)
NA.glitchGif("mario.png",5,10,10,109,171,100); //"image", #frames, X, Y, glitchX, glitchY, speed
The "New Aesthetic" is a native product of modern network culture. It's from London, but it was born digital, on the Internet. The New Aesthetic is a "theory object" and a "shareable concept." - Bruce Sterlingyou can't have contemporary art without didactic info, naturally the library includes a "theory object" which can take as its parameter either an artist statement (string) accompanying theoretical text (string) and/or curatorial statement (string)
as the notion of a "theory object" is relatively 'meta' this method functions accordingly, the statement does not appear in the actual composition. It is only visible in the developer console.
an additional method is available for console use .whereMyMouseAt(). Because so many of the methods take X and Y coordinates as position values you can use this method to display the current position of your mouse on the composition in your developer console by simply including the following method in your composition
Below are the sample compositions described in the video. Click on the links to view the compositions. Click on 'view src' in the compositions to see the source code.
view pixelated file example
view waiting on congress example
view alien invasion example