Zemni Moving Image

Project Tag: Procreate

E3.3: Edges in Time: Accumulation, destruction or trace

Conceptual abstract exploration of the ways that our perceptions of past present and future change over the life cycle from beginning of life when the past starts gradually to be known, and the future looks long, large and bright to the final shortening of a future that looks increasingly dark, and memories slowly erase and possibly even our sense of ‘now’.

Visible Animators: Material Accumulation, Erosion and Trace

“Great care is normally taken to hide the animation process and presence of the animator to avoid distracting from the continuity of the movement. In stop-frame, shots including the shadow of the animator are deleted and re-shot. When the audience notices the presence of the animator through, for example, the tactile fact of a drawing on paper, this is a distancing effect. The viewer is made aware of the animator through production time; the build-up of layers of a substance or through the life and durability of the material itself.”

TASK: Make a quick 30-90 second animation exploring one of the following three animation techniques: accumulation, destruction/erosion or trace.
To start, you may want to restrict the materials you work with, so your animation can explore the possibilities of accumulation, destruction or trace by experimenting with mark-making, objects, or physical materials. Alternatively, you may want to explore these themes through image-making and metaphor by drawing, photographing or using found materials. Either way, be playful in your approach, and log all of your experiments on your learning log as well as your final piece.

Animation in physical media using build-up, erasure and trace techniques with both dry and wet physical media produces beautiful results. Media include sand art, charcoal, painting and mixed drawing and painting. Animation can be recorded with video and/or Stop Motion with different effects. Similar effects can also be reproduced digitally in software like TVPaint and Procreate on the iPad.

These are approaches that I want to explore in a lot more depth in Assignment 5, and also my animation work for SYP. My work in this project only starts to look at issues involved in complexities of planning, layering and performance that are different between physical and digital techniques.

Inspiration

Animation in physical media using build-up, erasure and trace techniques with both dry and wet media produces beautiful results.
I started by compiling a padlet of different potential media, styles and approaches including sand art, charcoal, painting and mixed drawing and painting.
Some of the activities are recorded with video, others using Stop Motion.

Charcoal Doodles

I started by experimenting with Charcoal Stop Motion, just doodling and experimenting with spontaneous drawing. Capturing in Stop Motion Studio on my iPhone using a uniform capture setting and varying the size of strokes each time to get differences in speed of build up and erasure.

Different effects can be achieved through using different types of charcoal, different rubbers and smearing tools and on different paper.

Narrative needs quite a lot of planning.

The resulting videos can then be further edited with audio in TVPaint (most versatile for frame by frame) and/or Premiere and/or After Effects (for standard video effects) to vary the speed of build up, tone/colours, layering etc.

Charcoal Stop Motion: first Doodle

Charcoal Stop Motion: Tree and Wind animation

Edges in Time:
iPad timelapse in Procreate

The second set of animations were experiments in conceptual abstraction for SYP ‘Edges in Time’ starting to think about the ways that our perceptions of past present and future change over the life cycle from beginning of life when the past starts gradually to be known, and the future looks long, large and bright to the final shortening of a future that looks increasingly dark, and memories slowly erase and possibly even our sense of ‘now’.

This series was produced in Procreate Timelapse video on my iPad using charcoal paint, smear and erase brushes in different sizes and opacities. Unlike charcoal animation, Procreate allows different layers to be altered and manipulated. But it is very difficult to control brush strokes – normally this is achieved through experimentation and undo/redo that is fiddly when all this is recorded with minimal editing capacity. It is also extremely difficult to control speed and relative pacing of animation – it is not always clear what will record as a slow process or as a single frame jump.

This was an interesting and quick way of conceptual experiment to see how things might work. But obviously needs a lot of refinement, probably in a combination of physical media and more professional pc software.

Edges in Time abstracted concept animation will be an important part of SYP, even if the end result is not professional. And further developments will be included as part of MI A5 Presentation.

Edges in Time 1: vertical timer: this did not record many of the brush strokes, even when they were done in separate small strokes and selecting and moving cut elements does not show as a separate frame unless combined with brush strokes.

Edges in Time 2: Horizontal Timer this is longer with more brush strokes recorded. I quite like the horizontal format. I could experiment with trying to show the past pushing the present or the future pulling the past, and a rather stuttering present. I could also make a lot more of the boundaries between the time and environment. Presumably the cones are ‘me’. I could experiment more with the relative tones and colour. But this is too complex for the software and would need to be done in TVPaint.

