DEV Community: Brian Montana

Canvas 101: Multiple Shapes and Resets

Brian Montana — Tue, 20 Aug 2019 17:55:02 +0000

This tutorial will build off the previous post I made; Canvas 101: Rotating Shape, focusing on manipulating an array populated with objects created from a class.

The last tutorial we used the Square class to build an object that was updated over time with the requestAnimationFramemethod. Now we'll create multiple Square instances, animate them across the canvas, and reset their position when they are completely off the screen.

To begin let's fork this pen to start:

First we will update the Square class with xVelocity in the deconstructed object of the constructor. We'll use this to move our square across the canvas, and rotate it as it moves. Setting a default value 0.1, or another similar smaller value, in the constructor we'll set the xVelocity to a random value using its default value as the minimum and 1 as the maximum random value for xVelocity.

this.xVelocity = Math.random() * (1 - xVelocity) + xVelocity;

Now let's check out the movement function, right now we're incrementing the value by 0.1, but with the randomly generated xVelocity we can increment it by the xVelocity value over time. Every time you refresh you'll see a different speed. The square will continue to move off the canvas but we can include a check for the current position of the square and reset it to the left side of the canvas using this check shape.xPosition > canvasWidth + shape.width. While doing this we'll want to set the new position to -shape.width, placing it just outside the canvas, so it moves into the canvas instead of appearing on the edge. Here's the final update for the movement function.

function movement(shape) {
  if(shape.xPosition > canvasWidth + shape.width) {
    shape.xPosition = -shape.width;
  }
  shape.rotate += shape.xVelocity / 15;
  shape.xPosition += shape.xVelocity;
}

Awesome! We're seeing the Square instance being animated and rendered across the canvas! Now we can setup an array and create multiple instances of Square. Create an array at the top const squares = []; and a value for the total count let squareCount = 50; Now we have an array to push generated instances of Square, while randomizing it's xPosition, and yPosition. The randomizing will use the same minimum and maximum threshold constraints in xVelocity, we can think of it like this Math.random() * (max - min) + min. To finalize it we'll use a for loop to populate our squares array with the limit of squareCount.

for (let i = 0; i < squareCount; i++) {
  squares.push(
    new Square({
      width: 40,
      height: 40,
      xPosition:
        Math.random() * (canvasWidth * 0.9 - canvasWidth * 0.1) +
        canvasWidth * 0.1,
      yPosition:
        Math.random() * (canvasHeight * 0.9 - canvasHeight * 0.1) +
        canvasHeight * 0.1
    })
  );
}

Since the squares array is populated we'll need to update the render function to determine the updated values for each Square instance in the squares array. Let's use the forEach method provided by the Array object to update each element's values with the movement function, then drawing the results on the canvas. Each Square instance will draw on top of the last one, so the last element in the array will be drawn on top of all the previous elements.

function render() {
  context.fillStyle = "lightsalmon";
  context.fillRect(0, 0, canvasWidth, canvasHeight);
  squares.forEach(square => {
    movement(square);
    context.save();
    context.fillStyle = "salmon";
    context.translate(square.xPosition, square.yPosition);
    context.rotate(square.rotate);
    context.fillRect(
      -square.width / 2,
      -square.height / 2,
      square.width,
      square.height
    );
    context.restore();
  });
  window.requestAnimationFrame(render);
}

That should be it! Now all the squares will animate across the canvas and reset their position when they go off screen. See the results in the pen below :D

Canvas 101: Rotating Shape

Brian Montana — Wed, 24 Jul 2019 18:55:54 +0000

Never built anything in canvas before?! This is perfect for ya!

Let's start with a few concepts of setting up and using the Canvas API. We can think of Canvas as a programmable etch a sketch that you erase and draw every time at a fraction of a second.

We can setup the first few lines of code in HTML, CSS, and JavaScript. We'll use CodePen because it's an easy way to jump in and start building with Canvas. You'll create a new pen, set CSS to normalize, add <canvas id="canvas"></canvas> to the HTML, and add html { overflow: hidden; } to CSS.

Now we can get into building with Canvas, breaking down each step.

const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
let canvasWidth = canvas.width = window.innerWidth;
let canvasHeight = canvas.height = window.innerHeight;

We'll store a reference to the HTMLCanvasElement with const canvas = document.querySelector("#canvas"); this will let us access properties and methods to start drawing. const context = canvas.getContext("2d"); reaches into the canvas HTMLCanvasElement to return the context of the canvas to draw. canvasWidth and canvasHeight are using the properties of the window to apply the width and height to the canvas.

First let's build the render function to set the color for the context then draw a shape fillRect() as the background.

function render(){
  context.fillStyle = 'lightsalmon';
  context.fillRect(0, 0, canvasWidth, canvasHeight);
}

