programming Archives - Page 7 of 7

Interactive Generative Art Series – 03 – Gradient Colors

Posted on February 4, 2011August 29, 2014 by Evan Mullins

With the full range of colors randomly available to me, I wanted to get a more fluid randomly created color. I see the hard line breaking one color from the next in the generative art 02 random color experiment. I wanted to have the lines drawn between my 2 points to be a gradient of two colors rather than solid color followed by solid color. In this attempt at a smoother color transition, I needed to better understand the gradientBoxMatrix and createGradientBox. I knew visually what I wanted to accomplish but had to brush up on the docs and then experiment a bit to get the math right. The hard line color change still shows in places, but it’s only when one line is short enough and then is overwritten by the beginning of the next line, so technically it’s doing what I intended, but visually it’s still not as gradual as I was wanting. I could toy a bit more with the rate of color change, but I feel pretty accomplished after having figured out that trigonometry and arc-tangent.

03 Gradient Color, play here

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”genart-3″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/02/gen-art-03-gradient-color.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

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(0x333333, 1);
ball.graphics.drawCircle(0, 0, 30);
ball.graphics.endFill();
addChild(ball);

var oldx:Number = ball.x;
var oldy:Number = ball.y;

var div:Number = .1;

var ax:Number = 0;
var ay:Number = 0;

var line_max_width:Number = 75;
var line_min_width:Number = 5;
var line_width:Number = randomRange(line_min_width, line_max_width);
var line_width_velocity:Number = 0;
var dampen:Number = 0.95;

var colors:Object = new Object();
colors.r = 0;
colors.g = 122;
colors.b = 255;
colors.rv = 0;
colors.gv = 0;
colors.bv = 0;
colors.min = 0;
colors.max = 155;
var color_first:Number = 0x000000;
var color_second:Number = rgb2hex(colors.r, colors.g, colors.b);
var gradientBoxMatrix:Matrix = new Matrix();

function loop () {
oldx = ball.x;
oldy = ball.y;

ball.x -= ax = (ax + (ball.x – mouseX) * div) * .9;
ball.y -= ay = (ay + (ball.y – mouseY) * div) * .9;

line_width_velocity += randomRangeAxis(3);
line_width += line_width_velocity;
line_width_velocity *= dampen;
if(line_width > line_max_width) { line_width = line_max_width; }
if (line_width < line_min_width) { line_width = line_min_width; }

color_first = color_second;
color_step();
color_second = rgb2hex(colors.r, colors.g, colors.b);

var dx:Number = ball.x – oldx;
var dy:Number = ball.y – oldy;
this.graphics.lineStyle(line_width);
gradientBoxMatrix.createGradientBox(Math.abs(dx), Math.abs(dy), Math.atan2(dy,dx), Math.min(oldx, ball.x), Math.min(oldy, ball.y));
this.graphics.lineGradientStyle(GradientType.LINEAR, [color_first, color_second], [1,1], [85, 170], gradientBoxMatrix);
this.graphics.lineTo(ball.x, ball.y);
}

setInterval(loop, 1000/30);

download

Here’s the gen-art-03-gradient-color.swf and gen-art-03-gradient-color.fla.

Resources

Interactive Generative Art Series – 02 – Random Color

Posted on February 1, 2011August 29, 2014 by Evan Mullins

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.

02 Color, play here

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/02/gen-art-02-color.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

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(0x333333, 1);
ball.graphics.drawCircle(0, 0, 30);
ball.graphics.endFill();
addChild(ball);

var div:Number = .1;

var ax:Number = 0;
var ay:Number = 0;

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;

var colors:Object = new Object();
colors.r = 0;
colors.g = 0;
colors.b = 255;
colors.rv = 0;
colors.gv = 0;
colors.bv = 0;