Edges in Time 3: Vertical Timer with audio. this is longer with more brush strokes recorded. I like the addition of the ticking – I offset two tracks at slightly different speed so that they are out of sync. But this would be more effective if I play a sound track and use physical stop motion techniques where the animation in drawn in sync with the audio. Then composite the video with a clean audio track and any additional effects or editing in TVPaint or Premiere/AE. This was useful as a quick experiment to give me some ideas though – and point to what does not work as well as what might.

July 1, 2020
E2.7-2.10: Pose to Pose Animation
Direct animation
vs Pose to Pose

Direct animation

‘Direct’ animation is an open-ended ‘adventure’ that starts by drawing, sculpting or photographing the first frame of the animation and then capturing each subsequent frame, progressively building up movement sequentially. This is the workflow of animation methods like Stop Motion and the Visual Music experiments. Although the process may follow some sort of storyboard and underlying narrative idea, the relationship between frames is not easy to control without a lot of practice, and not all accidents are ‘happy’.

Pose to Pose animation

‘Pose to Pose’ animation is a more more controlled and considered approach to movement devised to ensure that the animated process can be planned for ahead of making; easily revised; and split up into a division of labour in commercial studios. It is possible to anticipate where a particular action might end and how long a particular action will take- useful when working alongside sound and in planning the overall rhythm and structure of a sequence. In hand or computer drawn animation, it is possible to make continual changes to the movement itself, returning to a sequence to insert or replace frames. A very jerky leap up and down can be changed to a slow glide into the air or a sudden crash downwards can be avoided by simply adding more frames into the upward movement and taking away a few frames towards the end of the movement. Or crashes and disasters exaggerated by removing or changing position of frames.

E2.7 Time Chart

To use pose to pose you draw the beginning and end of each main pose and any interesting ‘extreme’ poses between them (all known as keyframes) and then go back later to fill in the less dramatic frames in-between these keyframes (known as ‘inbetweens’). The more in-betweens you insert between an action the slower, and smoother it will become. It is not however the number of in-betweens between keyframes that matters, but their spatial and time distribution. If the in-betweens are equally spaced in time and distance then the resulting movement will be at a constant rate. If the spacing of time and/or distance is irregular then the movement will be more dynamic and lively.

A time chart is used to plan out the placement of the keyframes and in-between drawings.

Three key poses are pictured: 1, 7 and 17. Drawings 3, 5, 9, 11, 13 and 15 are planned on the timechart below the drawings. Note the distribution of in-betweens planned for frames 1-5 and 9-17. The dog’s head will move quicker between frames 1-7 because the spacing is further apart in the same time. It then slows down toward the end, between 7-17 with much less distance covered in the same time.

TASK
Draw an animation time chart indicating key poses and placement of
in-betweens for two movements from the list below:
● A leaf falling from a tree
● Pin dropping on a hard surface
● Piece of paper being torn in half
● Coffee cup being knocked over
● Marble rolling off a table
● Ice melting
Upload the charts onto your learning log.

Drawing showing the different factors that influence the behaviour of a marble – none of these timings are fixed but depend on how strongly the marble is rolled, the height of the table and whether the marble is big and heavy or small and lighter. See Post on Bouncing Balls and E2.9 below.

Ice Cubes

!!to do. Much more gradual. But do Inunclude all the details of the sudden cracks?

E2.8 Keyframes and
In-Betweens

TASK: Draw the key frames and in-betweens of one of your chosen movements. Scan or photograph your frames to make an animation or animated gif. You may want to add extra frames or play the movement backwards and forwards making it into a loop.
Upload the result onto your learning log as well as any amendments you made to your drawn diagram.

Drawing of the keyframes and in-betweens based on 2 second animation and the time chart.

TVPaint animation with handdrawn Keyframes in red and in-betweens in blue using FbF with speed adjustments to follow diagram. No squash and stretch was applied because marbles are hard and do not squash. I could have got more consistency in shape and size by pasting copies of a ball Custom Brush instead of handdrawing.
E2.9 Interpolation

Digital key frames and Interpolation

2D computer animation is built up from key frames. If starting point A and an end point B are set as ‘key frames’ most software (Adobe Animate, TVPaint, Adobe After Effects, Adobe Premier and Final Cut Pro but not eg Procreate or Corel Painter) will be able to work out all the in-between stages needed to move from A to B. This process of filling in the in-betweens is called interpolation or ‘tweening’.

There are two types of interpolation:

Linear interpolation will move an object from A to B at a constant rate as if the in-betweens were plotted on the time chart at equal distances from each other.
Bezier interpolation allows adjustment in the curve of movement so that the object will move at a variable pace: speeding up and slowing down.

