gauthiier/Revisiting-Concepts-Notations-Software-Art
gauthiier/Revisiting-Concepts-Notations-Software-Art
1
0
Fork 0
Code Packages Projects Releases Activity

review

Browse Source
This commit is contained in:
gauthiier 2023-12-18 10:16:50 +01:00
parent 0d0c667d01
commit f076d0469d
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
3.Drawing-with-numbers.md
View File

@ -2,7 +2,7 @@
## 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!
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 canvas as well!
Consider the following sketch using the ```text ``` function.
@ -23,11 +23,11 @@ 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/).
To complete the following exercices, have a loot at the section Typography in the [p5js 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.
2. Create a "text box" in which the text can be displayed in full (i.e. wrapped in the box).
3. Can you change the font of the text?
@ -60,13 +60,15 @@ function draw() {
}
````
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.
Remember sinusoidal waveforms in your Mathematics class in school? Well they are fabulous!
Sinus and Cosinus are great trigonometric functions to play with as they can help produce simple animations. Sinusoidals (sinus or cosinus) have interesting properties that can easily be parametrised.
<p align="center">
<img src="https://grrrit.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.
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 sinusoidal waveform.
A statement like to one below will roughly oscillate between 0 and 255 each time ```frameCount``` is incremented.
@ -78,15 +80,15 @@ let osc = 128 + sin(frameCount) * 127;
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.
2. Modify sketch 3.1 and change the colour of the text with the ```osc``` variable above.
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?
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``` input of 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.
In sketch 1.1 we drew circles on the canvas when we pressed the mouse. One problem we had was 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.
Now that we understand arrays we can fix this problem by "recording" the location where the mouse was pressed. To do so we will produce a "record" of each mousse press y adding the location of the mousse when pressed 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!
@ -115,7 +117,7 @@ function draw() {
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.
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
@ -125,13 +127,13 @@ True. But with this code we can draw more interesting things than we could in sk
## 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.
With p5js we can also work with images. The way this works is to upload them to our online environment by opening the "Sketch files" and the left side of the page and select upload files.
<p align="center">
<img src="https://grrrit.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://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/src/branch/main/img/alan-turing.png)):
When the image is uploaded, we can display it on the canvas as follow (for this sketch I am using [this image](https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/src/branch/main/img/alan-turing.png)):
```javascript
// Image!
@ -161,7 +163,7 @@ function draw() {
}
```
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.
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](https://p5js.org/reference/) and consider the simple manipulations you can use on your image.
### 📚 Exercises