function loop () {
ball.x -= ax = (ax + (ball.x – mouseX) * div) * .9;
ball.y -= ay = (ay + (ball.y – mouseY) * div) * .9;

line_width_velocity += Math.random() * 6 – 3;
line_width += line_width_velocity;
line_width_velocity *= dampen;
if(line_width > line_max_width) { line_width = line_max_width; }
if (line_width < line_min_width) { line_width = line_min_width; }

color_step();

this.graphics.lineStyle(line_width, rgb2hex(colors.r, colors.g, colors.b), 1);
this.graphics.lineTo(ball.x, ball.y);
}

setInterval(loop, 1000/30);

Download

View the swf and get the fla here

Interactive Generative Art Series – 01 – Color

Posted on January 31, 2011August 29, 2014 by Evan Mullins

After updating the line width to be still random, but more of a gradual step in variation (in the first experiment in this series), the second most obvious edit to the original in this generative art series is the color of the line. While it would be pretty simple to update the code to use any one solid color in place of the black, I wanted the color to vary over time. The simplest way I know to achieve this is to create a variable to hold the color value (as a number) and then change it over time. So here, I have a color chosen at random and just increment it every time the loop function executes by 1024. I chose this amount because it would loop through and eventually get back to where it started while restricting the color scheme. I think it brings a lot to the design to have color – and I especially like how it randomly creates a color scheme and sticks to it. Totally random colors may look a bit much, while problematically it’s not too difficult to get, it may be difficult to look at once it’s created. Above are a few screen shots of the random colors generated:

01 Color, play here

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”gen-art-01″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/01/gen-art-01-color.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

Please visit the blog article to view this interactive flash content. Flash plug-in required:

[/kml_flashembed]

Source Code

[cc lang=”actionscript”]
var ball:Sprite = new Sprite();

ball.graphics.beginFill(0x333333, 1);
ball.graphics.drawCircle(0, 0, 30);
ball.graphics.endFill();
addChild(ball);

var div:Number = .1;

var ax:Number = 0;
var ay:Number = 0;

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;

var color:Number = Math.floor(Math.random() * 16777215);

