interactive development & discussion
This post on creativejs picks apart how this doodlue was made. Nice they they are able to support HTML5 audio even if it is only supported on chrome and the rest fall back to – you guessed it – flash.
Embedded Link
Google Moog synth tear-down
Yesterday we featured Google's web-based analogue synth Moog tribute when we found it on the Japanese site several hours before it hit t
Here are my notes on the presentation from Lee Brimelow of Adobe at the Atlanta Adobe Users Group Meeting: http://www.meetup.com/Adobe-User-Group-of-Atlanta/events/56200162/
What is flash for? Doing things the browser can’t! If you can use HTML5 then do it. Learn about it and learn the capabilities and know when to use what tool and when they are appropriate. It might not be easy, but it is where the industry is moving, don’t hide from it! If you want to do things that are to advanced for the current standards and browsers, then flash is most likely where you need to be. Adobe will always position Flash to be ahead of what is possible with browsers.
While you can do some gaming in browsers today, flash is now positioned to be the best solution for game development. It even can compile to native apps for ios and many successful apps have done so. Adobe has put in a site to showcase these games at: http://gaming.adobe.com
Adobe has a new partnership with unity. See example game: Angry bots.
Console sales are declining. We have so many other outlets to game: browsers, social, mobile devices… Soon professional games will be via Facebook and browsers.
Facebook angry birds game built in flash using stage 3D.
New gaming features:
Mouse lock.
Right and middle click events.
Concurrency, multi threading for player. Yo will not lock up with intense calculations.
Native extension Burls and extensions.
CS6:
Sprite sheet exporter!
Create js exporter, via Grant Skinner
Html 5 export to canvas a vector art.
Edge
11.3 – latest flash player
full screen keyboard input.
Background auto updates.
Audio streaming via net stream.
Improvements for low latency audio.
Stage 3D progressive texture streaming.
Lzma compression sort door byte array.
Native bitmap encoding to png and jpg.
Bitmap data draw with quality
Frame labels.
Air specific
USB debugging for ios
Native ios simulator support
Enhanced background support for ios
Android 4 stylus support
Mac app store support
Dolores, upcoming updates
As workers
Advanced profiling
Better sort for hardware accelerated video cards
Next
Refactorizing code base
Work on as virtual machine
Many action script language updates: stringent static typing as default, hardware oriented numeric types, type inference…
Here are my notes on the presentation from Mike Chambers of Adobe at the Atlanta Adobe Users Group Meeting: http://www.meetup.com/Adobe-User-Group-of-Atlanta/events/56200162/
Honestly, the announcement from Nov was handled horribly, it was a mess. Adobe has learned a lot and there have been many changes since then to keep this from happening again. They are really pushing transparency and have begun publishing white papers that explain the flash roadmap and explain plans and commitments.
These white papers put out by Adobe is definitive resource for flash. http://www.adobe.com/go/flashplatform_whitepapers
Flash runtimes is one shared core player. Flash player and adobe air both share same core.
Flash has filled many niches: animation, video, applications, games, rich media, art (Flash as an expressive medium).
While none of these functions are going anywhere, HTML5 is bringing a lot of this capability to browsers natively.
Adobe will now focus on advanced video and gaming in Flash as they are the areas that aren’t possible in web standards.
Introducing Premium features – set of features in API available for licensing. Only example for now is Stage3D used in conjunction with domainMemory API.
“I’m doing this for the love of flash, everyone else is doing it for the money” – Mike Chambers
The funding for the flash player is contradictory since more tools to publish to flash player have come out, it draws resources and funding away from flash player. This revenue sharing model allows for the player to remain funded in the current flash ecosystem.
Linux: Ppapi = pepper codename for browser plugin API which will let the player do it’s thing rather than worry about browser and OS. Working with google chrome on Linux already.
Windows 8: working closely with Microsoft to have support for flash player and air on Windows 8.
All updates will be added to the white paper (link above) along with the 2 year roadmap.
Thanks for visiting ATL and working on making this well understood and making Flash even better. I’m Always a fan of using flash when it’s the right tool for the job.
Here we’re going to get more into the interactive programming on these dots. We started with one dot that was draggable. This update applies a drag/drop code to each dot object with some logic to keep track of which dot is being dragged. This is quite a bit different than accomplishing the same thing in flash. Flash lets us have visual objects, but here in javascript we have all these objects and they are drawn on the stage/canvas every “frame”. The elements once drawn really don’t have any properties. So we’re attaching mousedown, mouseup and mousemove events to the canvas. In flash we would be applying a click event to the objects themselves. On mousedown we check coordinates to see if we’ve clicked on any of the dots. We also need a variable to store which one is being clicked or dragged at the moment, and this is pretty easy since we set up earlier to have an array holding all our dots, we’ll just use the index of that dot. With mousemove we drag the dot that’s been clicked using that index value, and then mouseup we drop it. interactive physics animations via javascript & canvas | 06.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var this_dot = {};
for (var i=0; i < 5; i++){
var this_dot = {
x: Math.random()*canvas.width,
y: Math.random()*canvas.height,
width:canvas.width,
height: canvas.height,
radius:25};
dots.push(this_dot);
}
draw();
$("#canvas").mousedown(function (event) {
var dx, dy, dist;
for (var i=0; i < dots.length; i++){
dx = event.pageX - this.offsetLeft - dots[i].x;
dy = event.pageY - this.offsetTop - dots[i].y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) {
drag = true;
drag_i = i
clickX = dx;
clickY = dy;
continue;
}
}
});
$("#canvas").mouseup(function (event) {
drag = false;
drag_i = -1;
});
$("#canvas").mousemove(function (event) {
if(drag) {
dots[drag_i].x = event.pageX - this.offsetLeft - clickX;
dots[drag_i].y = event.pageY - this.offsetTop - clickY;
draw();
}
});
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i < dots.length; i++){
context.beginPath();
context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);
context.fill();
context.closePath();
}
}
});
[/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.
Flash is always the bleeding edge and can move/adapt much faster than html because it is controlled by one entity. Which is some people’s criticism – they don’t want to rely too much on Adobe, I partly agree, but I’d much rather rely on Adobe than many other tech companies: especially Microsoft, Apple or even Facebook…
I haven’t tried it, but it’s promising that this is now possibly, even it it’s a very long process. Creating an app for the iTunes store should be possible from your OS of choice. I’m glad this is at least doable but not surprised that apple has made it next to impossible to create iOS apps other that their one way. Thanks for the write-up, Emanuele!
I’ve neglected this site lately, 6 months to be exact. Combine busy times, new jobs, summer trips skipping the country and websites are sometimes the first to be neglected.
But, I’m planning on being back. I want to shift towards sharing more links and quick tips, partly because reading the internet had become more of a 140 characters ADHD process. I’ll be writing less tutorials in the sense that I’ve been writing, but I’m planning on having much more content, just less demanding on my time. I don’t have time to write a book and no one wants to read it anyways (myself included). We just want to see cool new things and tips and quick solutions to issues. So, I’m going to be sharing a lot more links pointing to cool things and tricks. I’ve shifted from flash animation it seems to more jQuery and CMS programming and less flash. But I don’t mind too much, although I still enjoy flash immensely, many of the same things we once had to rely on plugins to achieve, we can now do with javascript. It’s really the same end result just using different technologies. So expect some snippets and quick examples rather than complete walkthroughs. I’ll focus on all things interactive (as usual) but will include a broader range of things.
On another note, I’ve started a new job (again). I’m now at The Jones Group, downtown Atlanta. The advertising industry wasn’t for me, and I’m happy to be Interactive Director at the Jones Group working on making some really cool & interactive websites! You can bet, I’ll be sharing details of them as they launch (I’ve actually got a backlog waiting already).
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.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”genart8a” movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/03/gen-art-08-multiple-lines-scalable.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
Please visit the blog article to view this interactive flash content. Flash plug-in required: 
[/kml_flashembed]
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”genart8b” movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/03/gen-art-08-multiple-lines-scalable.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
Please visit the blog article to view this interactive flash content. Flash plug-in required:
[/kml_flashembed]
[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;
ball_o.x = randomRangeAxis(10);
ball_o.y = 0;
ball_o.ax = 0;
ball_o.ay = 0;
ball_o.oldx = ball_o.ball.x;
ball_o.oldy = ball_o.ball.y;
ball_o.gradientBoxMatrix = new Matrix();
ball_o.drift = randomRangeAxis(10);
ball_o.color_drift = Math.floor(randomRangeAxis(4)) * 1024;
ball_o.line_width_drift = randomRangeAxis(2);
balls.push(ball_o);
}
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]
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.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”genart7″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/03/gen-art-07-multilines.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
Please visit the blog article to view this interactive flash content. Flash plug-in required:
[/kml_flashembed]
[cc lang=”actionscript”]
var ball:Sprite = new Sprite();
ball.graphics.beginFill(0x000000, 1);
ball.graphics.drawCircle(0, 0, 10);
ball.graphics.endFill();
addChild(ball);
var ball2:Sprite = new Sprite();
ball2.graphics.beginFill(0x000000, 1);
ball2.graphics.drawCircle(0, 0, 5);
ball2.graphics.endFill();
addChild(ball2);
var balllines:Sprite = new Sprite();
addChild(balllines);
var ball2lines:Sprite = new Sprite();
addChild(ball2lines);
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 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();
var colors:Object = new Object();
colors.r = 255;
colors.g = 255;
colors.b = 255;
colors.rv = 0;
colors.gv = 0;
colors.bv = 0;
colors.rmin = 150; //0
colors.rmax = 250; //100
colors.gmin = 0; //100
colors.gmax = 150; //200
colors.bmin = 0; //150
colors.bmax = 100; //250
colors.rate_of_change = 12;
var color_first:Number = 0xFFFFFF;
var color_second:Number = rgb2hex(colors.r, colors.g, colors.b);
function loop () {
oldx = ball.x;
oldy = ball.y;
old2x = ball2.x;
old2y = ball2.y;
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;
}
ball.x -= ballax = (ballax + (ball.x - anchor.x) * div) * .9;
ball.y -= ballay = (ballay + (ball.y - anchor.y) * div) * .9;
ball2.x -= ball2ax = (ball2ax + (ball2.x - (anchor.x + randomRangeAxis(line_width * 2))) * div) * .9;
ball2.y -= ball2ay = (ball2ay + (ball2.y - (anchor.y + randomRangeAxis(line_width * 2))) * div) * .9;
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_first = color_second;
color_second = rgb2hex(colors.r, colors.g, colors.b);
var dx:Number = ball.x - oldx;
var dy:Number = ball.y - oldy;
balllines.graphics.lineStyle(line_width, color_first, (line_width+100-line_max_width)/100, true, LineScaleMode.NONE, CapsStyle.NONE);
gradientBoxMatrix.createGradientBox(Math.abs(dx), Math.abs(dy), Math.atan2(dy,dx), Math.min(oldx, ball.x), Math.min(oldy, ball.y));
balllines.graphics.lineGradientStyle(GradientType.LINEAR, [color_first, color_second], [(line_width+100-line_max_width)/100,(line_width+100-line_max_width)/100], [0, 255], gradientBoxMatrix);
balllines.graphics.lineTo(ball.x, ball.y);
dx = ball2.x - old2x;
dy = ball2.y - old2y;
ball2lines.graphics.lineStyle(line_width/2, color_first, (line_width+100-line_max_width)/100, true, LineScaleMode.NONE, CapsStyle.NONE);
gradientBoxMatrix.createGradientBox(Math.abs(dx), Math.abs(dy), Math.atan2(dy,dx), Math.min(old2x, ball2.x), Math.min(old2y, ball2.y));
ball2lines.graphics.lineGradientStyle(GradientType.LINEAR, [color_first + 3072, color_second + 3072], [((line_width/2)+100-line_max_width)/100,((line_width/2)+100-line_max_width)/100], [0, 255], gradientBoxMatrix);
ball2lines.graphics.lineTo(ball2.x, ball2.y);
}setInterval(loop, 1000/30);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;
}
[/cc]
Here’s the gen-art-07-multilines.swf as well as the gen-art-07-multilines.fla to download and tinker.
