game Archives - Page 3 of 4

Interactive Physics Animations Javascript Canvas 04

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

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;

canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);

var this_dot = {
x: Math.random()*canvas.width/5,
y: Math.random()*canvas.height/5,
width:canvas.width,
height: canvas.height,
radius:25};

draw();

$(“#canvas”).mousedown(function (event) {
var dx, dy, dist;
dx = event.pageX – this.offsetLeft – this_dot.x;
dy = event.pageY – this.offsetTop – this_dot.y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) { drag = true; clickX = dx; clickY = dy; } else { drag = false; } }); $("#canvas").mouseup(function (event) { drag = false; }); $("#canvas").mousemove(function (event) { if(drag) { this_dot.x = event.pageX - this.offsetLeft - clickX; this_dot.y = event.pageY - this.offsetTop - clickY; draw(); } }); function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(this_dot.x, this_dot.y, this_dot.radius, 0, Math.PI * 2, false); context.arc(this_dot.x*2, this_dot.y*2, this_dot.radius, 0, Math.PI * 2, false); context.arc(this_dot.x*3, this_dot.y*3, this_dot.radius, 0, Math.PI * 2, false); context.arc(this_dot.x*4, this_dot.y*4, this_dot.radius, 0, Math.PI * 2, false); context.arc(this_dot.x*5, this_dot.y*5, this_dot.radius, 0, Math.PI * 2, false); context.arc(this_dot.x*6, this_dot.y*6, this_dot.radius, 0, Math.PI * 2, false); context.fill(); } }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

Interactive Physics Animations Javascript Canvas 02

Posted on October 26, 2011August 29, 2014 by Evan Mullins

Adding more circles, each a multiple of the first circle’s coordinates. I like the effect of having them all move in unison. Ceck the source: interactive physics animations via javascript & canvas | 02

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;

canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
x = width / 2;
y = height / 2;
draw();

$(“#canvas”).mousedown(function (event) {
var dx, dy, dist;
dx = event.pageX – this.offsetLeft – x;
dy = event.pageY – this.offsetTop – y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) { drag = true; clickX = dx; clickY = dy; } else { drag = false; } }); $("#canvas").mouseup(function (event) { drag = false; }); $("#canvas").mousemove(function (event) { if(drag) { x = event.pageX - this.offsetLeft - clickX; y = event.pageY - this.offsetTop - clickY; draw(); } }); function draw() { context.clearRect(0, 0, width, height); context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2, false); context.arc(x*2, y*2, radius, 0, Math.PI * 2, false); context.arc(x*3, y*3, radius, 0, Math.PI * 2, false); context.arc(x*4, y*4, radius, 0, Math.PI * 2, false); context.arc(x*5, y*5, radius, 0, Math.PI * 2, false); context.arc(x*6, y*6, radius, 0, Math.PI * 2, false); context.fill(); } }); [/cc]

A More Interactive Portfolio

Posted on March 23, 2011August 29, 2014 by Evan Mullins

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, enough, I’ll let you see what you see… Interactive POG Portfolio

The details

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!

Interactive Generative Art Series – 07 – multiple lines

Posted on March 11, 2011August 29, 2014 by Evan Mullins

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.

07 multiline, play here

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

actionscript source code

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

download

Here’s the gen-art-07-multilines.swf as well as the gen-art-07-multilines.fla to download and tinker.

Interactive Generative Art Series – 05 – wild anchor

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

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)

05 Wild Anchor, play here

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/02/gen-art-05-wild-anchor.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(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;

var anchorvx:Number = 0;
var anchorvy:Number = 0;

anchor.x = stage.stageWidth/2;
anchor.y = stage.stageHeight/2;

function loop () {

oldx = ball.x;
oldy = ball.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; 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;
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], [0, 255], gradientBoxMatrix);
this.graphics.lineTo(ball.x, ball.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):Number {
return Math.random() * (max * 2) – max;
}

[/cc]

download

View the swf and get the fla source file.

Interactive Generative Art Series – 04 – anchor

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

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.

04 Anchor, play here

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”gen-art-4″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/02/gen-art-04-anchor.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(0x000000, 0);
ball.graphics.drawCircle(0, 0, 5);
ball.graphics.endFill();
addChild(ball);

