Creative Coding 2.0 in JS: Animation, Sound, & Color

Overview

“In this lesson, we're going to wrap things up with a clipping mask. I will show you how to frame the pattern inside another shape.”

In this video lesson Bruno Imbrizi addresses the topic: Clipping Mask, which is part of the Domestika online course: Creative Coding 2.0 in JS: Animation, Sound, & Color. Explore advanced coding techniques to produce unique visuals that combine color, movement, and sound in JavaScript.

Partial transcription of the video

“I like the pattern created by these rectangles, but I think there's something missing. And this is an opportunity to look into a few more topics. One idea I had while experimenting with this sketch was to frame these rectangles inside another shape. We can start by drawing a triangle. At the bottom of the render function, after we draw all the rectangles, we start a new block of code with context.Save and contacts.Restore. We're going to move the pen to the center of the canvas with context.Translate. width times 0.5 and height times 0.5. Then we start drawing a new shape with context.Begin...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: Creative Coding 2.0 in JS: Animation, Sound, & Color

• Level: Beginner
• 99% positive reviews (178)
• 19854 students
• 6 units
• 28 lessons (2h 47m)

• Category

  3D & Animation, Web & App Design

• Areas

  JavaScript, Motion Graphics, Multimedia, Programming