Week 4 Assignment (desc)
Younghyun Chung
| Problem 1.
Create a function that takes as input a number of steps, and draws that many points, evenly spaced between the last two mouse clicks.
|
|
// global variables for W4_1
Vec2d startPoint = Vec2d( -1,-1 );
Vec2d endPoint = Vec2d ( -1,-1 );
// LERP
Vec2d LERP ( Vec2d A, Vec2d B, float p ) {
return A*(1.0-p) + B*p;
}
// function
void drawEvenlySpacedLine( int numPoints ) {
if ( startPoint.x >= 0 && endPoint.x >=0 ) { // draw after two clicks
glPointSize( 3 );
glBegin( GL_POINTS );
for( int i=0; i<=numPoints; i++ ) { // steps of numPoints
Vec2d C = LERP( startPoint, endPoint, (float)i/numPoints);
glVertex2f ( C.x, C.y );
}
glEnd();
}
}
// called in displayFunc()
drawEvenlySpacedLine(10);
// add to mouseDownFunc()
if (endPoint.y != mouseX && endPoint.y != mouseY ) {
startPoint = endPoint;
endPoint.x = mouseX;
endPoint.y = mouseY;
}
|
 : 10 steps |
| Problem 2.
Create a function that takes as input a number of steps, and draws that many intermediate shapes between a start shape and an end shape. The start shape and end shape should be defined by an array of vectors (i.e points), and should have the same number of points. Extra credit for those who can make this work for two shapes with an unequal number of points.
|
|
void drawTransition( Vec2d *startShape, Vec2d *endShape, int numSteps ) {
for( int i=0;i<numSteps;i++ ) {
glBegin( GL_LINE_LOOP );
for(int j=0;j<4;j++) {
Vec2d C = LERP( startShape[j], endShape[j], (float)i/numSteps );
glVertex2f ( C.x + 50*i, C.y );
}
glEnd();
}
}
void drawW4_2 ( void ) {
Vec2d startShape[4] = { Vec2d(100,100), Vec2d(200,100), Vec2d(200,200), Vec2d(100,200) };
Vec2d endShape[4] = { Vec2d(100,150), Vec2d(300,100), Vec2d(400,150), Vec2d(150,200) };
drawTransition( startShape, endShape, 10);
}
// called in displayFunc()
drawW4_2();
|
|
 : 5 steps  : 10 steps |
|
| Problem 3.
Create a function that takes four points (Vec2d) as input and draws a single Bezier curve based upon those four points.
|
|
void drawCubicBezierCurve ( Vec2d A, Vec2d B, Vec2d C, Vec2d D ) {
int numPoints = 360;
glBegin ( GL_LINE_STRIP );
for( float p=0; p<=1.0; p+=0.01) {
float q = 1.0-p;
Vec2d R = A*q*q*q + B*p*q*q*3 + C*p*p*q*3 + D*p*p*p;
glVertex2f( R.x, R.y );
}
glEnd();
}
// called in displayFunc()
drawCubicBezierCurve(Vec2d( 100,100 ),Vec2d( 200,200 ),
Vec2d( mouseX,mouseY ),Vec2d( 400,100 ));
|
 : bezier curve  : bezier curve |
| Problem 4.
Create a function that takes as input an array of points (Vec2d *) and the number of points in that array (int), and draws a shape composed of several consecutive Bezier curves.
|
|
void drawConsecutiveBezierCurve( Vec2d *Points, int numPoints ) {
for(int i=0;i<numPoints-3;i+=3) {
drawCubicBezierCurve( Points[i], Points[i+1], Points[i+2], Points[i+3] );
}
}
void drawW4_4 ( void ) {
int numPoints = 12;
Vec2d Points[12] = { Vec2d(100,100), Vec2d(150,800), Vec2d(200,-100), Vec2d(250,200),
Vec2d(300,300), Vec2d(350,500), Vec2d(400,100), Vec2d(450,150),
Vec2d(600,150), Vec2d(650,100), Vec2d(700,400), Vec2d(750,300) };
drawConsecutiveBezierCurve( Points, numPoints );
}
// called in displayFunc()
drawW4_4();
|
|
 : composition of several consecutive bezier curves |
