cocos2d for iPhone

A fast, easy to use, free, and community supported 2D game engine

1. 

   ehoffman
   Member

   @Orion- It's not a duplicate question -> you got the basics working :)

   What I found: Chaikin is good for some kind of pre-smoothing. You capture the touch points in ccTouchesBegan/Moved. If you have two points use chaiking with weight 4 and level 2 on both points - throw away the original points. Do that for every new captured point, with the last captured (and chaikin smoothed) point.

   This removes small differences in the captured points. For example if you move your finger over the iPad. You think it is a really smooth curve, but the captured points have a small jitter - just some pixel difference in (x,y) as it "should" be. Chaikin removes this jitter.

   Then use the code I posted here to compute the bezier curve control points over all curve segments. You now have:

   - N captured touch points, "smoothed" with chaikin
   - N-1 cubic bezier curve segments (= a cubic bezier spline), each with 2 computed control points (2 touch points + 2 control points = 1 cubic bezier curve :)

   Now you need to break your spline in equal sized segments. I posted some info how to do that already here somewhere, but as you got that far ... again :)

   What you need to split the spline in equal sized segments is the arc length of your curves and of your spline. So you can do that mathematically correct or use an approximation, which is faster and -for games- good enough.

   - You know the segment size you want, it is ARC
   -> Loop over all curve segments, give ARC as argument
      - split the cubic bcurve in NUM_STEP points,
        where NUM_STEPS = 2*ccpDistance(p1, p4) -> p1/p4 are captured points
        p2/p3 are the control points
      - now you have points for every t=1/NUM_STEPS
      - loop over these points (they are really near) and
        calc ccpDistance() between these points
      - save the distance for each step to a second array
        -> the sum of this array is the arc length of the curve
           (approximated)
      - now you know the t and the approximated arc length of the
        curve in every t
      - now search the arc length array to find where it equals
        the ARC you want
      - if the curve is shorter, just substract the arc length of
        the curve from ARC and go to the next curve, using this as ARC
      - if you find a point (usually you won't find equal, but inbetween
        two t's - interpolate here) reset ARC to the original
        segment size you want
      - save the points you find :)

   Problems:
   - Extrema. But depends on your texture size (line width).
   - the last captured point may not be in your segment size ... decide if you want to add it or not (I did: if (remaining_arc_length_before_last_point >= 0.5f * ARC) add_it(); else do_not_add_it(); )

   Posted 1 year ago #
2. 

   Orion-
   Member

   @ehoffman
   Thank you very much for the explanation.
   However, I'm not making a game. I'm using this to write on the phone, some kind of hand written note pad. I'd like to have the hand drawn letters reflect the letters as written on a real paper. What I use to do until I read your post was:
   1 - capture every touch locations in a CGPath until touchDidEnd. Draw the path while the touches captures increase.
   2 - When the touch did end, do the smoothing in a background dispatch_queue and submit to the main queue the reworked path when done to replace the old 'live' path.

   Now I may change this behavior after reading your post, and have:
   1 - while touch did not end, capture touch and hand the last segment points to Chaikin (to remove jitter) before adding the chaikin points to the CGPath
   2 - when touch did end do the cubic bezier control points computation and draw the overall bezier curve.

   I also started to read some material about the Savitzky-Golay algorithm to filter the jitter of the captured touch location points in an other way.

   However I don't understand why I would need to cut the spline in equal sized segments in my case. Do you find it relevant in my case?

   Posted 1 year ago #
3. 

   Orion-
   Member

   @ehoffman
   Also the problem I encounter seems to be highly related to the specific use case I'm targeting.

   I mean for example, If I was gonna draw a 'a' lowercase letter on the touch screen about the size of a regular hand written letter on a real paper it would be contained in a rect of size 20px by 20px and the number of points captured during the drawing of the letter would be around 20 if I wrote it at a normal fast pace. But could be 30 points if I slow down a bit or 15 if I write real quick.
   So the thing is now I have around 20 samples for a rather small area. As a result of this, the points are very close to each other and thus, the smoothing with Chaikin will not help very much (due to the precision of the screen).
   I imagine it could be better to split the usage of different filtering (or smoothing) algorithms based on the density of captured points.

   Posted 1 year ago #
4. 

   ehoffman
   Member

   @Orion- Ok, I think I understand what you mean.

   The thing is, you won't get 20/30 points when you really "write" as on paper. Maybe 5/10 You will always have points with a different distance to each other. So if you decide you want 3px distance, use the arc length (ARC) approach and you can be sure the points are not to near and not to far away from each other.

   You can even do that in realtime ... not after the path is finished.

   But it depends on what you really want to do. If you want to make some kind of pattern recognition, I would not smooth the points in any way.

   If you want "writing" -> do as I described and tune it as you need.

   Posted 1 year ago #
