Interactive Generative Art Series – 06 – lineStyle

    gen-art-06-linestyle-1gen-art-06-linestyle-2gen-art-06-linestyle-3

    The last example in this series discussed getting the anchor to move in a way that our ball would paint more interesting and we worked on restricting the colors to a certain RGB range. This one is a very simple change, but has a pretty significant effect. We’re just editing the cap style of our lines in lineStyle. The default value we’ve been using so far is ROUND, but now if we test NONE the lines drawn will have no ends and basically be rectangles (since the width is so wide). This gets interesting especially when the path curves and we can see all the angles and corners exposed by the rectangles and it makes me think of a wooden snake toy (Wooden Wiggle Snake). I started playing around with the opacity or alpha property of the lines as well so that the flat ended lines would show better. What else would you toy with in here?

    06 lineStyle, play here

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

    actionscript source code

    var ball:Sprite = new Sprite();
    ball.graphics.beginFill(0x000000, 1);
    ball.graphics.drawCircle(0, 0, 10);
    ball.graphics.endFill();
    addChild(ball);

    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 = 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 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 = 0;
    colors.rmax = 150;
    colors.gmin = 100;
    colors.gmax = 200;
    colors.bmin = 200;
    colors.bmax = 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;
       
        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, 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));
        this.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);
        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, axis:Number = 0):Number {
        return Math.random() * (max * 2) - max + axis;
    }

    download

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

    Reference

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

    Post a Comment

    Your email is never published nor shared. Required fields are marked *

    *
    *

    You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    • Recent Posts

      Touch Specific Media Queries in CSS4

      Proposals in the works for new media queries specific to touch enabled devices. Examples include pointer, which will differentiate wether the device has a fine or coarse pointer (finger vs mouse) and hover, which would say if the device supports hover states. I can see this being helpful and useful for building mobile friendly sites [...]

      Responsive Image Dispute and Tourists – Analogy

      Jason explains the root of the problem and why no one has been able to devise a solution that makes everyone happy yet. The browsers (in their awesome drive to make browsing faster) are prefetching images and developers want to only use one image based on criteria the browser doesn't know until the layout is [...]

      Google Moog Keyboard Synthesizer Detailed

      This post on creativejs picks apart how this doodlue was made. Nice they they are able to support HTML5 audio even if it is only supported on chrome and the rest fall back to – you guessed it – flash. Embedded Link Google Moog synth tear-down Yesterday we featured Google's web-based analogue synth Moog tribute [...]

      Synth Emulator on Google Japan Doodle Today

      Synth Emulator on Google Japan Doodle Today Embedded Link Moog 自分のオリジナル曲を創って、 #moogdoodle で共有しよう。 Tweet

      WordPress updates plugin directory

      New additions to the plugin directory include: favorites, incorporating support forums into it's own tab for each plugin as well as support stats being displayed! Great! I think we also need the ability to give plugins ratings and reviews (bonus points if it can be done from within a wordpress admin dashboard when installing plugins). [...]

      Short Head

      Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to [...]

      Img Set?

      Great article at a list apart discusing the state of the industry regarding responsive images. This picks apart the set attribute of the img element from a surprisingly objective view coming from someone so close to the picture element. Insightful discussion about the principle behind the proposals than the actual solution too. If the working [...]

      Triudo

      A mesmerizing animated triangle-ish shape form. Embedded Link triduo triduo Tweet

      Git – the paradigm shift

      A great developer story about the differences on what Git is vs other version control and what Git is not. This is how we should learn it. I heard over and over that it was distributed, but never grasped what that meant, so here are a few links and explanations that will help unlearn version [...]

      Tweening Lib comes to Javascript!

      I'm very excited to share the news that the tween library from GreenSock (hands down the best tweening library I used in flash) is not ported for use in javascript! This will be great! I missed that simple syntax from as3 when animating javascript, and now I can have my cake and eat it too. [...]

    • Recent Comments

      Bruce Brownlee

      Bruce Brownlee

      Ah IE6. I'd have 2 more years of sleep without IE6. Margin doubling, no properties,...
      versaena

      versaena

      how to give color at runtime…… thank you
      Mobile Websites

      Mobile Websites

      I disagree, mobile websites are the future – desktop websites and mobile websites...
      Matt Fasick

      Matt Fasick

      That's cool. I like the ripple effect as well.
      Nico

      Nico

      hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh...
      Evan Mullins

      Evan Mullins

      Agreed! I've just seen some people get pretty heated about separating all functionality...