var anchor:Sprite = new Sprite();

anchor.graphics.beginFill(0x333333, 0);
anchor.graphics.drawCircle(0, 0, 12);
anchor.graphics.endFill();
addChild(anchor);

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;

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 = 0;
colors.g = 122;
colors.b = 255;
colors.rv = 0;
colors.gv = 0;
colors.bv = 0;
colors.min = 0;
colors.max = 200;
var color_first:Number = 0xFFFFFF;
var color_second:Number = rgb2hex(colors.r, colors.g, colors.b);
var gradientBoxMatrix:Matrix = new Matrix();

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

anchorvx += randomRangeAxis(2);
anchorvy += randomRangeAxis(2);

anchor.x += anchorvx;
anchor.y += anchorvy;

anchorvx *= dampen;
anchorvy *= dampen;

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;
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);
function rgb2hex(r:Number, g:Number, b:Number):Number {
return(r<<16 | g<<8 | b); } function color_step(){ colors.rv += Math.random() * 20 – 10; colors.r += colors.rv; colors.rv *= dampen; if (colors.r > colors.max) {
colors.r = colors.max;
} else if (colors.r < colors.min){ colors.r = colors.min; } colors.gv += Math.random() * 20 – 10; colors.g += colors.gv; colors.gv *= dampen; if (colors.g > colors.max) {
colors.g = colors.max;
} else if (colors.g < colors.min){ colors.g = colors.min; } colors.bv += Math.random() * 20 – 10; colors.b += colors.bv; colors.bv *= dampen; if (colors.b > colors.max) {
colors.b = colors.max;
} else if (colors.b < colors.min){
colors.b = colors.min;
}
}
//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):Number {
return Math.random() * (max * 2) – max;
}

[/cc]

download

swf and fla source file.

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.

Dynamic 3d space | Floating Sketches Tutorial

Posted on January 30, 2009August 29, 2014 by Evan Mullins

I’ve had quite a few questions about how to make depth in flash. Earlier (like, 2 years ago) I put up an experiment file to give some interactive depth to some sketchbook sketches, see Floating Sketches. I’ve finally gotten around to translating that into as3. It’s still the same basic idea, Create layers of levels, and have each one respond to the mouse a little differently. The ‘closer’ depths will move faster while the farther away depths will be slower. A simple technique called Parallax.

Seperate the scene into layers
Place the layers in the correct depth
Make closer layers react fast and farther layers slower

Example

[kml_flashembed fversion=”8.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2009/01/depth.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”550″ height=”550″]

[/kml_flashembed]

Actionscript

[cc lang=”actionscript”]
//define number of layer.
var numLayers:uint = 15;
//number of items in a layer
var numBallsPerLayer:uint = 100;
var defaultBallSize:uint = 25;

var stageWidth3d:uint = 800;
var stageHeight3d:uint = 800;

var layers:Array = new Array();
//init
makeMatrix();
//3d created by layers and placing objects on each layer – the layer has it’s own distance, simulated by movement and alpha

