Art Coding Design Web

Creative Coding: Noise

I love the wave-like patterns that are generated by adding noise to the <canvas>. I played around with the different variables (rotation, frequency, amplitude, size, and the number of elements), and it made these wonderful works of art.

I’d love to be able to print some of these so that I could hang them up on my wall.

Coding Setup

Creative Coding: Setting Up on Windows

The Canvas and WebGL workshop that I’m taking right now is taught using macOS, so the course assumes that I can access some Unix tools and commands in the dev environment. Since Windows isn’t built on top of BSD or Linux, I have to do a bit more work to get up and running.

Install Windows Subsystem for Linux

Windows Subsystem for Linux or WSL is the best way to get a Linux environment running on Windows. It’s a lightweight virtual machine that runs unmodified Linux binaries on top of Windows. It’s so fast that it doesn’t feel like I’m using a VM at all.

See how quickly WSL boots up. It’s magic.

There are two versions of WSL, so I made sure to get WSL 2 because it’s 2-5x faster when it comes to IO operations like git clone and npm installβ€”commands that I’ll often be using!

Install Remote – WSL Extension on VSCode

The Remote – WSL extension on VSCode forces all the commands to run in the Linux VM. It makes sure that I’m interacting with Linux all the time while I’m in VSCode. So even though the editor is running on Windows, programs like Git or Node are all running in Linux.

VSCode with the Remote – WSL extension.

Bonus: Install Windows Terminal

I’m a fan of good-looking terminals, and the built-in terminal on macOS is beautiful. It looks modern, and it supports tabs and theme customization. The built-in Command Prompt on Windows, on the other hand, looks quite ancient.

Fortunately, Windows Terminal is available in the Microsoft Store, and it supports tabs, vertical splitting, and even emojis. I don’t know why this isn’t included in the OS in the first place!

Windows Terminal with vertical splitting.

Art Coding Design Web

Creative Coding: Randomizing Circles

I’m learning how to draw randomized shapes using the Canvas API right now and love that I can create beautiful images by simply randomizing the xy-coordinates, the radius, and the color (nice-color-palettes is an excellent source of pleasing colors).

I can imagine this being useful for infographics, too. The color could represent a data point (like an app), the size could represent a property (like how often it tracked you or how much data it uses), and the xy-coordinates would be randomized in the image.

Art Coding Design Web

Hello, Creative Coding

Now that I’m a full-time designer, most of my days are either spent planning projects in Asana or working on them on Figma. I hardly ever do any programming nowadays, and I miss the feeling of writing code and bringing websites to life.

I’ve been thinking about small programming projects that I could do in my spare time, and I recently ran into a creative coding course on Frontend Masters. I’ve spent a lot of time making websites and creating user interfaces, but I never thought about using programming to create art. The visual aspect of it is enticing, and I love the fact that it’s can be a creative outlet for me.

I’m early in the course, and right now, I’m going through the Canvas API. We’re on the topic of creating grids at the moment, and I’m excited about the idea of creating digital art that I can actually hang on the wall.

I’m enjoying it so far, and I’m thrilled to continue making art through code. I’ll make an effort to blog as I go through the course!