Next we can construct a class for a shape, let's make it a Square ◻️ and give it these properties in the constructor { width, height, rotate, xPosition, yPosition }. We'll deconstruct the incoming object in the constructor and set default values. After making the Square class let's make an instance of Square and set some properties.

class Square {
  constructor({
    width,
    height,
    rotate = 0,
    xPosition = canvasWidth / 2,
    yPosition = canvasHeight / 2
  }) {
    this.width = width;
    this.height = height;
    this.rotate = rotate;
    this.xPosition = xPosition;
    this.yPosition = yPosition;
  }
}

const square = new Square({width: 50, height: 50});

Now that we have the Square class and an instance of it created. We can start to add it to the render method. So let's step back into it and do a few important steps. The context.save() method will allow us to save the transformation, specific attributes, clipping, etc. Allowing you to place multiple shapes in the drawing context of canvas and context.restore() will reinstate the state from context.save().

function render() {
  context.fillStyle = "lightsalmon";
  context.fillRect(0, 0, canvasWidth, canvasHeight);
  context.save();
  // Add styling for square in the context here!
  context.restore();
}

Nothing is going to change when setting this up but it will allow us to start building in the shapes and styles in the commented section! So let's add a darker color to next draw context context.fillStyle, set the context transformation matrix with context.translate(), context.rotate(), then draw in the context with context.fillRect().

function render() {
  context.fillStyle = "lightsalmon";
  context.fillRect(0, 0, canvasWidth, canvasHeight);
  // animation method
  context.save();
  context.fillStyle = "salmon";
  context.translate(square.xPosition, square.yPosition);
  context.rotate(square.rotate);
  context.fillRect(-square.width/2, -square.height/2, square.width, square.height);
  context.restore();
  // requestAnimationFrame
}

Awesome! You drew a shape in the canvas... now let's animate it! We'll create a movement method to increment the rotation and position of the square. The transformation matrix property rotate is a value of 0 to 1; 1 represents 360 degrees. Where we place the movement method to manipulate the square properties will be very important.

function movement(shape) {
  shape.rotate += 0.01;
  shape.xPosition += 0.1;
}

Since we have the movement method, let's start by building it into the render method. The most important thing is we need to make sure we're not constantly updating the context transformation matrix every time movement method occurs. So context.save makes sure that doesn't happen and context.restore applies the initial state again. The last thing we'll do it use the requestAnimationFrame method so we're only calling the render method every 60 frames a second :D

function render() {
  context.fillStyle = "lightsalmon";
  context.fillRect(0, 0, canvasWidth, canvasHeight);
  movement(square);
  context.save();
  context.fillStyle = "salmon";
  context.translate(square.xPosition, square.yPosition);
  context.rotate(square.rotate);
  context.fillRect(-square.width/2, -square.height/2, square.width, square.height);
  context.restore();
  window.requestAnimationFrame(render);
}

window.requestAnimationFrame(render);

There we go! The square is slowly rotating and flying off the canvas! You can check out the final version on CodePen :D

Web Animation API-llusion of Life

Brian Montana — Wed, 26 Jun 2019 19:21:52 +0000

12 Basic Principles of Animation

Let’s begins with the basics of animation from The Illusion of Life by Frank Thomas and Ollie Johnston, who worked at Disney as animators, they defined the foundations of animation in 12 concepts.

Squash and Stretch:
Giving a physicality to elements so the motion is dictated in a consistent state of physics; realistic or imaginative. Pulling and pushing a visual, sometimes bouncing.

Anticipation:
Preparing a user for a change in visual state or large shift in presentation. Signaling through light motion before a bigger action happens.

Staging:
A clear state or direction for the user on what is happening, easy to identify at a quick glace. Reference to theater or spotlight focus on a component.

Pose to Pose or Straight Ahead:
Building the key frames by programming the transition between them so it feels natural in the product.

Follow through:
Components with multiple parts can react to the motion by continuing and snapping back when the component breaks into place.

Slow in & Slow out:
Easing in or out of an animation, changing the value’s over time to enter with a lower value over a longer time or enter faster with a lower value. Visualized as a graph with Y of time and X as value.

Arcs:
Giving the entrance or exit of a component a curved path or change in positioning from start to finish, giving it personality.

Secondary Action:
Action that reacts to an entrance or exit. Component entering collides with another, the content inside responds by moving too but at a staggered or reduced motion.

Timing:
Slow actions when a user is required to wait for a server response(or related scenarios) and faster actions when components/data are being populated.

Exaggeration:
Making the component’s animation larger than life to call attention or show it’s purpose sometimes giving it scale, extra squash/stretch, etc.

Solid Drawings:
3D can give weight and prominence to components when animating.

