This time we won’t make the canvas any different visually, it’s more just cleaning up the code. We’re making the circle into a dot object, then later it will be easier to keep track of it (and any others). interactive physics animations via javascript & canvas | 04.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
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();
While in the previous step (Generative Art 04 Using a target other than the mouse) in this generative actionscript art tutorial series it was cool to see everything move on it’s very own, it seemed a bit slow or fake, or maybe just plain uninteresting. Tinkering with the color, I thought if we set a minimum and maximum value for each red green and blur we could control the colors a bit more and still let them be generative. Plus I wanted the anchor to move a bit more and thus paint the curves and lines in a more interesting fashion. To do this we ramp up the range of the change rate of the anchor velocity. I really enjoy this example because it is faster, so we get more of those sweeping arcs, but also when the anchor slows down we get some very delicate curves and twists. With just a couple changes from the last example (which frankly seemed a bit chaotic), now I’m starting to see for the first time how to set some controls in the code which will lead to a visually appealing and still randomly generative result.
For some reason I find it gratifying that the final swf is still a mere 2kb and change. Perhaps all this current focus on HD and 3D gives us the sense that to be good it needs to have a large footprint. Sometimes the magic or value is in how much you can accomplish with less (less is more)
Please visit the blog article to view this interactive flash content. Flash plug-in required:
[/kml_flashembed]
actionscript source code
[cc lang=”actionscript”]
var ball:Sprite = new Sprite();
ball.graphics.beginFill(0x000000, .5);
ball.graphics.drawCircle(0, 0, 5);
ball.graphics.endFill();
addChild(ball);
var anchor:Sprite = new Sprite();
anchor.graphics.beginFill(0x333333, .5);
anchor.graphics.drawCircle(0, 0, 12);
anchor.graphics.endFill();
addChild(anchor);
var div:Number = .1;
var line_max_width:Number = 48;
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;
Thanks for keeping up with this random generative art series. I know I’m having a ball just playing with code one step at a time. To watch each iteration, I was getting tired of drawing with my mouse to see the generative art, and as others had pointed out, in order for it to truly be generative, it shouldn’t depend on me moving my mouse. So instead of using the mouse position as my target anchor, I created a new node named anchor. This anchor I’m animating with simple random brownian motion which I’ve blogged about before. It just meanders along the stage as it pleases and the other ball will “chase” it just like it chased your mouse in the previous examples. The part that gets exciting is that my anchor wraps from one side of the stage to the other, while the ball does not. One second it’s target is far right and the next it switches to far left, this makes for some really interesting paths and lines. Experiment with the velocity of the anchor in lines 47 + 48 to see interesting effects. One thing I’m beginning to notice however is the performance of the little app gets a bit slower the longer you let it run, perhaps I didn’t realize it before since I didn’t have the attention to keep moving my mouse and watching it follow, now that it truly is generative (and less interactive btw), I watch it longer (seems kind of backwards to what I’d expect).
Note: in this example I have the anchor ball visible, as well as the other ball, but for an actual production, I’d have them both hidden and the lines just appearing. I prefer it that way but though you’d better see what was actually happening with them visible, even though it kills some of the magic. It’s like watching a magic trick when you already know how it’s done.
var div:Number = .1;
var line_max_width:Number = 42;
var line_min_width:Number = 2;
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;
With this example we’re taking a look at having randomly changing color. I liked the limits to the color in the last post, but couldn’t help myself and wanted to see it with the full range of colors to command. Also, I wasn’t a huge fan when the color would “wrap” and jump from one color to the next so fast. I wanted to use the same velocity (rate of change) principle from the line width experiment but apply it to color, and have it meander aimlessly among all colors. I created a color object to store a value for each of the RGB color values, and then had each element of the color change independently. I didn’t want to complicate my loop function so I made a new function that is called from loop that steps along to a color which should be pretty close to the previous color. I enjoy the range, but as I expected it was a bit much, or too many colors at once, also the step is a bit too fast at times it seems.
var line_max_width:Number = 50;
var line_min_width:Number = 0;
var line_width:Number = Math.random() * line_max_width;
var line_width_velocity:Number = 0;
var dampen:Number = 0.95;
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.
I’ve been building websites for years and always enjoy the immediacy of designing and coding a site and having it live relatively quickly. Compare web production to the construction industry where projects span out years and even decades in some cases. Even though the web does foster a faster deliverable, there are many lessons from the physical world that help us better understand and manage web projects.
What is the point of a building? It’s a roof over your head, but more importantly it’s a location. People visit and expect it to be there next week. A website is a location as well in fact url even stands for Uniform Resource Locator and a domain name is your address. There are whole sciences about how to attract people to a certain location online and keep them coming back for more. For those with a brick-and-mortar business a website is a portal or even a drive-thru window to permit easy shopping access and a gallery to showcase your products. It allows your visitors to browse and interact with your products or content from their own home. A physical store that is confusing and messy won’t sell much, but clean it up and get some Feng Shui master in there and the same space can be transformed into a pleasant, functional and usable location. So from the tangible world we can learn that we want a location that is memorable, a layout that is intuitive and agreeable and a presence that is easy and pleasing to our visitors.
Building a website also follows the same process as building a house?
First a house takes planning and preparation. It’s best to make sure you understand what it is you want in your house, what materials will be used and how much it will cost. Long ago, construction crews figured out it cost way to much time and money to change projects on the fly and now require them to be nailed down even before groundbreaking. Web designers have not all learned this lesson yet and have been lenient with demanding a spec. Some clients think they can say “I want a website for x” and then expect the designers and developers to telepathically know all the elements of the site and build it correctly the first time. I’ve worked for so-called visionary gurus and they wanted a new website and didn’t take the time upfront to plan the site and subsequently I redesigned their website daily! Trust me, that kept the site from being functional or usable.
Building a house takes a construction crew, with a website it may be considerably less people, but it does help to have a few people each with their expertise. The main goal here is to make sure you’ve got someone who can handle each piece of the project. An architect will draw up the plans for your house after the requirements are discussed. So these blueprints or wireframes as we call them in web design contain the details needed for the project to be completed. They are written with all the policies and codes in mind so that in the end the structure can be valid, functional and above all- usable.
The website, like a house, sometimes isn’t even recognizable until the very final stages of the project. We don’t complain to the foreman that the walls aren’t the right color when the windows aren’t yet hung and the drywall mud is still wet. When constructing a house first the foundation is set and everyone knows that a weak foundations will ruin the whole project from the get go. Once the foundation is solid the framing begins, and although while the house is being framed there are holes in the house all will turn out fine in the end. Looking at a website before it’s actually complete when even possible can be a very scary thing: things don’t fully connect, layouts are screwy, links may be broken and graphics are totally wrong or missing, but all will turn out in the end as long as the construction crew know what they are doing and the client let’s them focus on doing it.
Once the house is up and walls are in and there’s a roof overhead is when things actually start to look right. Now is the time to be focused on the content of the site and putting everything in the right place. Get the walls the right colors and eventually even hanging pictures and accents in each room. Final tweaks to the place or feel of the place, but now is not the best time to start thinking – ‘What if we moved the kitchen to the basement!’ or ‘Oh, We forgot the elevator/fireplace!’. While these drastic changes are likely possible, they will have more of an after-thought and will be either very difficult or very expensive to correctly put into play, or both.
Once last thing to say in this endless analogy comparing a brick and mortar construction to a website project, what about when it’s “done”. When the house is done and the dust has settled and you’ve moved in. There are always things that still need doing: tweaks, fixes, customizations, just plain maintenance, appliances break and plumbing clogs. Not to scare anyone from the american dream, but it happens, even online. Plugins need updating, security holes are found, bugs come up, things need updated. It happens. The trick is to expect things to happen. For a house you can find any number of Home Warranties that protect you from the sudden costs of repairs. Most web design shops will have a similar maintenance plan that warrants a certain amount of work in a certain amount of time to account for such surprises.
And finally the big bad wolf test. Would your website survive a big bad wolf coming to blow your site down? Make sure that whoever is building your website knows enough to not build your house out of straw or sticks. They need to be up on current technologies and you need to be confident in their ability to give you a valid site that can withstand any visitors at your very own online location.
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.
