A great writeup from Jake Archibald about the downfalls and downfalls to Application Cache. Having just attempted to building a mobile site using application cache, I remember hitting almost all of these gotchas and realizing that Application Cache wasn't all it made itself to seem. I resorted to actually making a mobile app rather than deal with the manifest file and it's counter-intuitive caching. This article would have helped immensely and I can't tell you how entertaining it is to read anything by Jake.
Embedded Link
A List Apart: Articles: Application Cache is a Douchebag
Good morning! Over in “castle Lanyrd” we recently launched our mobile site, which caches data on events you're attending for viewing offline. I've boiled the offline bits down to a simple demo…
Microsoft has a new line of TouchMouse. They have a campaign to cooinside with it called the Art of Touch and have invited a few artists to participate and more to drive interest with free shwag! Basically that boils down to me having a [amazon_link id=”B004HYGU18″ target=”_blank” ]Microsoft Touch Mouse[/amazon_link] to give away! So go play with the app and link a comment to your art. I’ll randomly select someone for the award as a christmas present! Be sure to comment with an email address you’ll reply to.
I played with the drawing app, and while it’s not totally generative, it does add a sense of randomness to it. It’s fun in that it tried to incorporate a few different styles of artists, including one of my favorites, ErikNatzke. Here’s what Erik had to say:
Along with the custom brush that I designed for them, there are an assortment of brush styles they’ve designed to help hone in on your artistic flair that you can share, print & even compete to win some prizes. The link below will allow you to vote on the one I just made. I’m curious what other people will make.
And here’s what I came up with in a couple minutes:
Comment below with a link to your art to be entered to win a new [amazon_link id=”B004HYGU18″ target=”_blank” ]Microsoft Touch Mouse[/amazon_link] this Christmas.
I think a portfolio is something that should be very interactive and intuitive. Check out what that has led to: circlecube’s interactive pog portfolio. I’ve been toying with trying to get something that was fun to look at, but also showed some work. Here is a first look at my Interactive portfolio of work which includes physics simulations and many options to play with the presentation of the body of work. Showing it to a friend he said it made him think of pogs (since the thumbnails are round and moving everywhere).
Well, if you’re interested, this is the same portfolio that is listed statically on my website. That’s because I’m using amfphp to read my wordpress database and get the custom post type of portfolio and access all the tags, images and details of each portfolio item. I’m using TweenNano from greensock for some of the motion but all the physics is coded in as3. I’m using the slider and switch from Nick Jonas.
Enjoy playing with the settings!
Now I’m thinking of other ways to implement it: specifically hooking into API services like last.fm, dribbble or twitter. Or rebuild it with jQuery and html5!
Well, so much for blogging each step in my process of creating this generative art series. I took a few steps in this iteration since the last one. But it was all in the spirit of one step. First I wanted to abstract the duplication of each ball/line so that it didn’t require copying blocks of code for each one. The obvious route is to have a var that designates the number of balls which will draw lines, and then loop through creating the desired number and then in the loop function that is executed each frame loop through them again and draw new lines for each one. This was pretty simple, in the end, and I ended up adding quite a few variables to differentiate each line for the others in line width, color variation and position. I also added a few function to help with calculations and updated the alpha values of the lines. The normalize, interpolate and map functions I acquired long ago from kp here, go there to hear his explanation which is much better than any attempt I could make. Thanks Keith!
Then, I had the task of making it more manageable and scalable. Before these edits, the framerate would sink to around 6 in the first 10 seconds of running with more than 3 lines. After some research it seemed the performance suffered mainly because the graphics drawn with transparency had to figure every single line on the stage to determine it’s color values and flash doesn’t do that too efficiently. So the solution was to use the bitmap and bitmapdata objects. Every frame I copy what has been drawn on the stage into a bitmapdata objects and set it to display on the stage instead. This essentially lets flash calculate the alpha values for each line once and then copy it as simple pixel data for later frames. It happens every frame and is in the flush function. It worked better than I had hoped. I could ramp up the number of lines to 40 and still not see any frame rate slowdown in FPS.
Please visit the blog article to view this interactive flash content. Flash plug-in required:
[/kml_flashembed]
actionscript source code
[cc lang=”actionscript”]
var balls:Array = new Array(); // array of ball objects – each ball object stores it’s own position (current & previous), acceleration, etc
var num_balls:int = 0;
var total_balls:int = 12;
var canvas:Sprite = new Sprite();
this.addChild(canvas);
//copy the graphics on stage to a bitmap, then next frame draw on it.
var bitmapcanvasdata:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x000000);
//draw stage to bitmap
bitmapcanvasdata.draw(canvas);
var bitmapcanvas:Bitmap = new Bitmap(bitmapcanvasdata);
//put bitmap on stage
this.addChild(bitmapcanvas);
function createBall():void{
var ball_o:Object = new Object();
var ball:Sprite = new Sprite();
ball.graphics.beginFill(0x000000, .5);
ball.graphics.drawCircle(0, 0, 3);
ball.graphics.endFill();
addChild(ball);
ball_o.ball = ball;
for (var i:int = 0; i < total_balls; i++){
createBall();
}var anchor:Sprite = new Sprite();anchor.graphics.beginFill(0x333333, .6);
anchor.graphics.drawCircle(0, 0, 12);
anchor.graphics.endFill();
addChild(anchor);var div:Number = .1;
var line_max_width:Number = 64;
var line_min_width:Number = 1;
var line_width:Number = randomRange(line_min_width, line_max_width);
var line_width_velocity:Number = 0;
var dampen:Number = 0.95;var anchorvx:Number = 0;
var anchorvy:Number = 0;anchor.x = stage.stageWidth/2;
anchor.y = stage.stageHeight/2;var colors:Object = new Object();
colors.r = 150;
colors.g = 100;
colors.b = 200;
colors.rv = 0;
colors.gv = 0;
colors.bv = 0;
colors.rd = 100;
colors.gd = 150;
colors.bd = 200;
colors.rmin = randomRange(0, 30); //0
colors.rmax = randomRange(colors.rmin, colors.rmin + colors.rd); //100
colors.gmin = randomRange(0, 60); //100
colors.gmax = randomRange(colors.gmin, colors.gmin + colors.gd); //200
colors.bmin = randomRange(0, 50); //150
colors.bmax = randomRange(colors.bmin, colors.bmin + colors.bd); //250
colors.rate_of_change = 10;
var color_first:Number = 0xFFFFFF;
var color_second:Number = rgb2hex(colors.r, colors.g, colors.b);function loop (e:Event = null) {
//anchor
anchorvx += randomRangeAxis(10);
anchorvy += randomRangeAxis(10);
anchor.x += anchorvx;
anchor.y += anchorvy;
anchorvx *= dampen;
anchorvy *= dampen;
if(anchor.x > stage.stageWidth) anchor.x = 0 – anchor.width;
else if(anchor.x < 0 - anchor.width) anchor.x = stage.stageWidth;
if(anchor.y > stage.stageHeight) anchor.y = 0 – anchor.height;
else if(anchor.y < 0 - anchor.height) anchor.y = stage.stageHeight;
//linewidth
line_width_velocity += randomRangeAxis(1);
line_width += line_width_velocity;
line_width_velocity *= dampen;
if(line_width > line_max_width) {
line_width = line_max_width;
line_width_velocity = 0;
}
else if (line_width < line_min_width) {
line_width = line_min_width;
line_width_velocity = 0;
}
//color step
color_step();
color_first = color_second;
color_second = rgb2hex(colors.r, colors.g, colors.b);
//loop through balls and draw lines
for (var i:int = 0; i < total_balls; i++){
balls[i].oldx = balls[i].ball.x;
balls[i].oldy = balls[i].ball.y;
balls[i].ball.x -= balls[i].ax = (balls[i].ax + (balls[i].ball.x - (anchor.x + randomRangeAxis(line_width * balls[i].drift))) * div) * .9;
balls[i].ball.y -= balls[i].ay = (balls[i].ay + (balls[i].ball.y - (anchor.y + randomRangeAxis(line_width * balls[i].drift))) * div) * .9;
balls[i].dx = balls[i].x - balls[i].oldx;
balls[i].dy = balls[i].y - balls[i].oldy;
canvas.graphics.moveTo(balls[i].oldx, balls[i].oldy);
canvas.graphics.lineStyle(randomRangeAxis(balls[i].line_width_drift,line_width), color_first, 1, true, LineScaleMode.NONE, CapsStyle.NONE);
balls[i].gradientBoxMatrix.createGradientBox(Math.abs(balls[i].dx), Math.abs(balls[i].dy), Math.atan2(balls[i].dy,balls[i].dx), Math.min(balls[i].oldx, balls[i].ball.x), Math.min(balls[i].oldy, balls[i].ball.y));
canvas.graphics.lineGradientStyle(GradientType.LINEAR, [color_first + balls[i].color_drift, color_second + balls[i].color_drift], [map(line_width,line_max_width,line_min_width, .1, .9),map(line_width,line_max_width,line_min_width, .1, .9)], [0, 255], balls[i].gradientBoxMatrix);
canvas.graphics.lineTo(balls[i].ball.x, balls[i].ball.y);
}
//copy graphics drawings to bitmapdata and clear graphics
flush();
}
function flush():void {
//draw stage to bitmap
bitmapcanvasdata.draw(canvas);
//replace bitmapdata of bitmap
bitmapcanvas.bitmapData = bitmapcanvasdata;
//erase vectors on stage
canvas.graphics.clear();
}this.addEventListener(Event.ENTER_FRAME, loop)function rgb2hex(r:Number, g:Number, b:Number):Number {
return(r<<16 | g<<8 | b);
}
function color_step(){
colors.rv += randomRangeAxis(colors.rate_of_change);
colors.r += colors.rv;
colors.rv *= dampen;
if (colors.r > colors.rmax) {
colors.r = colors.rmax;
} else if (colors.r < colors.rmin){
colors.r = colors.rmin;
}
colors.gv += randomRangeAxis(colors.rate_of_change);
colors.g += colors.gv;
colors.gv *= dampen;
if (colors.g > colors.gmax) {
colors.g = colors.gmax;
} else if (colors.g < colors.gmin){
colors.g = colors.gmin;
}
colors.bv += randomRangeAxis(colors.rate_of_change);
colors.b += colors.bv;
colors.bv *= dampen;
if (colors.b > colors.bmax) {
colors.b = colors.bmax;
} else if (colors.b < colors.bmin){
colors.b = colors.bmin;
}
}
//random number between min and max
function randomRange(max:Number, min:Number = 0):Number {
return Math.random() * (max - min) + min;
}
//random number range centered at 0 with the specified max, randomRange(-max, max)
function randomRangeAxis(max:Number, axis:Number = 0):Number {
return Math.random() * (max * 2) - max + axis;
}
//normalize(value, min, max) takes a value within a given range and converts it to a number between 0 and 1 (actually it can be outside that range if the original value is outside its range).
function normalize(value:Number, minimum:Number, maximum:Number):Number {
return (value - minimum) / (maximum - minimum);
}
//interpolate(min, max, value) is linear interpolation. It takes a normalized value and a range and returns the actual value for the interpolated value in that range.
function interpolate(normValue:Number, minimum:Number, maximum:Number):Number {
return minimum + (maximum - minimum) * normValue;
}
//map(value, min1, max1, min2, max2) takes a value in a given range (min1, max1) and finds the corresonding value in the next range(min2, max2).
function map(value:Number, min1:Number, max1:Number, min2:Number, max2:Number):Number {
return interpolate( normalize(value, min1, max1), min2, max2);
}
[/cc]
download
Here’s the gen-art-08-multiple-lines-scalable.swf as well as the gen-art-08-multiple-lines-scalable.fla to download and explore. And as always if you’ve got ideas or suggestions, comment below. One thing I’m struggling with is that now although the experiment is truly generative, it’s no longer interactive.
To make it more interesting and give more depth and texture to the display, I wanted to have more lines than one, so I’m now going with two for starters. Eventually I’d like to get up to a dozen or maybe even have them randomly self populate and die over time. Adding one more isn’t a whole lot of code, but it did require a bit of rearranging. I created a sprite container for each line, and then basically doubled any var used by one line for the other. When calculating the position for the second line I added a bit of randomness, so it wouldn’t be drawn in the exact same position of the first line. Plus, when drawing the second line I adjust the alpha/transparency a bit and the line width. A big issues that I notice right away is that the memory noticeably begins to suffer after a bit of drawing. After some investigation I determined it is (at least in part) the fact that the lines now have to blend with the lines below them with transparency. If I set the alpha properties in the lineGradientStyle to 1 and 1 the performance is much better. Any ideas of how to fix this? I’m guessing I should start investigating bitmap data.
var div:Number = .1;
var line_max_width:Number = 64;
var line_min_width:Number = 1;
var line_width:Number = randomRange(line_min_width, line_max_width);
var line_width_velocity:Number = 0;
var dampen:Number = 0.95;
var ballax:Number = 0;
var ballay:Number = 0;
var oldx:Number = ball.x;
var oldy:Number = ball.y;
var ball2ax:Number = 0;
var ball2ay:Number = 0;
var old2x:Number = ball2.x;
var old2y:Number = ball2.y;
var anchorvx:Number = 0;
var anchorvy:Number = 0;
anchor.x = stage.stageWidth/2;
anchor.y = stage.stageHeight/2;
ball2.x = randomRangeAxis(10);
var gradientBoxMatrix:Matrix = new Matrix();
An issue I’ve had with managing multiple files and versions of files and different servers and emailing files around to different people throughout a process… you get the idea.
I looked for a way to get the path to a file like a url online. that would be easy for anyone to navigate to, while not having to type it manually. I know it’s a small thing, but these small things add up…
So first I was surprised that mac os x doesn’t do this out of the box. I’m pretty sure it was easy enough to do in windows. Although when you control-click and “Get Info” the location of that file is displayed in the window, you can’t select it. So if you really want to type it this is your solution. I found it really annoying that you couldn’t select the text and copy it.
Then I read somewhere that you could open a terminal window and drop a file into it, then the path to the file would be printed in the terminal. Awesome, but not very useful for me, it is rare that I have a terminal window open and the process is a bit lengthy since my main drive for this is to save time (and typos) from having to type the path myself of take a screen shot of the path in either the finder or the get info window. I thought about venturing into apple script, a realm I’ve heard a bit about but never ventured alone.
After some initial tuts and intros to applescript it seems like a very feasible task. I want to either set up a shortcut so I can select the file and hit a couple keys and have the path copied to my clipboard or have a droplet in my dock to drop a file into which will copy the file’s path to my clipboard and then I can easily paste the file path into an email in a matter of seconds and trust that they will be able to navigate to the correct file.
[cc lang=”applescript”]
(*
I use this script to show people where to find files on our LAN.
Just drop a few files/folders onto this droplet and their pathes will be copied and put on the clipboard.
–CBT
*)
on open these_items
set myItems to itemSort(these_items) — v1.0.5 ASCIIsort failed on older versions of applescript. — CBT; 10/5/99
set path_str to “” as string
repeat with i from 1 to the count of myItems
set this_item to item i of myItems
set posix_path to POSIX path of this_item
— For now I’m stripping the preceding ‘/Volumes’ string for external
— drives so I don’t clutter my build logs.
set shortened_path to do shell script ”
echo \”” & posix_path & “\” | sed ‘s|/Volumes||’
”
set path_str to path_str & shortened_path & return
–set path_str to path_str & posix_path & return
end repeat
— Copy plain text to the clipboard.
set the clipboard to «class ktxt» of ((the path_str as text) as record)
end open
on itemSort(my_list)
set the index_list to {}
set the sorted_list to {}
repeat (the number of items in my_list) times
set the low_item to “”
repeat with i from 1 to (number of items in my_list)
if i is not in the index_list then
set this_item to item i of my_list
if the low_item as text is “” then
set the low_item to this_item
set the low_item_index to i
else if this_item as text comes before the low_item as text then
set the low_item to this_item
set the low_item_index to i
end if
end if
end repeat
set the end of sorted_list to the low_item
set the end of the index_list to the low_item_index
end repeat
return the sorted_list
end itemSort
[/cc]
Also I was able to use automator to create a context menu item – although I prefer the droplet since I don’t have to fool with the accuracy required to navigate through nested context menu items. I’m still yet to create a shortcut that will make it the fastest, but this is a big step in the right direction. It’s one thing I love about computers, and I guess life in general, where there’s a will there’s usually a way (especially when forums are involved). Figured I’d post this for posterity and in case any of you are wishing your mac could do this too.
People are amazed at how well Apple is doing, they are doing better now than Microsoft! I think Apple understands the power of design and this has helped get them where they are now. Apple hardware/software (since they are almost the same thing) focus very heavily on appearance and design.
Apple understands that laptops and phones are the new watches and jewelry. We are using them majority of our waking life. They define us to the people around us. They need to be both functional and beautiful. Apple products have plenty of hardware and software issues, but people are willing to forgive them since the products are so nice to look at.
He also points to the design by Andrew Kim that I love. I hope other companies get into their heads the fact that design really IS that important!
Also I was able to use automator to create a context menu item – although I prefer the droplet since I don’t have to fool with the accuracy required to navigate through nested context menu items. I’m still yet to create a shortcut that will make it the fastest, but this is a big step in the right direction. It’s one thing I love about computers, and I guess life in general, where there’s a will there’s usually a way (especially when forums are involved). Figured I’d post this for posterity and in case any of you are wishing your mac could do this too.
