Geography 970

March 8, 2010

Gradient line segments

Filed under: Uncategorized — Jeremy White @ 1:33 pm

I thought it might help to post something about creating gradient vectors without the hassle of using complex matrices for color and alpha blending.  The animation that I posted on Basecamp uses a solution to draw unique vectors for each geo-tweet.  The simple solution was to break a line into 12 segments and then draw 18 lines per segment of varying length and opacity.  The resulting line has a length that is based on a percentage of the total line length (Chicago to LA, for example), which means that shorter lines (Boston to NYC) will have shorter segments.  The combined segments create an opacity ramp, and therefore adjusted saturation and lightness, with the segment trail blending to nearly 100% opacity.

Here are the methods for determining the individual segment lengths as well as the trailing lines with varying opacity and lengths:

public PointF FindSegmentPoint(PointF startPoint, PointF endPoint, int segmentStart) // Finds the start and end points of a segment on a line
{
if (segmentStart > 1) // Segment is longer than one section
{
int totalLineSegments = 12;  //Divide each line into 12 segments
double lineLength = Math.Sqrt(Math.Pow(endPoint.X – startPoint.X, 2) + Math.Pow(endPoint.Y – startPoint.Y, 2));  // Find total line length
double stepX = (endPoint.X – startPoint.X) / totalLineSegments;  // Find length of one segment for X
double stepY = (endPoint.Y – startPoint.Y) / totalLineSegments; // Find length of one segment for Y
return new PointF((float)(startPoint.X + stepX * segmentStart), (float)(startPoint.Y + stepY * segmentStart)); // Return new start and end points
}
else
{
return startPoint; // Return original start point if segment start is < 1
}
}

public void DrawTrailSegements(PointF startPoint, PointF endPoint, Graphics g) // Draw trails for each segment
{
int totalLineSegments = 18; // Total number of lines for trail
double lineLength = Math.Sqrt(Math.Pow(endPoint.X – startPoint.X, 2) + Math.Pow(endPoint.Y – startPoint.Y, 2));  // Total segment length
double stepX = (endPoint.X – startPoint.X) / totalLineSegments; // Find length of one segment for X
double stepY = (endPoint.Y – startPoint.Y) / totalLineSegments; // Find length of one segment for Y

for (int i = 1; i < totalLineSegments; i++) // Draw all 18 lines
{
Pen whichPen = new Pen(Color.FromArgb(i * 2, 0, 0, 128), 2); // Vary the opacity of each line
PointF thisStartPoint = new PointF((float)(startPoint.X + stepX * i), (float)(startPoint.Y + stepY * i)); // Determine new start point for each line
g.DrawLine(whichPen, thisStartPoint, endPoint); // Draw that puppy
}

}

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: