Creative Coding 2.0 in JS: Animation, Sound, & Color
Drawing a Skewed Rectangle
A course by Bruno Imbrizi , Creative Coder
About the video: Drawing a Skewed Rectangle
Overview
“In this lesson, our goal is to draw a skewed rectangle and for that, you will need a bit of trigonometry. I will show you how to do it!”
In this video lesson Bruno Imbrizi addresses the topic: Drawing a Skewed Rectangle, 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
“ Drawing a Skewed Rectangle Our goal is to draw a skewed rectangle. We need to move the corners according to an angle. For that, we need some trigonometry. We'll hide our rectangle for a moment and comment out this chunk of code. To explain this next part, I want to draw a single line. Starting with context. beginPath();, then, context. moveTo(0,0);, and then lineTo(200,0);. Let's put the 0, 0 back in the middle of the canvas and comment out the second context.translate. I want you to imagine this line inside a circle. The centre of the circle is at 0, 0 and the radius of the circle is 200...”
This transcript is automatically generated, so it may contain mistakes.
Course summary for: Creative Coding 2.0 in JS: Animation, Sound, & Color
-
Category
3D & Animation, Web & App Design -
Areas
JavaScript, Motion Graphics, Multimedia, Programming

Bruno Imbrizi
A course by Bruno Imbrizi
Bruno Imbrizi is a Brazilian-born creative coder based in London, England. He studied graphic design and began his career putting the skills and knowledge he’d learned into practice. Eventually, he combined his talent for design with another of his passions - coding.
With over 10 years of experience, he’s worked at agencies, design studios, production companies, and well-known brands including Dell, Adidas, and Universal Music. He’s been featured in online publications such as WIRED, and Londonist and won multiple awards including the Adobe Cutting Edge Award and FITC Best Digital Installation.
- 99% positive reviews (175)
- 19,618 students
- 28 lessons (2h 47m)
- 20 additional resources (0 files)
- Online and at your own pace
- Available on the app
- Audio: English
- English · Spanish · Portuguese · German · French · Italian · Polish · Dutch
- Level: Beginner
- Unlimited access forever