function loop () {
ball.x -= ax = (ax + (ball.x – mouseX) * div) * .9;
ball.y -= ay = (ay + (ball.y – mouseY) * div) * .9;

setInterval(loop, 1000/30);
[/cc]
You’ll see if you’re following along that this only add 2 lines of code from the last version. We simply create and instantiate (with a random value) the color variable and then apply it in place of the black to the lineStyle and simultaneously increment it. Check the example swf here and get the fla here.

Interactive Generative Flash Art Series – 00 – Line Width

Posted on January 28, 2011August 29, 2014 by Evan Mullins

After seeing the source code in the original experiment, I found myself wanting to play with the code. I saw many elements of the lines and actions that could be interesting to explore. This is the first in a series, of experiments I’ll post starting from this code and pushing different things each time. They’ll start slow and simple, like this one. All I’m doing is adding a few lines of code. The first thing I wanted to see from the original was a more gradual step in the width of the line. Here are a few screenshots from this iteration:

Play here

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”gen-art-00″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/01/gen-art-00-line-width.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

Please visit the blog article to view this interactive flash content. Flash plug-in required:

[/kml_flashembed]

Source Code

[cc lang=”actionscript”]
var ball:Sprite = new Sprite();
ball.graphics.beginFill(0x333333, 1);
ball.graphics.drawCircle(0, 0, 30);
ball.graphics.endFill();
addChild(ball);

var div:Number = .1;
var ax:Number = 0;
var ay:Number = 0;

var line_max_width:Number = 30;
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;

function loop () {
ball.x -= ax = (ax + (ball.x – mouseX) * div) * .9;
ball.y -= ay = (ay + (ball.y – mouseY) * div) * .9;

line_width_velocity += Math.random() * 4 – 2;
line_width += line_width_velocity;
line_width_velocity *= dampen;
if(line_width > line_max_width) { line_width = line_max_width; }
if (line_width < line_min_width) { line_width = line_min_width; }
this.graphics.lineStyle(line_width, 0, 1);
this.graphics.lineTo(ball.x, ball.y);
}

setInterval(loop, 1000/30);
[/cc]

Method Explained

If you need a little walk through on my method to achieve this, all I did was create a variable to hold my line width, and the line width velocity (or rate of change). Every frame the line velocity grows or shrinks randomly and is applied to the line width variable. I apply a dampen to the velocity so it doesn’t get too out of hand and then set some limits to the line width. Pretty simple and it applies the same method of applying velocity to an object to make it move, but this velocity is being applied to a property of the object (width) that may not be as obvious as position. This still gives an effect of random width to the lines, but they are randomly widening and thinning, rather than just having random widths. It gives it a more fluid appearance. Any other ways you would use to achieve the same effect?

Download

Here’s the swf in action as well as the fla.

Interactive Generative Flash Art Series Intro

Posted on January 27, 2011August 29, 2014 by Evan Mullins

The world has been excited by html5/css3 recently and has been pushing limits and experimenting. It’s been exciting and funny at the same time – most of the things that are amazing people in html5 experiments have been done 5 years ago in flash. I’ve enjoyed it so much though because it has brought me back to what made me fall for flash initially: sites like levitated.net and yugop.com. People that wrote books about programming actionscript like Keith Peters, Jim Bumgardener Colin Moock, Robert Penner etc… and then art by people like Erik Natzke. I’m a geek and these guys are some of my heros (and don’t think that list is exhausted, I’ve got plenty of unmentioned flash heros), but not just because they could/can do what they do, but because they selflessly (open source-ly) taught me how to do some of it. The magic of creating something so engaging, responsive, animated, unique, random. Little experiments that feel like they contain so much life and are so lightweight -easily less than 10,240 bytes (read 10kb). I knew in high school trig and calculus that those formulas had power, but seeing it unfold and interact with it really is magical to me.

A little inspiration

So, I’ve been toying with a lot of the things that actually taught me (or at least pushed me to learn) the basics of programming. With the years experience under my belt now I’m understanding it on a totally different level and all I want to do is find more things to make balls and lines bounce, move and swirl. And I also want to share it. Well, I recently stumbled upon a flash sneak peak video by Erik Natzke about some of his technique and then his open source files and really had some fun. Anyways I wanted to share some of the experiments that came from it. Let me know your thoughts and download the code and play with it. Let me know what else you come up with and share what you learn. I’ll start this series with a post of the original experiment from Erik on his blog here, Flash Code 101.

Natzke’s Flash Code 101

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”alt-ball-natzke” movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/01/ball-natzke.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

Please visit the blog article to view this interactive flash content. Flash plug-in required:

[/kml_flashembed]

If it looks like greek to you, I’d suggest going to Keith Peter’s tutorials (especially the first few on gravity, easing and elasticity).

Actionscript 3

For something so fun, it’s amazing that it’s barely over a dozen lines of code.
[cc lang=”actionscript”]
var Ball:Sprite = new Sprite();
Ball.graphics.beginFill(0x333333, 1);
Ball.graphics.drawCircle(0, 0, 30);
Ball.graphics.endFill();
addChild(Ball);

var div:Number = .1;
var ax:Number = 0;
var ay:Number = 0;

function loop () {
Ball.x -= ax = (ax + (Ball.x – mouseX) * div) * .9;
Ball.y -= ay = (ay + (Ball.y – mouseY) * div) * .9;
this.graphics.lineStyle(Math.random()*10, 0, 1);
this.graphics.lineTo(Ball.x, Ball.y);
}

setInterval(loop, 1000/30);
[/cc]

Here’s the swf in action, or download the fla to play (if you really would rather download a file than copy 15 lines of code).

Resolution

Well, I’ll be playing with this code and others and posting the experiments with some screenshots of what I create get’s created.

Get file path easier on a mac with applescript | Copy Path script droplet

Posted on October 7, 2010August 29, 2014 by Evan Mullins

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.

Thanks to this great forum post I was able to find what I needed!

I created a droplet with applescript to copy a files path to my clipboard (code below) and then put it into my dock for easy access! Create your own “Copy Path” droplet with this code or download mine here

[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.