function makeMatrix():void {
//walk through desired number of layers
for (var layerNum:uint=0; layerNumSource

depth.fla

Voters Aide | Prioritize the Issues this Election | Interactive Flash App

Posted on October 15, 2008August 29, 2014 by Evan Mullins

To accompany the last presidential debate, I ask a question:

Who to vote for?

It’s not just about what party you’re affiliated with, who you agree with more on an issue or which candidate you understand better… it’s a combination of them all. It’s more important how a candidate can handle the different issues facing us today than how they perform in a debate or advertisement.
There should be somewhere to assign a weight to each issue on the table and then issue by issue see which candidate I agree more with. Then it would calculate and tell me who I really support according to how I prioritize the issues. So if I think the only issue worth voting about is Iraq or the economy and I agree more with Barrack Obama or John McCain on those issues it will be reflect in the results.
It’s pretty hard to explain the whole idea, without building it myself, so that’s just what I did… while I couldn’t stop thinking about it I coded it.

Check it out, and I hope it helps! Cause we’re gonna need all the help we can get on this one! It can help you decide or just test yourself and see if you really support that candidate as much as you think.

Go try it here!

I pulled info from CNN’s election center mostly because all the info was gathered for me already, each of the big issues, descriptions and the candidates position. I have a slider for each issue where users select how imortant it is to them (on a scale of 0 to 100 percent). Then users compare their own position on the issues with each candidate (on a scale of 0 to 100 toward each candidate). This is all considered while your support is calculated. Each issue’s importance as a percentage is multiplied by the amount you agree with each candidates position. These are all added up and totaled to give a final percentage. This is innovative in that it’s not just who you agree with mpre, it’s who you agree with more on the isues that you think are more important! Let me know what you think about this and let the candidates know what you think about their positions.

Voters Aide the flash app to help you decide who you support by letting you prioritize the issues and choose which candidate you lean towards on each issue and see the overall results.

Event Tracking with Google Analytics | Flash Integration | Tutorial

Posted on October 3, 2008August 29, 2014 by Evan Mullins

Many have read my Integrate Google Analytics with Flash Tutorial in which I express enthusiasm for the new event tracking at google analytics! Well, it’s been a while, but I was admitted to the Beta testing group! So I’ve now had the chance to play with event tracking a bit and wanted to publish my findings!

Overview

Almost a year ago Google Analytics announced their new event tracking model and have had help documents published and code samples up. And as with many of Google’s products the beta stamp has lasted a very very long time. Many have seen my earlier tutorial exploring using traditional Google Analytics Tracking from within Flash, and it does wonders to track your flash apps in this manner, but there is a problem with it. We’re using supposed object oriented concepts to track objects as pageviews. One thing is it really isn’t a very intuitive way to represent that data, and another it inflates your pageviews! The solution? the long awaited and announced Event Tracking model. I’ve been itching for this to be released so I could refresh my analytic tactics I use in my flash projects. No, to answer your questions, it has not been released yet, but I contacted Google and explained that I would be a great beta tester for this feature and after a bit of correspondence they invited me to join in the beta testing! This is good news for you too! Because I will tell you all about how to do it and even show you what the reporting looks like and when it is released finally, you will know what you’re in for after this sneak peak!

UPDATE: Here are the reports for this very example: Report from Event Tracking with Flash Tutorial

The very quick summary is this:
_trackEvent(category, action, optional_label, optional_value)
Note that the _trackEvent function is called on the pageTracker object itself. (initially Google had you instantiate a separate event tracker for every object (or category) you wanted tracked)

For example, if we want to track a ball. All the actions that can apply to the ball are: it being created, dragged, dropped, bounced, deleted… You get the idea. We can have direct user actions tracked or even automatic actions. If we have gravity and physics running, the ball may bounce a lot without any direct user interaction. But it will never be dragged or dropped without direct interaction. I’d recommend only tracking user interactions because who cares how often a ball bounces on your page (unless you’re doing an experiment, of course), want we want to know is how and when a user interacts with the ball.

category:string (required)

This is the name of the object you are tracking.

action:string (required)

This is the action that happens to your object you want to track.

optional_label:string (optional)

This can be more information to accompany the action.

optional_value:integer (optional)

A number to provide numerical information to accompany the action.

Steps

First, I’d recommend reading up about Event Tracking at Google
Decide your object oriented structure for tracking events. What objects do you want to track and what useful information do you want to get through tracking user interaction?
Make sure you have the new Google analytics tracking code on your page
Use these functions to communicate Google Analytics from your flash
1. Call the main function with the specified parameters
2. It will call the appropriate function and send the data to your pageTracker object through javascript with externalInterface calls
See the reports in your analytics profile! (if your a beta tester, or else, wait until it is released)

Source code

The tracking functions are below, I enhanced the earlier trackGA function I wrote about. Now you call trackGA with 2 required parameters, categoryOrPageTrack and action. categoryOrPageTrack is where you have to pay attention. I wanted to keep the ability to track pageviews as well as have event tracking, so as the first param you either send in the string ‘page’ to explicitly state that you want to track the page view, or you send in another string to state you want to track an event on that specified object. Action remains the same, the action you want tracked (either on the pageview, it is the path that will appear in your reports; or the event tracking will be the action tracked to the category)…
So to track a pageview I call
trackGA("page", "swfLoaded");
and to track an event to an object I call ball:
trackGA("ball", "created");
The trackGA function will rout your call to the appropriate place and send the info to Google through either the trackGAPage function or the trackGAEvent function.
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//trackGA (categoryOrPageTrack [required], action [required], label [optional], value [optional]
//categoryOrPageTrack – either the category string or a string saying ‘page’
function trackGA(categoryOrPageTrack:String, action:String, optional_label:String, optional_value:Number) {
//call page tracking version of Google analytics
if (categoryOrPageTrack == “page”) {
//trace(“GATC pageTracker call”);
trackGAPage(action);
}
//call event tracking method
else {
//trace(“GATC event tracker call”);
trackGAEvent(categoryOrPageTrack, action, optional_label, optional_value);
}
}

var prefix:String = “flashGA”;
//Google Analytics Calls Page Tracking – for tracking page views
function trackGAPage(action:String) {
//GA call
if (prefix != null && !eventTrack){
var call = “/” + prefix + “/” + action;
//Old Google Analytics Code (urchinTracker)
ExternalInterface.call(“urchinTracker(‘”+call+”‘)”);
//New Google Analytics Code (_trackPageview) pageview
ExternalInterface.call(“pageTracker._trackPageview(‘”+call+”‘)”);
trace(“==GATC==pageTracker._trackPageview(‘”+call+”‘)”);
}
_root.tracer.text = action;
}

//Google Analytics Event Tracking Calls – for tracking events and not pageviews
//category, action, label (optional), value(optional)
function trackGAEvent(category:String, action:String, optional_label:String, optional_value:Number) {
/*
objectTracker_trackEvent(category, action, optional_label, optional_value)
category (required) – The name you supply for the group of objects you want to track.
action (required) – A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
label (optional) – An optional string to provide additional dimensions to the event data.
value (optional) – An optional integer that you can use to provide numerical data about the user event.
*/

theCategory = “‘” + category;
theAction = “‘, ‘” + action + “‘”;
theLabel = (optional_label == null) ? “” : “, ‘” + optional_label + “‘”;
theValue = (optional_value == null) ? “” : “, ” + optional_value;
//New Google Analytics Code (_trackEvent) event tracking
theCall = “pageTracker._trackEvent(” + theCategory + theAction + theLabel + theValue + “)”;
ExternalInterface.call(theCall);
trace(“====GATC====”+theCall);
_root.tracer.text = theCategory + theAction + theLabel + theValue;
}
[/cc]

Here’s the actionscript lines where I call the trackGA function:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//Tracks that the swf loads, so I pass ‘page’ to let it know I want a pageview tracked…
trackGA(“page”, “swfLoaded”);
//Tracks various objects sending various actions
trackGA(“gravity”, “on”);
trackGA(“gravity”, “off”);
trackGA(“friction”, “on”);
trackGA(“friction”, “off”);
trackGA(“ball”, “deleted”, count);
trackGA(“ball”, “created”, ballCount);
trackGA(“ball”, “drag”, this.ballNum, this.ballNum);
trackGA(“ball”, “drop”, this.ballNum, this.ballNum);
trackGA(“ball”, “bounce”, “right”, this.ballNum);
[/cc]

Example

[kml_flashembed fversion=”9.0.0″ movie=”/wp-content/uploads/2008/10/integrategoogleanalytics/integrategoogleanalytics.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”400″ height=”400″]

[/kml_flashembed]

View example in it’s own html page, I even added a couple html buttons with javascript hooked in to show javascript event tracking implementation.

Download

Download Source

Concerns

I’ve noticed while putting this together that the calls to google analytics are not completely fullfilled, this example sends out correct calls to javascript, but (in firefox at least) a max of about 1 tracking call is registered with the tracking code every 5 seconds or so. I noticed this as I was monitoring the drag and drop events for each ball, although the drag and drop events are both fired, usually the drag event was received and the drop is not. After verifying that my code was consistent, I noticed that no matter how fast I interacted with the objects, the calls were much slower. I’m guessing this is a limit placed by the google team to keep us from sending pointless data such as is posted at the bottom of the event tracking implementation guide, titled Events Per Session Limit.