Appeal:
Define an physical environment for the components to react in when determining gravity, weight, movement, dimension, etc to get users engaged and directing them around the product. Makes components appear interesting.

The video shows the visuals of animations by giving a cube personality through all of the rule sets.

The illusion of life from cento lodigiani on Vimeo.

Here are some CSS animations that cover the basic principles of animation, squishy squishy buttons!

Building basic animations principles concepted by Disney Studios

Motion, when defined consistently in visuals will convey the intentions of the work presented to the viewer/audience. These concepts can be built in any medium that includes a time component: video, animation, motion design, games, web, apps, music video, etc.

Web Animation API (WAAPI)

Allows for a synchronizing and timing of websites for animating DOM elements. The Timing Model and Animation Model are combined in this API so browsers have a common language for animations.

A few stumbles for translating animations from CSS to WAAPI. Avoid pseudo element animations and focus on the component/element level of animation. Be aware of how the animation impacts elements it’s applied to by testing different presentations and states. Static animations that maintain a component’s integrity when applied don’t need to use WAAPI, if it doesn’t change a lot keep it in CSS. WAAPI requires a polyfill for newer features but you can use the first implementation in Chrome and FireFox. Later features are in the polyfill and very much worth trying.

Reasons why you want to consider WAAPI. If there’s a need to update the animation on the fly with randomized/generated values, this is perfect. You won’t need bloated SCSS/Sass mixins and functions that generate a lot of code. Building out an animation timeline that needs dynamic responses based on user input. WAAPI still uses the benefits of CSS performance optimization. You can handle animations in JS without statically setting up animations in a stylesheet that can’t be updated without JS or changing/updating the stylesheets. Live in the future today.

WAAPI animate method

The first method you can start using is Element.animate(). Let’s break down the key frames and options: element.animate(keyframes, options). keyframes can be an object or array of object key-value pairs for animating element styles.

element.animate([arrayFrames] || {objectFrame}, {options}) method creates a new Animation object instance to build out the frames needed for your animation. The frames are positioned according to where they are in the index order [0%, 100%] || [0%, 33%, 66%, 100%] you can define offset in the frame to position the frame in the timeline.

CSS animations:

.class-thing {
  transform: scale(1, 1);
  animation: 4s infinite squash-stretch; 
}

@keyframes squash-stretch {
  92% {
    transform: scale(1, 1);
  }
  94% {
    transform: scale(1.75, 0.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

Web Animation API animations:

element.animate([{
   transform: ‘scale(1, 1)’
 }, {
   transform: ‘scale(1, 1)’,
   offset: 0.92
 }, {
   transform: ‘scale(1.75, 0.5)’,
   offset: 0.94
 }, {
   transform: ‘scale(1, 1)’,
   offset: 1
 }], {
   duration: 4000,
   iterations: Infinity
 });

Moving the start of the animation from CSS portions that might not cascade properly in larger products into the JavaScript help with unique and componentized approach to motion design in web/apps. A big thing to note is you need to use the same styles frame to frame for the first implementation of WAAPI, this issue gets resolved in the polyfill and next implementation.

This can throw an error! ACK!

element.animate([{
   transform: ‘scale(1, 1)’,
   //The backgroundColor isn't in any other frame and will throw an error with WAAPI, careful!
   backgroundColor: 'red'
 }, {
   transform: ‘scale(1, 1)’,
   offset: 0.92
 }, {
   transform: ‘scale(1.75, 0.5)’,
   offset: 0.94
 }, {
   transform: ‘scale(1, 1)’,
   offset: 1
 }], {
   duration: 4000,
   iterations: Infinity
 });

.animate Options

Check out the animate method options at MDN or the W3C spec, version one is currently working in a few browsers but recommend using the polyfill for better feature support. I’ll note a few issues with options in the first implementation that are/will be resolved in future updates and currently with the polyfill. Can’t access animate options after construction but you will be able to with element.animate(frames, options).effect.timing. Delay evaluates 1000 and '1000' the same in Chrome and FF but duration only accepts integers.

Multiple Animations

Building out multiple animations dynamically using JS. You can see in the example the delay is built to stagger the animations and the delay is updated when the user clicks an image and it resets the animation to the start. When updating the animation frames they don’t overwrite the entire frame but the property.

The images fly in from the side and when finishing the animation a class is removed and you can control the timing on the NodeList of images while resetting or updating the options and frames dynamically!

Thanks for reading and if there’s anything I should update let me know. I’ll be exploring WAAPI even more :D
Sources/credit:

Rachel Nabors — Alice in Web Animation Land
Val Head — What Disney’s Classic Animation Principles Could Teach Web Designers
Daniel C Wilson — Animations Intro
Web Animation API — web-animations-js
W3C — Web Animation Spec