code | Tripped Out

Two posts in a week(ish)? ASTONISHING.

Last night I had some free time to see what all the fuss my coworkers were making about Processing and I’m glad I did. Essentially, processing makes programmatic ‘sketching’ a rather simple task. The reference guides and tutorials are great, and the code is super easy to follow. And ever since I saw Jared Tarbell speak at Geeky By Nature, I’ve been dying to play around. So obviously, this was inspired by browsing his site whenever I got a chance for the last couple weeks. Eventually I promise I’ll make something cool to call my own. I want to turn this into something fun and interactive for my company’s new office.

Click on the image to start the applet, and then click again to reset the spheres. Lemme know what you think! Hit me up – @trippedout.

(Ridiculously) Simple source can be found here.

Wow, it’s been a while. Regardless, let’s get right into it shall we?

So, my code sucks, so feel free to let me know what I could do better, but made this simple class for a project I’m working on now. Hit me up on twitter (@trippedout) if you have any questions.

Fairly simple – pass it two anchor points and two control points, optional threshold and linestyle objects (feel free to change). Threshold controls the amount of times a line is broken down into smaller segs if you’re animating your line quickly and it isn’t smooth enough (smaller is smoother).

Use your favorite tweening engine to tween the ‘time’ attribute and shazam – animated quad beziers!

Usage:

1
2
3
4

var bezLine:BezierLine = new BezierLine( anchor1, control1, control2, anchor2 );
addChild( bezLine )

TweenLite.to( bezLine, .35, { time:1, ease:Cubic.easeOut } );

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

package utils
{
import flash.display.Shape;
import flash.geom.Point;

public class BezierLine extends Shape
{
private var _time :Number = 0;
private var _prevTime :Number = 0;
private var _threshold :Number;
private var _frozen :Boolean = true;

private var anchor1 :Point;
private var anchor2 :Point;
private var control1 :Point;
private var control2 :Point;

private var _lineStyle :Object = { thickness:2, color:0xffffff, alpha:.35 };

public function BezierLine( $anchor1:Point, $control1:Point, $control2:Point, $anchor2:Point, $threshold:Number = .025, $lineStyle:Object = null )
{
anchor1 = $anchor1;
anchor2 = $anchor2;
control1 = $control1;
control2 = $control2;

_threshold = $threshold;

if( $lineStyle )
this.graphics.lineStyle( $lineStyle.thickness, $lineStyle.color, $lineStyle.alpha );
else
this.graphics.lineStyle( _lineStyle.thickness, _lineStyle.color, _lineStyle.alpha );

this.graphics.moveTo( anchor1.x, anchor1.y );
}

private function updateLine():void
{
if( _frozen ) return;

var len:int = 1, i:int, dif:Number,
posx:Number, posy:Number, u:Number;

if( _time < 1 )
{
dif = _time - _prevTime;

//check to see if the difference between last frame and this is under
//the threshold, if it is, change the length of the for loop for
//how many segments the current line will be broken in to
if( dif > _threshold ) len = Math.ceil( dif / _threshold );

for( i = 0; i < len; ++i )
{
//if on last loop (or first of len=1) set to time, else
//increment thru the time by the threshold amount, making smoother lines
if( i == len - 1 )
u = _time;
else
u = _prevTime + ( i * _threshold );

//draw lines based on http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/
posx = Math.pow(u,3)*(anchor2.x+3*(control1.x-control2.x)-anchor1.x)
+3*Math.pow(u,2)*(anchor1.x-2*control1.x+control2.x)
+3*u*(control1.x-anchor1.x)+anchor1.x;

posy = Math.pow(u,3)*(anchor2.y+3*(control1.y-control2.y)-anchor1.y)
+3*Math.pow(u,2)*(anchor1.y-2*control1.y+control2.y)
+3*u*(control1.y-anchor1.y)+anchor1.y;

this.graphics.lineTo(posx,posy);
}
}
else
this.graphics.lineTo(anchor2.x,anchor2.y);

_prevTime = _time;
}

public function clear():void
{
_frozen = true;
this.graphics.clear();
}

public function get time():Number
{
return _time;
}

/**
* Tween this value from 0-1 to animate the line in and out.
*/
public function set time(value:Number):void
{
_time = value;
_frozen = false;
updateLine();
}

}
}

Be sure to leave a comment if you have any questions/ideas/tell me i suck!

Tripped Out

if you want something crazy like broccoli i'll kill you

Tag Archives: code

First Processing Test – updated!

Finally some free time… Processing!

Animate any Quadratic BezierLine with me