abstract Archives - Page 4 of 7

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;

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);
var gradientBoxMatrix:Matrix = new Matrix();

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

Better jquery mega-menu tutorial

Posted on July 14, 2010August 29, 2014 by Evan Mullins

My earlier simple mega menu implementation post displayed some simple css and jquery to explode a standard navigation menu into a mega-menu… I’ve made it even better. My biggest issue with that implementation was that it did not keep the order like you’d expect. It read left to right in columns rather than down each column. In the example you can see the first column of three would read from the top: a, d, g, j… this could potentially be confusing. So I wanted to update it to keep the order better and just stack the columns of elements rather than the elements themselves.

I used some different jquery to execute this. First we walk through the menu elements and calculate which column they should be in. We basically map that element’s (li)index to the column it should be, some big math. Luckily I had some experience from actionscript in my arsenal doing just that, so porting the function to javascript I was ready to go. If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C. Plugging this function in and cancelling out the zeros and adding some rounding to get integers I got: Math.floor((liindex / $total * $cols)+1). Using this I added a class to each ‘li’ designating which column it should be in, and then used wrapAll to wrap them into column divs. Very simple and a much better implementation overall anyways. Better code, better user experience… what more can you ask… so here’s the example and jquery code. I’m thinking I should make this into a jquery plugin or something, any thoughts?

See the mega menu in action

Javascript code

[cc lang=”javascript”]
jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery(‘#nav li ul’).each(function(ulindex, ulele){
$total = jQuery(this).children(‘li’).size();
if ($total <= 7) { jQuery(this).addClass('mm-1'); } else { $cols = Math.floor(($total) / 8) + 1; $remainder = $total % $cols; $rows = Math.ceil($total / $cols); jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );jQuery(this).children().each(function(liindex, liele){ //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); //If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C. jQuery(this).addClass('col-' + Math.floor((liindex / $total * $cols)+1) ); if( (liindex+1) % $rows == 0) { jQuery(this).addClass('last'); } });for (var colcount = 1; colcount<= $cols; colcount++){ jQuery(this).children('.col-'+colcount).wrapAll('

‘);
}
}
});
});
[/cc]

css

[cc lang=”css”]
ul { list-style:none; }

/********** < Navigation */ .nav-container { float:left; background: #398301; margin: 10em 0; width: 960px; } #nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }/* All Levels */ #nav li { text-align:left; position:relative; } #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; }/* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #1b3f00; } #nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; } #nav li.over a, #nav li.active a { color:#fff; }/* 2nd Level */ #nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #1b3f00; border-width: 0 1px 2px 1px; background:#398301; padding: 6px 0 6px; } #nav ul div.col { float:left; width: 15em; } #nav ul li { float:left; padding: 0; width: 15em; } #nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #1b3f00; border-bottom:1px solid #1b3f00; background:#398301; } #nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #2b6301; } #nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #1b3f00; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #1b3f00; }

/* Show Menu – uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu – uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }
[/cc]

Download

Visit this demo page and view source or save as…

A simple mega menu implementation with CSS and jquery

Posted on July 12, 2010August 29, 2014 by Evan Mullins

I’ve been skinning quite a few ecommerce sites with the magento platform and wanted a simple way to explode the navigation menus. Some sites end up getting a long list of categories and sub-categories, so I wanted to do a mega-menu style navigation. One way to do it was to rewrite the html code for the navigation and pop each column into another nested unordered list. I’m not a fan of doing this because one – I didn’t want to manipulate the html. I like the simplicity of ul navigation with a clear flat list of li elements. Of course for nested sub-navigation any li can contain another ul. I wanted to just use some css and maybe javascript to visually accomplish the same thing. I also wanted it to be portable, so I could take it and use it on a wordpress install or even a plain html site. I went to my favorite: jquery. I knew there was a likely plugin out there already that would do something similar, but nothing after my initial search, but I realized that it was a simple procedure and mostly accomplished with some css.

I’ll walk you through the process here and let you inspect the code yourself and see it in action on the demo page. Assign each ul to be a default width of 15em, then each li element we float:left and also give it a width of 15em. This way we can change the ul width to 30em and automatically I have 2 columns! Assigning the nested ul a specific width according to it’s class is done through css, mm-0 will be 15em and incrementally each next one will be 15em more. mm-1 is 30 and mm-2 is 45. Then we use jquery to determine the number of elements in the list and assign it a class accordingly. This involves some math and some preferences. Using the magic ui number 7, I determined that a menu with more than 7 elements should explode into multiple columns. So anything less than or equal to 7 I assign the class ‘mm-1’ which in the css sets the width to the standard 15em (ie 1 mega menu column). More than 7 should pop into columns no more than 8 tall. So dividing the total by 8 will give us the number of columns we want. We’ll add a class of mm-x, where x would be the number of columns. And the li elements will float to the left and fill in the space in columns.
One specific issue is the last element in the menu, sometimes we need to style that element differently. I’ll loop through each child of the nested ul element and if it is on the bottom row apply a class of ‘last’. But this was a little tricky in calculating which would be last because were never sure how many elements there will be or how many columns. I just used the remainder after dividing the total by the number of columns, then if the remainder could be used to know which elements are on the bottom row.

OK, now that that’s out of the way, let’s look at the code.

HTML

This I won’t show, you can inspect the source of the demo if you wish to see it, it a basic nested collection of unordered lists. It’s the standard that is created by magento, wordpress and most other CMS platforms.

CSS

[cc lang=”css”]
html, body { margin:0; padding:0; }
ul { list-style:none; }

/********** < Navigation */ .nav-container { float:left; background: #186C94; margin: 10em 0; width: 960px; } #nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }/* All Levels */ #nav li { text-align:left; position:relative; } #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; }/* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #111; } #nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; } #nav li.over a, #nav li.active a { color:#fff; }/* 2nd Level */ #nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #104A65; border-width: 0 1px 2px 1px; background:#186C94; padding: 6px 0 6px; } #nav ul div.col { float:left; width: 15em; } #nav ul li { float:left; padding: 0; width: 15em; } #nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #111; border-bottom:1px solid #104A65; background:#186C94; } #nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #135575; } #nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #104A65; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #104A65; }

/* Show Menu – uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

Javascript

Don’t forget to include jQuery (I prefer using the google hosted version at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)
[cc lang=”javascript”]
jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery(‘#nav li ul’).each(function(ulindex, ulele){
$total = jQuery(this).children(‘li’).size();
if ($total <= 7) { jQuery(this).addClass('mm-1'); } else { $cols = Math.floor(($total) / 8) + 1; $remainder = $total % $cols; jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );jQuery(this).children().each(function(liindex, liele){ //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); if( liindex + $remainder >= $total || $remainder == 0 && liindex + $cols >= $total ){
//alert(“total: “+$total+”, remainder: “+ $remainder+”, index: “+liindex);
jQuery(this).addClass(‘last’);
}
});
}
});

});
[/cc]

See the demo in action

Stomper999

Posted on July 24, 2009August 29, 2014 by Evan Mullins

Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!

“Online Marketing Changes Forever!”

Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!

Details:
For this project I used flash, html, css and javascript. Tweener for the fading effects. Found a nice stock flash from activeden for the countdown and used jquery and the easing and color plugins.