5. 

   Krithik B
   Member

   Hello frens,
   Even i am working on line drawing and Moving the sprite in the path.
   i searched searched whole forum , and applied all code i got ,

   Here is what i am doing ,
   I am getting all the points in touchesMoved and applying this algorithm

   -(void)genCatmullRomSplinesWithPoints:(CGPoint *)points withNum:(int)num withSegments:(int)segments andWithVertices:(CGPoint *)vertices
   {
       int count = 0;
       float b[segments][4];
   
       {
           // precompute interpolation parameters
           float t = 0.0f;
           float dt = 1.0f/(float)segments;
           for (int i = 0; i < segments; i++, t+=dt) {
               float tt = t*t;
               float ttt = tt * t;
               b[i][0] = 0.5f * (-ttt + 2.0f*tt - t);
               b[i][1] = 0.5f * (3.0f*ttt -5.0f*tt +2.0f);
               b[i][2] = 0.5f * (-3.0f*ttt + 4.0f*tt + t);
               b[i][3] = 0.5f * (ttt - tt);
           }
       }
   
       {
           int i = 0; // first control point
           CGPoint *p = vertices+count++; p->x = points[i].x; p->y = points[i].y;
           for (int j = 1; j < segments; j++) {
               float px = (b[j][0]+b[j][1])*points[i].x + b[j][2]*points[i+1].x + b[j][3]*points[i+2].x;
               float py = (b[j][0]+b[j][1])*points[i].y + b[j][2]*points[i+1].y + b[j][3]*points[i+2].y;
   
               CGPoint *p = vertices+count++; p->x = px; p->y = py;
           }
       }
       for (int i = 1; i < num-2; i++) {
           // the first interpolated point is always the original control point
           CGPoint *p = vertices+count++; p->x = points[i].x; p->y = points[i].y;
           for (int j = 1; j < segments; j++) {
               float px = b[j][0]*points[i-1].x + b[j][1]*points[i].x + b[j][2]*points[i+1].x + b[j][3]*points[i+2].x;
               float py = b[j][0]*points[i-1].y + b[j][1]*points[i].y + b[j][2]*points[i+1].y + b[j][3]*points[i+2].y;
   
               CGPoint *p = vertices+count++; p->x = px; p->y = py;
           }
       }
       {
           int i = num-2; // second to last control point
           CGPoint *p = vertices+count++; p->x = points[i].x; p->y = points[i].y;
           for (int j = 1; j < segments; j++) {
               float px = b[j][0]*points[i-1].x + b[j][1]*points[i].x + (b[j][2]+b[j][3])*points[i+1].x;
               float py = b[j][0]*points[i-1].y + b[j][1]*points[i].y + (b[j][2]+b[j][3])*points[i+1].y;
   
               CGPoint *p = vertices+count++; p->x = px; p->y = py;
           }
       }
       // the very last interpolated point is the last control point
       CGPoint *p = vertices+count++; p->x = points[num-1].x; p->y = points[num-1].y;
   }

   and then i will call this function to move the sprite in that path,
   

   - (void) moveObjectAlongPath {
   
       // Calculate duration and speed
       CGPoint nextWaypoint = verticesArr[nextObjectWaypointIndex];
       //CGPoint nextWaypoint = [[pointsMutableArray objectAtIndex:nextObjectWaypointIndex]CGPointValue];
       nextObjectWaypointIndex = nextObjectWaypointIndex+1;
       CGFloat duration = ccpDistance(icon.position, nextWaypoint) / speed;
      // NSLog(@"%f",duration);
       CGPoint difference = ccpSub(nextWaypoint,icon.position);
       double angle = -1 * (atan2(difference.y, difference.x) * 180 / M_PI + 90) + 180;
   
       id ActionMove = [CCMoveTo actionWithDuration:duration position:nextWaypoint];
       id rotateAction = [CCRotateTo actionWithDuration:duration angle:angle];
       id callBack = [CCCallFunc actionWithTarget:self selector:@selector(moveObjectAlongPath)];
   
       CCSequence *actionSequence = [CCSequence actions:
                                     [CCSpawn actions:
                                      ActionMove,
                                      rotateAction,
                                      nil],
                                     callBack,
                                     nil];
       [icon runAction:actionSequence];
   }

   However the sprite movement is not soo smooth like Flight Control , any algorithm i am missing??
   Thanks

   Posted 1 year ago #
6. 

   jray123
   Member

   Any news on this project?

   @allent17
   https://github.com/allent17/Cocos2d-Line-Drawing

   This repo is empty :(

   Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.