Revisiting-Concepts-Notations-Software-Art/3.Drawing-with-numbers.md

# Drawing with numbers: Drawing primitives & image manipulation

## Sketch: 3.0 Drawing text

So far, we have mainly dealt with text printed on the console. Pretty 1980 is you ask me. It is an aesthetic (of course) though we can also display text on the preview canvas as well! 

Consider the following sketch using the ```text ``` function.

```javascript
// Drawing text!
const sentence = "YOU ARE MY AMOROUS ENCHANTMENT.: MY KEEN EAGERNESS. YOU ARE MY DEVOTED ENCHANTMENT. MY YEARNING FERVENTLY LIKES YOUR AMOROUS PASSION. MY EAGERNESS TENDERLY YEARNS FOR YOUR PASSION." 

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background("yellow");
  text(sentence);
}
```
What do you observe when you run the sketch? 

### 📚 Exercises

To complete the following exercices, have a loot at the section Typography in the [p5js reference](Reference: https://p5js.org/reference/).

1. Modify the sketch 3.0 and enlarge the text's font size.

2. Create a "text box" in which the text can be displayed in full, that is, wrapped in the box.

3. Can you change the font of the text? 

4. How about the font colour?

5. And the text's alignment (left, center, right)?

6. Homework: Using p5js' typography functionality, write Love Letters on the canvas resembling the original letter from the MUC.

## Sketch: 3.1 Simple colour animation

Let's play with colours with the following sketch.

```javascript

// Colour animation!
const sentence = "I DON'T LIKE PIZZA\n(I just don't)";

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background("yellow");
  textSize(45);
  textAlign(CENTER, TOP);
  noStroke();
  fill(0, 0, 255);
  text(sentence, 800/2, 800/2);
}
````

Remember sinusoidal waveforms in your Mathematics class in school? Well they are fabulous! Sinus and Cosinus are great trigonometric functions to play with to produce simple animations. Sinusoidals (sinus or cosinus) have interesting properties that can easily be parametrised.

<p align="center">
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/sinusoidal.png"/>
</p>

In our p5js environment there is a ```sin``` function that can be used along a special ```frameCount``` counter that literally keeps track of the number of frames that have been drawn on the canvas. By inputting ```frameCount``` to the ```sin``` function it will return a real number between -1 and 1 (see figure above). In fact this real number will “oscillate”  between -1 and 1, following the sinus waveform. 

A statement like to one below will roughly oscillate between 0 and 255 each time ```frameCount``` is incremented.

```javascript
let osc = 128 + sin(frameCount) * 127;
```

### 📚 Exercises

1. Can you explain why there is a 128 and a 127 in the statement above?

2. Modify sketch 3.1 and change the colour of the text with the ```osc``` variable.

3. What do you observe? How can the speed of colour change be slower? In other words, is there a way to slow down the ```frameCount``` inputted in the ```sin``` function?

## Sketch: 3.2 Keeping track of clicks with arrays and animate shapes

In sketch 1.1 we drew circles on the canvas when we pressed the mouse. One problem we had then had to do with the background remember? The ```background``` function was erasing our circles. 

Now that we understand arrays we can fix this problem by "recording" the location where the mouse was pressed. To do so well will produce a "record" of each mouse press and add it to an array. This "record" will be a [p5js vector](https://p5js.org/reference/#/p5/createVector) having a X and Y coordinate.

```javascript
// Capture mouse pressed and record locations!

var circles = [];					// this is the array in which we will add p5js vectors

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background("yellow");
  
  if(mouseIsPressed) {
    let v = createVector(mouseX, mouseY);		// create a vector with the current mouseX and mouseY coordinates
    circles.push(v);							// add the vector to our array with the "push" function 
  }
  
  // now for each vector in our array, draw a circle at its location
  for(let i = 0; i < circles.length; i++) {
    let c = circles[i];
    circle(c.x, c.y, 10);
  }
}
```

The drawing produced by the sketch looks very much like sketch 1.1 right? 

True. But with this code we can draw more interesting things than we could in sketch 1.1. Since we have a global array (circles) we can access each circle and animate them in different ways, something that was practically impossible in sketch 1.1.

### 📚 Exercises

1. Modify sketch 3.2 and make the circle oscillate (i.e. changing each circle's X and Y position) using the ```sin``` function and p5js'  ```frameCount```

2. Add randomness to your circles' oscillation so that each individual circle moves slightly differently than its neighbours. 

## Sketch: 3.3 Image

With p5js we can also work with images. The way we are going to work with images will be to upload them to our online environment. The way upload images is by opening the "Sketch files" and the left side of the page and select upload files. 

<p align="center">
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/upload.png"/>
</p>

When the image is uploaded, the way we can display it on the canvas is as follow (for this sketch I am using [this image](https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/src/branch/main/img/alan-turing.png)):

```javascript
// Image!

var alan_img;       // global image variable
var img_x, img_y;   // coordinates of the image on the canvas

// special function that loads the image to our global variable
function preload() {
  alan_img = loadImage("alan-turing.png")
}


function setup() {
  createCanvas(800, 800);
  // to draw the image at the center of the canvas
  // we need to offset the image coordinates with 
  // the half of image's width and height 
  img_x = 400 - alan_img.width/2;
  img_y = 400 - alan_img.height/2;
}

function draw() {
  background("yellow");
  // draw the image as the specified coordinate
  image(alan_img, img_x, img_y);
}
```

Now this is rather simple. You can of course play with the coordinates of the image as we did with our circles above but have a look the Image section in the [p5js reference](Reference: https://p5js.org/reference/) and consider the simple manipulations you can use on your image.

### 📚 Exercises

1. Modify sketch 3.3 so that the "alpha" channel of the image changes when the mouse is moved to the right (X coordinate). The ```tint``` function will help you do that.

2. Now do the same for the B channel (RGB) when the mouse is moved up and down (Y coordinate). Again, the ```tint``` function will help you do that.

3. There is a way to save your canvas as an image with p5js' ```saveCanvas``` function. Add this functionality to your sketch and save it when the key ```s``` is typed.