SVG and Canvas Graphics in Angular 2

Posted on by Tero Parviainen

Most Angular applications are built using good old HTML and CSS. But it just so happens that HTML is only one of the four main rendering pipelines made available on the web platform, the three other ones being SVG, the 2D Canvas, and the 3D WebGL Canvas.

These alternative rendering technologies can be very useful when you are building something highly visual. Icons, charts and other data visualizations, mapping apps, and games are all examples of things that can be difficult to build using just HTML, but relatively easy to accomplish with SVG or Canvas.

In this guide I will describe how you can incorporate SVG and 2D Canvas graphics into Angular applications, and how you can avoid potential problems along the way. I will also describe how to add motion to SVG and Canvas graphics by animating them. We will look at the various options available and learn about their strengths and weaknesses.

Read more →


Additive Synthesis And the Harmonic Series

Posted on by Tero Parviainen

Sine waves are simple things and provide a nice entry point to learning audio signal processing. So far we've been able to discuss things like frequency and amplitude using nothing but individual sine wave oscillators.

But the thing is, a solitary sine wave is not very interesting to listen to. It's a blank slate, devoid of any color, character, or drama.

Things start to get much more interesting when we have multiple sine wave oscillators at our disposal. What we can do is combine them to produce more complex sound waves. This technique is called additive synthesis.

Read more →



What Is the Web Audio API?

Posted on by Tero Parviainen

Using the Web Audio API you can create and process sounds in any web application, right inside the browser.

The capabilities of the Web Audio API are governed by a W3C draft standard. It was originally proposed by Google and has been under development for several years. The standard is still being worked on, but the API is already widely implemented across desktop and mobile browsers. It is something we can use in our applications today.

Read more →


Controlling Frequency and Pitch

Posted on by Tero Parviainen

In the first article we constructed sine wave oscillators that had one particular frequency: 440Hz, or the A4 standard note. In this article we'll see how we can vary the frequency and how this results in different audible pitches.

Read more →