On the second day of the Tech Impact program vestibule we opened up the day with a basic careers assessment exercise. The assessment was short and therefore made basic and generic career recommendations.
During Dawn’s lecture, we revisited the p5.js in more depth than the day before. I learned that p5.js is great to create graphic and interactive experiences, based on the core principles of Processing.
For the basic drawing exercise, I paired myself up with Eric Vargas. We created a couple of basic shapes in the time we had to do the exercise.
First off, in p5.js, there are 2 functions. Those functions are setup and draw. In the setup function, I used it to create my canvas and background to get the correct sizing and color of my choice. For the draw function, I used it as a playground to design shapes.
I learned in order to start creating on for the p5.js program, you first need to enter createCanvas(), in between the parenthesis you identify the size of the canvas you’ll be working on. I found changing the background of the canvas was much smoother if I kept the code within the setup function. The code for the background is background(”), in my own project, I used red.
We first started by using the code ‘fill’ to set a color to the shape that would follow in the next line of code. The first shape we chose was a rectangle. The code for the rectangle is rect(.., .., .., ..) within the parenthesis we had to set the parameters to our rect. The first number: x-coordinate of the rectangle, second number: y-coordinate of the rectangle, third number: width of the rectangle, and the four number: height of the rectangle. Positioning the rectangle was challenging because it was the first time using the p5.js program and not having a grid was tough trying to find the best spot for the design. But with trial and error, Eric and I quickly knew we had to keep practicing to get it right.
The second shape we created was a quadrilateral shape. We filled the quad with blue using fill(‘blue’); code. This part was pretty much straight forward. The code for the quadrilateral is quad(.., .., .., .., .., .., .., ..); just like the rectangle, we had to set the parameters for our quad shape. We started with x1 – number: the x-coordinate of the first point, y1 – number: the y-coordinate of the first point. We followed this guide for the next points x-2 to x-4 and y-2 to y-4.
To better illustrate the code, I have copied it below:
function setup() {
// Eric did the driving and Emel typed
createCanvas(500, 500);// custom canvas created
background(‘red’); // picked red for the background
}
function draw() {
fill(‘green’); // filled rect green
rect(100, 125, 100, 200); // created rectangle
fill(‘blue’); // filled qua blue
quad(300, 125, 350, 100, 400, 100, 450, 300); // placed a quad
}
You will notice two forward slashes and description at every line, this is called a comment and it is not being executed. The slashes tell the program to skip the comment and move on to the line of code.
Today, was filled with lots of useful ways I can use the p5.js program to create graphics in different colors, sizes, virtually anything. Day by day I will get more familiar with p5.js program and from start 2 end of the Tech Impact program become skilled with inputting code to create advanced designs.
Start 2 End 