Play with computer

Is computer fool? No, you saw Alpha Go, you saw the super calculator. But I say, computer is still a tool fool right now. It rely on your order / operation, sometimes even doesn’t work though. Well, let’s talk about some function it took me and the reason I thought it is a fool, then I will show some methods to deal with computer.

Painting with computer

As a designer, computer supported sorts of methods to draw, whatever vector graphic, bitmap,or motional graphic. For painting, CG ^1 can imitate real textrue or materials even stroke / brush and press.

Basically, CG can be defined Shaded & Flat (厚涂,平涂)for me. Shaded painting means artist will shade the graphic to make it looks more like real, object’s volume / 3D can be described as a objective effect. Flat painting have become more popluar than 10 years ago, this style gernerally use solid color and flat shape. Sometimes it’s abstract but has stronger visuals. Furthermore, in Japanese animation field, flat colours are filled into outline of comic, and make animation. Because frame should be drew individually, so flat color is the best way to fill.

Animation and Curve

How to make a animation? By hand, draw every frames, which is easily understand. But different frames count in 1 second will take different effect.

• 6-7 frames/s obviously lag, for: stop motion
• 12 frames/s bascially smooth, for: general animation
• 24 frames/s really smooth, for: action expression / film
• 60 frames/s extremelly smooth, for: game

It’s sooo hard to draw all frames by hand right?
Well, we have computer now, so how can it help artist to make aniamation then.

Key frames animation

Set 2 frames, and computer will generate other frames. It looks wonderful, but, not at all. Key frames only generate simple transform:

• translate
• rotate
• skew
• scale

For example, if I set two point, one is 0, another is 100. Then computer will generate graphic begin 0 to 100, but the graphic will not change except I set other animation.

In AE, we can also use cursor to build motion, moving cursor of a graphic will make it as if it be pull / drag, because this action will keep the original shape, so it looks like a organic motion.

AE expression 表达式

Imagine that, you want to let 5 ball move to right from left, one by one. The first thing you might inspire could be set different location of cursor on timeline, so they begin from different time. It’s OK, but, how about 100 balls, you can’t do that right, so we use expression.

AE expression is base on Javascript, we can use expression to get different values and set frames.

transform.position + time * 100 * index

• transform.postion means this component ‘s current position
• time is the progress on timeline
• index is the index of layer

This expression means this component will countinue move with time, and it will increase the distance with a higher layer.

Bezier curve

Computer is good at render geometric, but it can draw curve like human. So we should use Bezier curve to order computer to render a curve.

Bacially, Bezier curve can render by SVG and P5.js or other language. And it can be sorted as:

• Linear Bezier
• Quadratic Bezier
• Cubic Bezier

Different Bezier should be applied different handle point to control the curve. Quadratic need 2 points, cubic 3. To move the handle point, we can control the motion of curve.

p5.js:

shapeBegin()
vertix(x,y);
vertix(handleX,handleY);
vertix(handleX2,handleY2);
vertix(endX,endY);
endShape()

We can add more describe by add vertix() expression, it apply the coordition of a point to draw line. It is a good way to set point base on mouseX, mouseY, so computer will follow the user’s operation. If the motion should be set as automatically action, we can use frameCount , which will continue increase with timeline. Because the framecount will infinitve increase, so use cos(frameCount) to get a range of value from 0 to 1.

If the handle point should move as a circle, we should get the function of circle, which return X and Y on a circle.

let cX = x + r * cos(angle * PI / 180)
let cY = y + r * sin(angle * PI /180)

This is a function to get every point, when we set angle as framecount, this function will continue output coordinate of a circle, and we can use that to set value of handle of Bezier, it can move innifitve.