Software specifically designed to 2D animation enables either direct frame by frame drawing and/or importing drawings and images that can then be combined and animated with fine control over the interpolation curves.

TASK:
Watch the tutorials on linear and Bezier interpolation on the Khan Academy website:
https://www.khanacademy.org/partner-content/pixar/animate/ball/v/a2-quick
Complete the featured exercise ‘Animation with Linear Interpolation’ using their interactive animation page.

I did not find the Khan Academy explanation particularly detailed compared to work I had done on another on-line animation course with Howard Wimshurst.

I started by doing more thorough research on You Tube about the physics of Bouncing Balls and different approaches to animating them. Adobe Animate has much more precise and user-friendly motion tween features. But TV paint also enables motion tweening and some degree of control over the speed curves. Because I was interested in marbles for this project, again I did not add squash and stretch – though some motion blur might have been good. The Red Ball animation was done as part of my Howard Wimshurst course using Frame by Frame animation in Procreate on my iPad – a softer squishier ball using squash and stretch.

See detailed post:

Research 2.4 Bouncing Balls

TV Paint animation using Motion effect and tweening comparing linear interpolation, Bezier C curve and Bezier S curve.

Earlier animation using Procreate on my iPad
E2.10 Keyframing

TASK: Use digital software to animate one of the movements from the same list as in Exercise 7.
● A leaf falling from a tree
● Pin dropping on a hard surface
● Piece of paper being torn in half
● Coffee cup being knocked over
● Marble rolling off a table
● Ice melting

Marble falling off a table using TV Paint motion tween features. I used the original keyframe drawing from E2.8 as a hidden layer. Because the speed controls in TV Paint are quite complex, designed for much more art-style animation rather than motion graphics, I found it difficult to control the interpolation speed at each keyframe. Adobe Animate would be better for this task, or TVPaint Frame by Frame using a ball Custom Brush to maintain consistency in shape and size. But the exercise was very useful in helping me familiarise myself with these features in TVPaint.
June 30, 2020
E1.3: Rotating on a Chair
For this animation I was asked to make a drawn animated loop of about 24-48 frames of a chair spinning 360 degrees. I did this on my iPad in Procreate.
- Step 1: Set up a chair in the middle of the room. This was a little bit tricky as there is no room in my house where it is possible to have a chair in the middle far enough away to move around while maintaining the same distance and viewpoint because other furniture gets in the way. I could have added an object, but the simple chair was in itself enough of an interesting challenge.
- Step 2: Make a drawing of the chair (and object). Work fast, loose and try to fill most of the page. No more than 3 minutes per drawing. Then move your seating position a few degrees to the right and make another drawing from this new perspective. Then move and draw again until you have encircled the chair and made drawings from roughly all positions around it. Number your drawings as you go along on the corner of the page.
I did very quick sketches in Procreate on my iPad, some shaded and some not. Using onion skinning to maintain some semblance of alignment and scale despite the need to draw from slightly different distances and heights to avoid furniture/stand or sit etc. I actually quite like some of the variation – it seems like the chair is sometimes coming nearer, sometimes receding and the occasional shaded frames add interest. I could experiment a lot more with this – adding more or less variation, doing all shaded shapes or all sketches and getting mor or less constancy in size through cropping/transformation and redrawing with more accurate linear perspective.
- Step 3: Import your images into your editing software. Starting with 24 frames per second, I experimented frame rates: 6FPS, 12 FPS and 15 FPS, and with loop and pingpong variants.
Chair revolving 24fps

Chair revolving pingpong 12fps

Chair revolving 15fps

Chair revolving 6fps
June 13, 2020
E1.2: Make an animated GIF ‘Boil’

This project asked me to make 8 drawings through tracing over a photograph either with a pencil and lightbox, or digitally. Keeping the lines fast and loose, making new images rather than keeping fidelity to the original. Then to repeat the exercise, experimenting with how tightly or loosely I do the drawing. And with the order of frames. I was then asked to create an animated gif and upload to my blog.

I chose to do this project in Procreate on my iPad to experiment with different drawing styles. I uploaded as an mp4 file because animated gifs do not play in WordPress unless enbedded. I did not want to upload thus preliminary work to vimeo or You Tube.

TASK: A Graphics Interchange Format (GIF) is a file format that supports animated and still images. It is a computer file composed of a series of images (numbering between 2 to several hundred). It is a relatively dated file format (invented in 1987) but still exists today. It allows an animation to loop endlessly and is often used in social media.

Cat Waiting pencil

Cat Waiting subtle moving

Cat Waiting ink line

Cat waiting subtle move

Cat waiting green and brown acrylic

June 12, 2020