From 2e62bf93d8f2354fa94fe97a3b4392bd5dd1b374 Mon Sep 17 00:00:00 2001 From: gauthiier Date: Tue, 17 Jan 2023 01:14:42 +0100 Subject: [PATCH] save canvas --- 3.Drawing-with-numbers.md | 166 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 3.Drawing-with-numbers.md diff --git a/3.Drawing-with-numbers.md b/3.Drawing-with-numbers.md new file mode 100644 index 0000000..a51f5e0 --- /dev/null +++ b/3.Drawing-with-numbers.md @@ -0,0 +1,166 @@ +# 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 window. + +Consider the following sketch. + +```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? + +### 📚 Exercises + +Consider the section Typography in the [p5js reference](Reference: https://p5js.org/reference/) and try to follow the exercises below. + +1. Modify the sketch 3.0 and enlarge the text 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. + +3. Can you change the font of the text? + +4. How about its colour? + +5. And its alignment? + +6. Homework: Using p5js' typography functionality, write Love Letters on the screen that resemble 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 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. + +

+ +

+ +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. + +```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 change be slower? + +## 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? + +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. + +```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); + } +} +``` +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. + +### 📚 Exercises + +1. Modify sketch 3.2 and make the circle oscillate using the ```sin``` function and p5js' ```frameCount``` + +2. Add randomness to your oscillations 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. + +

+ +

+ +When the image we would like to use is uploaded, the way we can display it on the canvas is as follow. + +```javascript +// Image! + +var alan; +var img_x, img_y; + +function preload() { + alan = loadImage("alan-turing.png") +} + + +function setup() { + createCanvas(800, 800); + img_x = 400 - alan.width/2; + img_y = 400 - alan.height/2; +} + +function draw() { + background("yellow"); + image(alan, 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. + +### 📚 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. + + +