# Creative Coding: Making Visuals with JavaScript | Domestika

> A course by Bruno Imbrizi · Web & App Design · Beginner
> 21 lessons (2h 42m) · 97% of the 1224 student ratings are positive

Experimenting with creative coding never gets boring—there’s always something to explore, new techniques to learn, or new images to create. For creative coder Bruno Imbrizi, it’s an opportunity to merge his interests with motion graphics and visuals with programming. He has worked for both small agencies and well-known brands including Dell, Adidas, and Universal Music. 

In this course, Bruno shares his expertise to help you create engaging visuals with code. Explore the fundamentals of programming and learn how to draw with creative coding in JavaScript. 

Want to take your knowledge of coding further? Check out Bruno’s second course, [Creative Coding 2.0 in JS: Animation, Sound, & Color](https://www.domestika.org/en/courses/3862-creative-coding-2-0-in-js-animation-sound-color) to discover more advanced techniques for creating coded compositions with color, movement, and sound.

## Who is this online course for?

This course is for anyone with an interest in programming and learning to create visuals through code.

## What is this course's project?

Design a series of creative visual compositions that can be implemented on a web browser using code.

## Requirements and materials

Basic math skills are recommended. 

Basic math skills are recommended. You will need a computer with Node.js, as well as access to a web browser, and text editor.

Operating Systems:

⦁Linux
⦁SmartOS
⦁macOS 10.7 or higher
⦁Windows 2008 or higher

System Requirements:

⦁4GB RAM
⦁10GB free space

## Content

### Introduction

Welcome to this Domestika course! My name is Bruno, I’m a creative coder and I’m going to give you an introduction to coding from the perspective of someone who loves creating visuals.

### Fundamentals

In this unit, you will learn the basics of coding starting from an empty file. I will give you an overview of fundamental programming concepts such as variables, functions, arrays, and loops, always through examples and drawing with code. Then I'll show you how to migrate to a more flexible environment for sketching in preparation for the next units.

### Sketch Transform

In this unit, we’ll create a new sketch using canvas transformations: translation, rotation and scale. We’ll also use a bit of trigonometry and learn how to install a library of utility functions.

### Sketch Agents

In this unit, we’ll create an animated sketch with agents moving randomly around the canvas. We’ll also learn how to draw lines between them based on their proximity and how to export the animation as a video file.

### Sketch Noise

In this unit we’re going to revisit the grid, use noise to generate randomness ad learn how to add a panel with sliders to tweak our sketch in real time.

### Sketch Type

In this unit, you will learn to work with text, about asynchronous functions, and how to read color values from the pixels of our canvas.

## Audio and subtitles

**Audio:** English, Spanish (Latam), French, Italian, Portuguese, Turkish

**Subtitles:** Spanish, English, Portuguese, German, French, Italian, Polish, Dutch, Turkish

[Creative Coding: Making Visuals with JavaScript](https://www.domestika.org/en/courses/2729-creative-coding-making-visuals-with-javascript)