# Create a Spiral Drawing with JavaScript and canvasSketch

Learn how to code a spiral drawing using the canvasSketch library in JavaScript. This tutorial provides a step-by-step guide with explanations.

The canvasSketch library in JavaScript allows you to create interactive visuals within your web browser. This guide demonstrates how to code a spiral drawing using canvasSketch. We’ll cover setting up the environment and implementing the spiral effect.

## CanvasSketch

We will be using CanvasSketch to organise our code. It is a collection of tools, modules and resources for creating generative art in JavaScript and the browser.

## Setting up

Import the necessary libraries

- canvas-sketch
- canvas-sketch-util/math
- canvas-sketch-util/random

## Finding the canvas center

Calculate the center coordinates (x and y) by dividing the width and height by 2 and storing them in variables like cx and cy.

## Shaping the rectangle

Define the width (w) and height (h) of the rectangles as a percentage of the canvas size.

## Creating the spiral

Use a loop to iterate through a set number of rectangles (num).

Inside the loop:

- Calculate the angle (angle) for each rectangle’s placement using
`math.degToRad(360 / num)`

. - Find the x and y coordinates (x and y) of the rectangle’s center using the angle, radius, sine, and cosine functions.
- Use
`context.save()`

to store the current drawing state. - Translate the origin to the center of the rectangle using
`context.translate(x, y)`

. - Rotate the context by the negative of the calculated angle using
`context.rotate(-angle)`

. - Scale the rectangle horizontally with a random value between 1 and 3 using
`context.scale(random.range(1, 3), 1)`

. - Define the rectangle’s shape using
`context.rect`

and offset it slightly from the center. - Fill the rectangle with black using
`context.fill()`

. - Restore the previously saved drawing state using
`context.restore()`

.

**Check out this other post where I explain save and restore** : Understanding save and restore

## Key concepts

### Radians and Degres

While angles can be measured in degrees (e.g., 45 degrees), trigonometry functions typically work with radians. Radians are a unit of angular measurement based on the ratio of the arc length to the circle’s radius. There are 2π radians in a full circle (360 degrees). The `math.degToRad()`

function in canvasSketch helps us convert degrees to radians for compatibility with the trigonometric functions.

### Calculating the angle

Inside the loop, we calculate the angle (`angle`

) for each rectangle’s placement. The formula is `angle = math.degToRad(360 / num) * i`

, where `i`

represents the current iteration number (0 to num-1). This essentially divides the full circle (360 degrees) into `num`

equal angles in radians.

### Leveraging Sine and Cosine

Now comes the magic! We use the calculated angle (`angle`

) with the sine (`sin(angle)`

) and cosine (`cos(angle)`

) functions to determine the x and y coordinates of the rectangle’s center. These coordinates are relative to the center of the canvas (which we might have stored in variables like `cx`

and `cy`

).

**X-Coordinate**: We calculate the x-coordinate by multiplying the radius with the cosine of the angle (`radius * cos(angle)`

). As the angle increases, the cosine value oscillates between 1 (positive x-axis) and -1 (negative x-axis), creating the horizontal movement of the rectangles in the spiral.**Y-Coordinat**e**: Similarly, the y-coordinate is calculated by multiplying the radius with the sine of the angle (`radius * sin(angle)`

). The sine value oscillates between 1 (positive y-axis) and -1 (negative y-axis), resulting in the vertical movement of the rectangles, forming the spiral pattern.