Interactive Generative Art Series – 07 – multiple lines

By Evan Mullins | Published: March 11, 2011

gen-art-multi-lines 01gen-art-multi-lines 02gen-art-multi-lines 03

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

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

actionscript source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
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;
}

download

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

This entry was posted in generative art and tagged , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Nico
    Posted April 13, 2012 at 3:04 pm | Permalink

    hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh of this line generation after… for example… 30seconds? thx! nico (italy)

    Reply

Subscribe without commenting

  • Recent Posts

    speaker-lineup

    Presenting at WordCamp Atlanta – Child Themes

    By Evan Mullins on March 15, 2013

    The presentation? Your firstborn child theme. Child themes 101+2. I’m speaking at wordcamp atlanta this afternoon about themes and child themes. I’ll update this post with post-presentation notes. Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages [...]

    Category:

    hooks-nutshell

    Hooks, In a Nutshell – WP Daily

    By Evan Mullins on February 22, 2013

    I’ve published another article over on wpdaily.co exploring the concept of hooks. I remember when starting out that people kept mentioning hooks and filters and actions and… it took a while to grasp what they each meant. I think the first time I started to grasp it was when I read the codex and saw [...]

    Category:

    speaker-lineup

    Speaker at WordCamp Atlanta 2013

    By Evan Mullins on February 20, 2013

    I’m excited to be speaking at WordCamp Atlanta again this year! The time is quickly approaching for WordCamp Atlanta 2013, March 15-16. I spoke last year and discussed the process of going from Photoshop PSD to WordPress Theme, here are my slides and notes for that WordCamp Presentation. This year I’m speaking along the same [...]

    Category: ,

    many-theme-options

    WP Features: Theme or Plugin

    By Evan Mullins on February 15, 2013

    Reading my wpdaily.co updates today and saw this post talking about WordPress theme features. Eric explains the debate: Generally-speaking, the conversations have always circled around features: There are those that believe every feature you could ever imagine should be included like text color, font selector, and more. On the flip-side, there are those that feel [...]

    Category:

    Packery Preview, from Metafizzy & descended from Masonry

    By Evan Mullins on February 11, 2013

    David Desandro / metafizzy, maker of masonry and isotope of which I’m a big fan and user of has been busy with a new project called Packery. Packery, looks to be a child of Masonry. As you would expect it seems to be pushing things much further and addressing a few pain points of masonry. [...]

    Category: ,

    trent-walton-thumb

    On Going Responsive (responding to Where to Start)

    By Evan Mullins on February 8, 2013

    I needed to write this up about going responsive in response after reading Where to Start (by Trent Walton of Paravel) about getting started with responsive web design. Thanks for sharing your thoughts Trent, I agree whole heartedly. In my experience it is the same. I wanted to share his post and also add my [...]

    Category: ,

  • Recent Comments

    Evan Mullins

    Evan Mullins

    The keystore is used for creating valid apps that are associated with the author. It is not...
    Rohan Dave

    Rohan Dave

    I am new in android and have certain question about KeyStore. Is KeyStore used in user...
    arpit

    arpit

    very useful thank you …..
    Duan

    Duan

    @ugh You’re joking, right? I do some basics in Flash, but come on – all you do is...
    Cátia Vala

    Cátia Vala

    Thank you so much Evan! That’s great! Keep going with your amazing work. :)
    zproxy

    zproxy

    thanks :) i bet its faster to google and find some ad hoc documentation than the other way.