For the last two weeks, I have been experimenting with P5.js in and outside of class. I have never used P5.js before so this experience has been new for me.
Initially, in my first lesson, I played around with making different shapes in different colours like this →
Since it was my first time using P5.js I took my time getting to know some of the different commands that could be used instead of the overall outcome of my image.
Code – Close up
function setup() {
createCanvas(400, 400); // Creates the size of the canvas
background('pink'); //This changes the colour
rectMode(CENTER); // Using this changes the postion of the rectangele
fill('yellow'); // Changes the colour inside the rectangle
stroke('white'); // Changes the colour of the outline
strokeWeight('5') // Changes the thickness of the outline
rect(200, 200, 100, 100, 20); // The x and y corord, the height and witdth, and the radius for the corners
circle(200, 200, 100);
fill('')
//The following code changes all elements of the rectangle
strokeWeight(6);
stroke('pink');
fill('skyblue');
rect(200, 200, 50, 50);
console.log('Hello World!');
}
function draw() {
// This section is typically for animation
}During my free time, I chose to continue with my experimentation (which is still ongoing) this time I had an idea of what I might want my code to show – if you can’t tell it’s an egg of a frying pan. I messed around with the different positions I could place my frying pan and even increased the size of the canvas. Now, that I was a little more familiar with P5.js I also took the time to label the code I had written more legibly. It made it easier when I changed the canvas size and chose to move the frying pan from the centre. I definitely think my second attempt shows great improvement to my first however, I am not done with it yet I hope to at some point create a plate with eggs on it to go with the frying pan. I also aspire to animate the egg and make it look as if it were frying. ↓
Code – Close up
function setup() {
createCanvas(700, 700);
background('pink');
//Handle
fill('black');
stroke('white');
strokeWeight(4)
rect(200, 175, 300, 50);
//Handle square
fill('grey');
rect(200, 175, 150, 50);
//Bigger circle
fill('black');
circle(200, 200, 250);
// Smaller circle
fill('grey');
strokeWeight(0);
circle(200, 200, 155);
//Rectangle
rectMode(CENTER);
fill('white');
stroke('grey'); // Changes the colour of the outline
strokeWeight('3'); // Changes the thickness of the outline
rect(200, 200, 100, 100, 20);
// Cricle
fill('orange');
circle(200, 200, 50);
//Plate
fill('white');
strokeWeight(1);
stroke('grey');
circle(65, 60, 100);
}
function draw() {
}Special mention: Algorithmic drawing
In addition to experimenting with P5.js, I was also tasked with producing a different form of algorithmic drawing. I had the choice of using paper or drawing software etc. As long as I replicated a pattern it was fine. I decided to show a simple step-by-step guide to drawing the faces on a Rubix cube and I did that using Miro and a reference picture I took of my cube.
The finished result! ↓
↑ I kept my instruction very simple leaving letting the pictures speak for themselves. Although I did partially create a version of these instructions that had text, unfortunately when writing everything up I realised that I was not only adding too much text but I was also confusing myself. So, in the end, I went with the simplified version.
Little snippet