bezier-interpolation's Introduction

bezier-interpolations

This python script for RoboFont demonstrates how to get Bezier interpolations (as opposed to linear interpolation) out of several layers of a single glyph.

How to do

Draw the initial state of the glyph
Draw the final state of the glyph
Draw the intermediate (target) state of the glyph (e.g. at time = 1/2) (for quadratic there is only 1 step, for cubic there are 2)
Generate the offset layers using the appropriate functions call
Set up your design space as llustrated below
Moving together the 2 axes (3 axes for Cubic) will generate the Bezier interpolation

DESIGN SPACE FOR QUADRATIC BEZIER INTERPOLATION:

glyphOff  -------------------- glyphEnd

 |                                | 
 
 |                                |
 
 |          (glyphTarget)         | 
 
 |                                |
 
 |                                |
 
glyphStart --------------------  glyphOff

DESIGN SPACE FOR CUBIC BEZIER INTERPOLATION:

            glyphOff2  ------------------- glyphEnd
                
              |                                | 
                 
              |                                |
                        (glyphTarget2)                     
              |                                | 
                 
              |                                |
                 
              |                                |
             
            glyphOff2 ---------------------  glyphOff2

               /     
 
glyphOff1  --/---------------- glyphOff1

 |         /                      | 
 
 |       /                        |
            (glyphTarget1)
 |     /                          | 
 
 |   /                            |
 
 | /                              |
   
glyphStart --------------------  glyphOff1

bezier-interpolation's People

Stargazers

Watchers

bezier-interpolation's Issues

Animate start point bezier path. #2

hi its possible animate bezier path lines. Like a CAShapeLayer strokenEnd property. I put example image and video what I mean.

I have bezier path

Next I have animation with duration 1.0 seconds, when animation started I need calculate bezier points relative animation progress each frame. Below video example.

Comp.1.mp4