Interactive Generative Art Series – 07 – multiple lines

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

    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)

  • Recent Posts

    custom post types wordcamp presentation evan mullins

    WordCamp Presentation on WordPress.TV

    My presentation about Custom Post Types and Custom Fields from WordCamp Atlanta 2014 has been added to wordpress.tv. Here it is! Enjoy! Tweet

    WCATL-Speaker

    Custom Post Types or Choose Your Own Adventure – WordCamp Atlanta 2014

    I’ve been fortunate enough to be able to present at WordCamp Atlanta 2014. That makes the 3rd year in a row I’ve been able to contribute to WordCamp Atlanta! Here are my slides. I’ll be posting a full blown post of my presentation as soon as I can get it all down. Plus I hear […]

    Screenshot 2014-03-17 08.12.14

    What screens want

    Great read if you haven’t yet read it yet: Frank Chimero : What screens want : http://frankchimero.com/what-screens-want/ web and interaction design are just as much children of filmmaking as they are of graphic design. Maybe even more so. After all, we both work on screens, and manage time, movement, and most importantly, change. So what […]

    bed-bug-lifecycle-stages

    Before You Report that Bug, Use this Pre-Contact, Self-Diagnosis Routine

    Wisdom for bug reporting from Newfangled There are a few things a developer usually needs to know in order to diagnose a bug, and these are the things we’re likely to come back and ask you about if you haven’t already provided them. So, to ensure we can help you as quickly as possible, here’s […]

    deathtozach-06

    In dependence – Not dead

    Great summary and call to arms to write our own content in our own ways on our own sites. Call it what you like but ‘blogging’ is somewhat waning, in the social webs. Since as easy it is to create your own site and express your own voice, we’re flocking to the ‘services’ that will […]

    Screenshot 2014-03-17 08.50.27

    I ain’t ‘fraida no maths

    I’d heard of the ‘coding maths’ series, but hadn’t watched it yet. I should have, it’s great! Keith Peters (one of the people who first got me into scripting) has a great series about the math behind coding and as always he has a way of making complex things simple to me! Learn all you […]

css.php