At this age and time that we live in, coding is simply invaluable. It has the power to uplift your career, your future prospects and even your intellectual capacity. Computation is driving one of the largest capital expansions in history and there has never been a better time to learn coding than now. 

But learning how to code can be challenging. It is hard to find good resources that are relevant, practical and engaging at the same time. This course teaches coding from scratch using the vastly popular programming language JavaScript. Using JavaScript and a programming library called p5.js, you will learn how to code in a highly engaging and visual manner.

Find out more at: www.codingforvisuallearners.com

Coding for Visual Learners: Learning JavaScript with p5.js

##  Rotate & Translate

At this point, we are almost ready to work on our final project; an interactive game built using JavaScript and p5.js! Before we do that, I would like to demonstrate couple more useful p5.js functions to extend the realm of things that we can build.

Notice how we can draw shapes on the screen using our current knowledge, but we can't really transform them like rotating them around their center. That's a big blocker on the kinds of visuals that we can build, so let's learn how to do transformations in p5.js to enhance our abilities.

Having used other kinds of drawing libraries, I should say that doing transformations such as scaling, rotating and translating shapes can be a bit unintuitive in p5.js. Here is an example that demonstrates how to use the p5.js **rotate** function that would allow us to rotate shapes.

function setup() { 
  createCanvas(800, 300);
  rectMode(CENTER);
} 

function draw() { 
  background(220);
  rect(width/2, height/2, 50, 50);
  rect(width/2+50, height/2+50, 50, 50);
}

codemirror

Currently, we are drawing two rectangles that are diagonal to each other. Let's make use of the **rotate** function to see what's going to happen.

function setup() { 
  createCanvas(800, 300);
  rectMode(CENTER);
  noStroke();
} 

function draw() { 
  background(220);
  fill(237, 34, 93);
  rotate(5);
  rect(width/2, height/2, 50, 50);
  rect(width/2+50, height/2+50, 50, 50);
}

You will notice that both of the shapes disappeared from the screen. If you were expecting the shapes to move by only 5 degrees, this must be a confusing result. This happens because the default units that **rotate** function works within p5.js is _radians_. We can make this function work using degrees instead by using the **angleMode** function with the **DEGREES** p5.js variable. Make this declaration inside the **setup** function.

```javascript
	angleMode(DEGREES);
```

Now things work in a way that is more or less expected. We can now observe that when we call the **rotate** function, we end up rotating every shape that comes after the function call. 

# Rotate & Translate

At this point, we are almost ready to work on our final project; an interactive game built using JavaScript and p5.js! Before we do that, I would like to demonstrate couple more useful p5.js functions to extend the realm of things that we can build.

Notice how we can draw shapes on the screen using our current knowledge, but we can't really transform them like rotating them around their center. That's a big blocker on the kinds of visuals that we can build, so let's learn how to do transformations in p5.js to enhance our abilities.

Having used other kinds of drawing libraries, I should say that doing transformations such as scaling, rotating and translating shapes can be a bit unintuitive in p5.js. Here is an example that demonstrates how to use the p5.js **rotate** function that would allow us to rotate shapes.

Introducing couple of more p5.js specific subjects like transformations

Coding for Visual Learners

12 - More on p5.js

Rotate & Translate