|
| Problem 5.
Create a function that draws a head of hair composed of 500 bezier curves. Extra credit for highlights.
|
|
void drawHair ( void ) {
glColor4f ( 0,0,0,0.4 );
srand(time(NULL));
for(int i=0;i<500;i++) {
drawCubicBezierCurve(Vec2d( 200+0.1*i+rand()%10,400+0.1*i+rand()%10 ),
Vec2d( 300+0.1*i+rand()%10,430+0.1*i+rand()%10 ),
Vec2d( 200+0.2*i+rand()%100,300+0.2*i+rand()%100 ),
Vec2d( 250+0.3*i+rand()%50,0+0.4*i+(rand()%50)*2 ));
}
}
|
 : left half of hair using bezier curves |
| Problem 6.
Extra credit: make a bezier drawing tool that works just like the one in Adobe Illustrator.
|
|
// global varibales for W4_5
int bezierStatus = 0;
Vec2d A, B, C, D;
// guideline for bezier curve
void drawGuideLine ( Vec2d Center, Vec2d Point ) {
glColor3f ( 0,0,1 );
glPointSize(3);
glBegin( GL_POINTS ); // points
glVertex2f ( Center.x, Center.y );
glVertex2f ( Point.x, Point.y );
glEnd();
glLineWidth( 1 );
glBegin( GL_LINES ); // lines
glVertex2f ( Point.x, Point.y );
glVertex2f ( Center.x, Center.y );
glEnd();
}
// draw Bezier Curve like Adobe Illustrator
void drawBezier ( void ) {
switch( bezierStatus ) {
case 0:
break;
case 1:
B = Vec2d( mouseX,mouseY );
drawGuideLine( A, B );
drawGuideLine( A, A*2-B );
break;
case 2:
drawGuideLine( A, B );
drawGuideLine( A, A*2-B );
break;
case 3:
drawGuideLine( A, B );
D = Vec2d( mouseX,mouseY );
drawGuideLine( C, D );
drawGuideLine( C, C*2-D );
drawCubicBezierCurve( A,B,C*2-D,C );
break;
case 4:
drawGuideLine( A, B );
drawGuideLine( C, D );
drawGuideLine( C, C*2-D );
glColor3f( 0,0,0 );
glLineWidth( 2 );
drawCubicBezierCurve( A,B,C*2-D,C );
break;
case 5:
glColor3f( 0,0,0 );
glLineWidth( 2 );
drawCubicBezierCurve( A,B,C*2-D,C );
break;
default:
break;
}
}
// in mouseDownFunc()
// reset
if ( button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN ) {
bezierStatus = 0;
}
// steps of drawing bezier curve
if ( bezierStatus == 0 && button == GLUT_LEFT_BUTTON && state == GLUT_DOWN ) {
A = Vec2d( mouseX,mouseY );
bezierStatus = 1;
}
if ( bezierStatus == 1 && button == GLUT_LEFT_BUTTON && state == GLUT_UP ) {
bezierStatus = 2;
}
if ( bezierStatus == 2 && button == GLUT_LEFT_BUTTON && state == GLUT_DOWN ) {
C = Vec2d( mouseX,mouseY );
bezierStatus = 3;
}
if ( bezierStatus == 3 && button == GLUT_LEFT_BUTTON && state == GLUT_UP ) {
bezierStatus = 4;
}
if ( bezierStatus == 4 && button == GLUT_LEFT_BUTTON && state == GLUT_DOWN ) {
bezierStatus = 5;
}
|
|
 : step 1 of bezier drawing tool  : step 2  : step 3 video of bezier drawing tool |
|
| Problem 7.
Describe and sketch (on paper is fine) a computation form that you would like to create for your first class project. Consider all the methods that you know thus far and how they can be combined. Also, feel free to make it interactive or animated or both.
|
|
green something is growing on Manhattan street starting from B'way and Waverly pl.(ITP) |
|