diff --git a/1.Basics.md b/1.Basics.md
index 9fd961c..4eff04c 100644
--- a/1.Basics.md
+++ b/1.Basics.md
@@ -87,7 +87,7 @@ function mouseMoved() {
1. Modify sketch 1.1 so that a circle is draw on the screen at the location where the mouse is each time it moves. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
-2. What do you observe with the circle being drawn on the screen? Can you modify the sketch so that a trace of the movement on the mouse stay on the screen and erase this trace when the mouse is pressed?
+2. What can you observe with the circle being drawn on the screen? Can you modify the sketch so that a trace of the movement on the mouse stay on the screen and erase this trace when the mouse is pressed?
## 🤔 What are (x,y) coordinates (in p5js)?
diff --git a/2.Ghost-Writing.md b/2.Ghost-Writing.md
index 9e5c207..a78f192 100644
--- a/2.Ghost-Writing.md
+++ b/2.Ghost-Writing.md
@@ -104,7 +104,7 @@ i++
### 📚 Exercise
-1. Modify skecth 2.1 so that every one listed in the ```NAMES``` array have all the activities listed in the ```ACTIVITIES``` array be printed out on the console when key ```'x'``` is typed (this is called a nested loop!). The console output should look something like:
+1. Modify sketch 2.1 so that every name listed in the ```NAMES``` array have all activities listed in the ```ACTIVITIES``` array printed out on the console when key ```'x'``` is typed. The console output should look like this:
```
Karin likes to play piano
@@ -129,7 +129,7 @@ Typically a random number is produced with the ```random``` function:
```javascript
random(X); // generates a random number between 0 and X
````
-Here is an example:
+Here is an example of how to use the function with a variable:
```javascript
let random_number = random(10); // assign a random number between 0 and 10 to variable random_number
````
@@ -138,17 +138,17 @@ Rudimentary indeed, but there are many things we can build with this simple func
### 🤔 How to select a random element in an array?
-Since we access elements of an array with indices, we can generate a random index between 0 and the length of an array so to select a random element in it.
+Since we access elements of an array with indices, we can generate a random index between 0 and the length of an array to select a random element in it.
-The first problem we have to solve is that the ```random``` functions generates a "real" number (ex: 4.993319470244624, 1.9486631456631776, 7.1841821754535813, etc.) while the indices of an array are "integer" numbers (5, 2, 7, etc.).
+The first problem we must solve though is that the ```random``` functions generates a "real" number (ex: 4.993319470244624, 1.9486631456631776, 7.1841821754535813, etc.) while the indices of an array are "integer" numbers (5, 2, 7, etc.). We thus need to round the "real" numbers produced by random to get an “integer” (4.993319470244624 -> 5, 1.9486631456631776 -> 2, 7.1841821754535813 -> 7).
-We thus need to round the "real" numbers produced by random (4.993319470244624 -> 5, 1.9486631456631776 -> 2, 7.1841821754535813 -> 7). We do this with the ```floor``` function:
+We do this with the ```floor``` function that simply rounds a number down (4.993319470244624 -> 4) to the nearest integer. Here is an example:
```javascript
let random_number = floor(random(10)); // assign a random integer number between 0 and 10 to variable random_number
````
-With this "fix" we can generate a random index (integer) between 0 and the length of a given array.
+With this we can generate a random index (integer) between 0 and the length of a given array. Below is an example that picks a random name in the ```NAMES``` array.
```javascript
var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
@@ -158,7 +158,7 @@ let random_index_names = floor(random(NAMES.length));
print(NAMES[random_index_names]);
````
-This will indeed print a random name in the array ```NAMES``` each time it is executed.
+This snippet of code will indeed print a random name in the array ```NAMES``` each time it is executed.
But what if we would like to print a random activity from the ```ACTIVITIES``` array as well?
@@ -172,11 +172,13 @@ let random_index_activities = floor(random(ACTIVITIES.length));
print(NAMES[random_index_names] + " likes to play " + ACTIVITIES[random_index_activities]);
````
-This will work, but it is not "elegant"... We have here two variables (```random_index_names```, ```random_index_activities```) that are assigned a random value with the respective arrays' length (```NAMES.length```, ```ACTIVITIES.length```). What if we had many arrays? We would need as many variables as there are arrays to select from right? The code would be very long!
+This will work, but it is not "elegant"... Why?
-To remediate this tedious need to write too much code, how about writing a function that selects a random element from an "generic" array?
+Because we have here two variables (```random_index_names```, ```random_index_activities```) that are assigned a random value with the respective arrays' length (```NAMES.length```, ```ACTIVITIES.length```). What if we had many arrays? Then we would need as many variables as there are arrays to select from right? Consequently, the code would be very long!
-Here is an example of a custom "choice" function taking an array as input and returns a randomly selected elements from the array:
+To remediate this tedious need to write too much code, how about writing a custom function that selects a random element from an "generic" array? Writing custom functions is central in writing programs that are structured and “modular.”
+
+Here is an example of a custom ```choice``` function taking a “generic” array as input ```array_to_choose_from``` and returns a randomly selected elements from this array:
```javascript
// function selecting a random element from an array
@@ -186,7 +188,9 @@ function choice(array_to_choose_from) {
}
````
+Now with this custom ```choice``` function it is rather simple to select random names or activities from the ```NAMES``` and ```ACTIVITIES``` arrays. In fact, we can start inventing sentences whose constituting phrases or words can be randomised.
+Here is an example:
```javascript
// Array + Index + Randomness!
@@ -219,13 +223,13 @@ function keyTyped() {
### 📚 Exercise
-1. Modify sketch 2.2 by adding a day of the week when an activity is taking place. For example:
+1. Modify sketch 2.2 by adding a day of the week when an activity is taking place. For example, the output could look like this:
```
David likes to play records with Karin on Tuesday
```
-2. Come up with your own random sentences! Remember you can add as many arrays to select from as you want and most languages are structured "systems" having nouns, verb, adjectives, adverbs, etc. Here is what I came up with (can you guess what my code looks like?):
+2. Come up with your own random sentences! Remember you can add as many arrays to select from as you wish. Most languages are structured "systems" having nouns, verb, adjectives, adverbs, etc. Below is the output of a random sentence generator I came up with yesterday (can you guess what my code might look like?):
```
Laura wears a blue sweater when Sigrid plays tennis
@@ -244,18 +248,22 @@ Karin wears a black jacket when Maaike plays chess
So now that we have a better understanding of how arrays, indices, randomness, and functions work, let's write love letters!
-One of the first non-scientific computer program that was ever written is Christopher Strachey's Love Letters program for the Manchester Mark I (so called [Baby](https://content.presspage.com/uploads/1369/1920_themanchestermk1computerbuiltbyextendingthebaby.jpg?10000)). In fact, this computer program (written in 1952 and making use of randomness) is arguably the first art-inspired program! Christopher Strachey was a computer programming pioneer who worked along Alan Turing in the very early days of computing at the University of Manchester. Strachey's story is fascinating. There is a great article about [him and the love letters on Rhizome's Queer History of Computing written by Jacob Gaboury](https://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/). For those who are interested in researching Strachey's work, please have a look at his [papers and correspondences at the Bodleain library's archive](https://archives.bodleian.ox.ac.uk/repositories/2/resources/2561).
+One of the first non-scientific computer program that was ever written is Christopher Strachey's Love Letters program for the Manchester Mark I (so called [Baby](https://content.presspage.com/uploads/1369/1920_themanchestermk1computerbuiltbyextendingthebaby.jpg?10000)). In fact, this computer program (written in 1952 and making use of randomness) is arguably the first art-inspired program!
-Strachey's Love Letters have been studied before. [David Link](http://www.alpha60.de) did a colossal reconstitution of the Love Letter program on a simulator of the Manchester Mark computer. [The works was exhibited circa 2010](http://www.alpha60.de/art/love_letters/). The program doesn't look at all like the code we are writing at the moment! The picture on the right side above (☝️) is from Link's simulator. Early computers did not have the compilers and interpreters we have now (remember compilers and interpreters) and thus the code was written in a rather cryptic way (believe me, way more cryptic than what we are writing).
+Christopher Strachey was/is a computer programming pioneer who worked along Alan Turing in the very early days of computing at the University of Manchester. Strachey's story is fascinating. There is a great article about [him and the love letters on Rhizome's Queer History of Computing written by Jacob Gaboury](https://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/). For those who are interested in researching Strachey's work, please have a look at his [papers and correspondences at the Bodleain library's archive](https://archives.bodleian.ox.ac.uk/repositories/2/resources/2561).
-The program we are about to write in a "modern" computing language (i.e. javascript/p5js) is a modified version of [Nick Montfort](https://nickm.com)'s letter.py source code written in python. Montfort's letter.py was based on Noah Wardrip-Fruin's article ["Digital Media Archaeology."](https://www.degruyter.com/document/doi/10.1525/9780520948518-016/html)
+Strachey's Love Letters have been studied before. [David Link](http://www.alpha60.de) did a colossal reconstitution of the Love Letter program on a simulator of the Manchester Mark computer. [The works was exhibited circa 2010](http://www.alpha60.de/art/love_letters/). The program does not look at all like the code we are writing now! The picture on the right side of the image above (☝️) is from Link's simulator. Early computers did not have the compilers and interpreters we have now (remember compilers and interpreters?) and thus the code was written in a rather cryptic way (believe me, way more cryptic than what we are writing now).
+
+The program we are about to write in a "modern" computing language (i.e. javascript/p5js) is a modified version of [Nick Montfort](https://nickm.com)'s letter.py code written in python (another programming language). Montfort's letter.py was based on Noah Wardrip-Fruin's article ["Digital Media Archaeology."](https://www.degruyter.com/document/doi/10.1525/9780520948518-016/html)
### Analysing Love Letters' structure
-First, let's have a look at love letters to see what they look like. David Link has generated an [archive of simulated letters](http://www.alpha60.de/art/love_letters/archive/muc/).
+First, let's have a look at love letters to see what they look like.
-Here are four examples:
+David Link has generated an [archive of simulated letters](http://www.alpha60.de/art/love_letters/archive/muc/).
+
+Here are five examples:
```
HONEY MOPPET
@@ -318,15 +326,21 @@ MY YEARNING FERVENTLY LIKES YOUR AMOROUS PASSION.
MY APPETITE TENDERLY CHERISHES YOUR BEAUTIFUL WISH.
```
-We can "code" this sentence as follow:
+Are there common words here? Yes, the "MY" and "YOUR".
+
+What about the other words, do they have something in common? Yes. They are nouns, adverbs, verbs, and adjectives. And these have indeed a particular position in each sentence.
+
+We can thus devise a "code" of the sentences as follow:
MY + ```noun``` + ```adverb``` + ```verb``` + YOUR + ```adjective``` + ```noun``` + .
-In fact, we could even add an ```adjective``` before the first ```noun``` as to make it even more "wordy":
+We could even add an ```adjective``` before the first ```noun``` as to make it even more "wordy" yet still valid linguistically speaking:
MY + ```adjective``` + ```noun``` + ```adverb``` + ```verb``` + YOUR + ```adjective``` + ```noun``` + .
-Now consider this sentence, whose structure seems to come up often:
+Are there other types of sentences in the letter above?
+
+Consider this sentence, whose structure seems to come up often:
```
YOU ARE MY AMOROUS RAPTURE.
@@ -342,28 +356,30 @@ There is also this small phrase:
MY KEEN EAGERNESS.
```
-Which can be coded as:
+Which can be "coded" as:
MY + ```adjective``` + ```noun``` + .
-So we have two types of sentences:
-* long form: MY + ```noun``` + ```adverb``` + ```verb``` + YOUR + ```adjective``` + ```noun``` + .
-* short form: YOU ARE MY + ```adjective``` + ```noun``` + . OR MY + ```adjective``` + ```noun``` + .
-In terms of sentences sequencing we notice that:
+So overall we have two types of sentences:
+* 1x long form: MY + ```noun``` + ```adverb``` + ```verb``` + YOUR + ```adjective``` + ```noun``` + .
+* 2x short forms: YOU ARE MY + ```adjective``` + ```noun``` + . / MY + ```adjective``` + ```noun``` + .
+
+Also, in terms of composition or sentences sequencing we can notice that:
1. A letter always starts with a certain opening {HONEY or DEAR or DARLING} + {MOPPET or DARLING or HONEY or LOVE}
2. the short form MY + ```adjective``` + ```noun``` + . always follows the other short form YOU ARE MY + ```adjective``` + ```noun``` + . This short form never follows the long form.
3. short form YOU ARE MY + ```adjective``` + ```noun``` + . is never followed by the same short form YOU ARE MY + ```adjective``` + ```noun``` + .
-4. There are between 4 and 5 sentences (long or short form) per letter
-5. A letter is always complementary closed with YOURS + ```adverb```
+4. A letter comprises between 4 and 5 sentences (long or short form)
+5. A letter is always closed with YOURS + ```adverb```
6. A letter is always signed by MUC (which means Manchester University Computer Department)
+
### Reconstituting Love Letters' algorithm
Now that we have an idea of the structure of Strachey's letters, let's get to work in formalising it's algorithmic generation.
-Luckily, in terms of vocabulary, we can start with Monfort's arrays:
+Luckily, in terms of vocabulary, we can start with Monfort's work that gives the following arrays:
```javascript
// vocabulary
@@ -376,7 +392,7 @@ const verbs = ['KICKS', 'ADORES', 'ATTRACTS', 'CARES FOR', 'CHERISHES', 'CLINGS
```
-Which we can randomly select from with our ```choice``` function we devised earlier:
+We can randomly select from these arrays with our ```choice``` function we devised earlier:
```javascript
// function selecting a random element from an array
@@ -386,11 +402,11 @@ function choice(array_to_choose_from) {
}
```
-With both these elements we can start devising the code of the long form we identified above.
+With both these elements (arrays and ```choice```) we can start devising the code of the long form we identified above.
MY + ```noun``` + ```adverb``` + ```verb``` + YOUR + ```adjective``` + ```noun``` + .
-Let's do this coding with a function again:
+Let's do this coding by devising a custom function again. Let's name it ```long```:
```javascript
// function that randomly generates a long form sentence
@@ -399,9 +415,9 @@ function long() {
}
````
-This will certainly work. Yet I would like to have more variation with the sentences the function returns. At the moment it will always follow the long form structure.
+This will certainly work. Yet I would like to have more variation with the sentences the function returns. As it stands it will always follow the long form structure. Is there a way we can achieve this with injecting some randomness in the structure?
-How about we make ```adjective``` and ```adverb``` non mandatory, meaning they maybe there or maybe not. What I have in mind is something like:
+How about we make ```adjective``` and ```adverb``` non mandatory, meaning they maybe there or not. What I have in mind is something like:
```javascript
// function that randomly generates a long form sentence
@@ -410,7 +426,9 @@ function long() {
}
````
-To decide if an element (```adjective``` or ```adverb```) should be part of the sentence or not we need to write a ```maybe``` function which randomly chooses true or false if the element should be chosen from a given array.
+Notice the ```maybe``` that replaces ```choice```?
+
+Let's write this ```maybe``` function that randomly chooses true or false if an element should be chosen from a given array, which in our case will be adjectives or adverbs.
```javascript
// function that randomly decides if an element from an array should be selected or not
@@ -425,14 +443,15 @@ function maybe(array_to_choose_from) {
}
}
````
+
With this ```maybe``` function we now have a way to diversify the letter's sentences and thus create more variation on our generated long forms.
-How about the short forms then?
+How about the short forms?
YOU ARE MY + ```adjective``` + ```noun``` + .
MY + ```adjective``` + ```noun``` + .
-We can simply write a ```short``` function like:
+We can simply write a ```short``` function like this:
```javascript
// function that randomly generates a short form sentence
@@ -443,7 +462,7 @@ function short() {
And prefix it with YOU ARE MY or MY when we are in the midst of writing the sequence of sentences. This might become clearer below.
-How about the opening? Notice the ```first``` and ```second``` in the vocabulary. These are exactly what we need:
+How about the opening? Notice the ```first``` and ```second``` arrays in the vocabulary. These are exactly what we need:
```javascript
// function that randomly an opening
@@ -452,7 +471,11 @@ function opening() {
}
```
-And the closing in form YOURS + ```adverb```? Simple:
+And the closing?
+
+YOURS + ```adverb```
+
+Simple:
```javascript
// function that randomly a closing
@@ -461,7 +484,7 @@ function closing() {
}
```
-Now we have most of the ingredients in place with the functions ```choice```, ```maybe```, ```long```, ```short```, ```opening```, ```closing``` right?
+Great. Now we have most of the ingredients in place with the functions ```choice```, ```maybe```, ```long```, ```short```, ```opening```, ```closing``` right?
How about sequencing ```long``` and ```short``` forms? Remember what we observed above (i.e. a letter is 4 to 5 sentences long, short form MY + ```adjective``` + ```noun``` + . always follows the other short form, etc.)?
@@ -502,7 +525,8 @@ for(let i = 0; i < 5; i++) {
// the ": MY" can only follow a "YOU ARE MY"
YOU_ARE = true;
}
- } else if(sentence_form == 'long') {
+ }
+ else if(sentence_form == 'long') {
text += long();
// make sure the next sentence is not ": MY"
YOU_ARE = false
@@ -514,11 +538,13 @@ for(let i = 0; i < 5; i++) {
### Putting it all together
-Ok, let's formalise what we have sketched above and write a ```write_letter``` function that returns and actually full fleshed love letter.
+Ok, let's formalise what we have sketched above and write a custom ```write_letter``` function that returns and full fleshed love letter.
```javascript
// function returning a love letter
function write_letter(){
+
+ // the letter's text we will fill in
var text = "";
// write the letter's opening
@@ -569,7 +595,9 @@ function write_letter(){
This function follows the algorithm we wrote above and adds the opening and closing sequence.
-If you followed me during the session you should have a sketch looking more or less like the following, comprising all the functions we wrote. Here the letter is printed when ```x```is typed.
+If you followed me during the session, you should have a sketch looking more or less like the one below comprising all the functions we wrote.
+
+Here the letter is printed when ```x```is typed.
```javascript
// Strachey's Love Letter generator!
@@ -686,7 +714,7 @@ function keyTyped() {
// Reference: https://p5js.org/reference/
```
-The output of our program print something like this:
+The output of our program looks like this:
diff --git a/3.Drawing-with-numbers.md b/3.Drawing-with-numbers.md
index 85a7796..0d80d08 100644
--- a/3.Drawing-with-numbers.md
+++ b/3.Drawing-with-numbers.md
@@ -2,9 +2,9 @@
## 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 window.
+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.
+Consider the following sketch using the ```text ``` function.
```javascript
// Drawing text!
@@ -19,23 +19,23 @@ function draw() {
text(sentence);
}
```
-What do you observe?
+What do you observe when you run the sketch?
### 📚 Exercises
-Consider the section Typography in the [p5js reference](Reference: https://p5js.org/reference/) and try to follow the exercises below.
+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 size.
+1. Modify the sketch 3.0 and enlarge the text's font size.
-2. Modify the sketch further and create a "text box" in which the text can be displayed in full, that is, wrapped in the box.
+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 its colour?
+4. How about the font colour?
-5. And its alignment?
+5. And the text's alignment (left, center, right)?
-6. Homework: Using p5js' typography functionality, write Love Letters on the screen that resemble the original letter from the MUC.
+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
@@ -51,7 +51,6 @@ function setup() {
}
function draw() {
-
background("yellow");
textSize(45);
textAlign(CENTER, TOP);
@@ -61,13 +60,15 @@ function draw() {
}
````
-Remember sinusoidal in school? Well sinus and cosinus are great functions to play with to produce simple animations. Sinusoidals (sinus or cosinus) have interesting properties that can easily be parametrised.
+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.
-In our p5js environment there is a ```sin``` function that can be used along a special ```frameCount``` counter to oscillate between -1 and 1 infinitely. A statement like to one below will roughly oscillate between 0 and 255 each time ```frameCount``` is incremented.
+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;
@@ -79,13 +80,13 @@ let osc = 128 + sin(frameCount) * 127;
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 change be slower?
+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 preview canvas when we pressed the mouse. One problem we had then had to do with the background remember?
+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. The "record" we will capture will be a [p5js vector](https://p5js.org/reference/#/p5/createVector) having a X and Y coordinate.
+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!
@@ -111,48 +112,56 @@ function draw() {
}
}
```
-Well this looks very much like sketch 1.1 right? Since we have an array through which we can access each circle we can animate them in different ways, something that was practically impossible in sketch 1.1.
+
+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 using the ```sin``` function and p5js' ```frameCount```
+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 oscillations so that each individual circle moves slightly differently than its neighbours.
+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 environment. The way to do this simply is the open the Sketch files and select upload files.
+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.
-When the image we would like to use 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).
+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;
-var img_x, img_y;
+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 = loadImage("alan-turing.png")
+ alan_img = loadImage("alan-turing.png")
}
function setup() {
createCanvas(800, 800);
- img_x = 400 - alan.width/2;
- img_y = 400 - alan.height/2;
+ // 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");
- image(alan, img_x, img_y);
+ // 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 location 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.
+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