Processing 1.0 - Processing Discourse

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › Curved line smoothing

‹ Previous Topic | Next Topic ›

Pages: 1

Curved line smoothing (Read 1300 times)

Wiweeyum

Curved line smoothing
Dec 16^th, 2008, 4:20pm

I know exactly what I want, I just have no idea how to get it made in a programming language. I'm beginning to grasp a lot of the concepts that Processing offers, but I'm not a programmer. I think like a programmer, but I don't know a language. So I've got this project I want to make, but I don't know how to go about doing it. I own and have been using the book 'Processing' and it's a wonderful help, but it's difficult to use it for reference when I don't know what I'm supposed to be looking for. So I bring it to you guys for a heads up of what direction to look. If this is posted elsewhere, please send me a link so I can have a look. I searched myself, but without knowing what to search for, I found nothing.

GOAL:
I want to draw lines freehand with the mouse, but smooth them out so any imperfections that occur don't show up.

MY IDEA CURRENTLY:
I'm no very eloquent, so I've made a series of images to help me out here.

Here I just free-handed a curved line in Paint. It looks like it was drawn in Paint...

I want a series of points to be automatically created on this line, either as I'm drawing it or once I release the mouse button. The points need to be created at an interval. I'm thinking that an interval of time would be best.

Once the line is done, the original line will be deleted and only the points will be kept. Connecting the dots with lines will smooth out the line quite a bit.

The line would be boxy, as can be seen in the previous image. So I want the lines to be connected with a curve. I can see this as being the biggest problem. Anyway, compare the line connections with the curve overlay.

The end result compared with the original free-handed line.

I've been looking at the example program called continuouslines. I don't know what to look for to add the points at intervals, and especially don't know how to connect those points with a continuous curved line.

Thanks much,
-Scott

leafcutter

Re: Curved line smoothing
Reply #1 - Dec 20^th, 2008, 12:48am

Hi, I'm very new to processing and am still learning the basics but as I was working from the MIT press Processing book it occurred to me that you could get line smoothing by using easing. I made the following which shows how it works.

best,

J.

float x;
float y;
float old_x;
float old_y;
float easing = 0.12; // increase for more 'line detail'
float old_x2;
float old_y2;

void setup(){
size(400,400);
smooth();
background(200);
}

void draw(){
float targetX = mouseX;
float targetY = mouseY;
x += (targetX - x) * easing;
y += (targetY - y) * easing;
stroke(0);
line(old_x,old_y,x,y);
old_x = x;
old_y = y;
// this bit shows the un-smoothed line in RED
stroke(255,0,0,50);
line(old_x2,old_y2,mouseX,mouseY);
old_x2 = mouseX;
old_y2 = mouseY;
}

void mousePressed(){background(200);} //click to clear

toxi

Re: Curved line smoothing
Reply #2 - Dec 20^th, 2008, 6:08pm

Hey you can actually do that very easily with one of the classes in my geomutils library, called Spline3D. Ignore the fact that it's 3D, it can also be used for 2D purposes... You just stuff as many points as you wish into an array & then compute the resulting curve at the resolution you want. Here's a small demo with random points:

Quote:

import toxi.geom.*;

size(600,600);
smooth();
background(255);
noFill();

// create 20 random points
// and draw connection lines between them
Vec3D[] points=new Vec3D[20];
float x=0;
float y=height/2;
stroke(255,0,0,100);
beginShape();
for(int i=0; i<points.length; i++) {
  points[i]=new Vec3D(x,y,0);
  vertex(points[i].x,points[i].y);
  x+=random(-0.1,1)*80;
  y+=random(-1,1)*60;
}
endShape();

// highlight the positions of the points with circles
stroke(0);
for(int i=0; i<points.length; i++) {
  ellipse(points[i].x,points[i].y,5,5);
}

// pass the points into the Spline container class
Spline3D spline=new Spline3D(points);

// sample the curve at a higher resolution
// so that we get extra 8 points between each original pair of points
ArrayList vertices=spline.computeVertices(8);

// draw the smoothened curve
beginShape();
for(Iterator i=vertices.iterator(); i.hasNext(); ) {
  Vec3D v=(Vec3D)i.next();
  vertex(v.x,v.y);
}
endShape();

You can get the library from over here:
http://code.google.com/p/toxiclibs/downloads/list

Hth!

postspectacular.com | toxi.co.uk

Pages: 1

‹ Previous Topic | Next Topic ›