Daniel Hunsche @daniel-hunsche-dsdn142-blog - Tumblr Blog

screenshot of motif 2

Mocking up my image before implementing it in p5js.

Here is my workflow where I mocked up an image before implementing it in p5js. First I decided to use a cigarette box because of its simple geometric shapes, its perspective and the use of layering. I also found that it had a curve on one part which I chose to use the quadraticVertex() command for.

1. First I chose my image and mocked it up using adobe illustrator. This was very easy for me to do, and gave me a good idea of the layering aspects of the design, I then separated the box out into its respective shapes to give me an idea of the key shapes I had to draw using p5js. Afterwards I placed the box relative to a 5x5 grid as you can see, ready for me to translate this over to graph paper.

2. I translates this design over to graph paper and simplified it a tiny bit to make the points line up a little better. (I also did some simplification while working with the box digitally initially). I then plotted all the necessary points - originally I was not going to plot the curved line as I was unsure how to go about it.

3. I entered the points into atom in the form of solid shapes to begin making my box. I encountered problems sometimes with the beginShape() command sometimes not working, I still do not know why this is the case, but i began saving and running my code after each and every point i plotted to make sure that the code I wrote was working. Also I started copy-pasting code that was working where I could to avoid any typos that could have caused it to not work. This worked for me as a beginner in this field.

4. I decided to give the curvy line ago at the end, I used the p5js reference library to find the quadraticVertex() command. This was easy for me to understand as it is similar to illustrators pen tool. Drawing this curved line I just used alot of trial and error to get the curves how I wanted them.

#DSDN142 #Project 1

fixed my alignment that I did in the previous project.

#DSDN142 #Project 1

Exercise - Colour

While doing this exercise I also wanted to challenge myself to get the overlapping rectangles to overlap on the centre line (250 as the canvas is 500x500). To do this i had to draw a map of how it would plan out as you can see above. I made a mistake the first time and added a screenshot of my trial, i got the Y position wrong for the first rectangle - you can see a big cross on my drawing where i fixed this issue.

I also utilised the hierarchy of the commands to remove stroke weight from all shapes with one line of code.

(I actually still dont think its in the centre so i will revisit this exercise tomorrow)

#DSDN142 #Project 1

Understanding RGB colours

~I found out that me not being able to spell too well isnt going to help me with coding~

so I already understand the idea behind rgb colours and how to mix them. But going through this it was interesting to note that if you just wanted a greyscale colour you could just enter the number once instead of entering the same number 3 times. Also looking into transparency was really interesting.

I played around with transparency and with the mouseX variable as you can see in my example images, with the large borders of the square creating 3 colours in the square (using transparency).

#DSDN142 #Project 1

Exercise - Order of operations

completing this exercise they wanted us to draw a square, circle and line in various colours and line weights.

to get my result I first layered out the nessicary code and added comments so i could come back later and add the values. While doing this i Noticed that we had to add a stroke colour to the line, however this was something that we had not covered previously. To find the command for stroke colour I used the p5js reference library which we went over in a previous lessons and I have now saved that to my bookmarks.

I decided to layer all the shapes on-top of one another symmetrically, doing this i noticed that the rect function draws from the top left corner but the ellipse function draws from the centre, this was interesting to note.

#DSDN142 #Project 1

Understanding the order of operations

first** i found how easy it was to break my code, with the screenshot above showing that i missed a bracket and semicolon, this made my whole code stop working and I had to do my first “what did I do wrong” haha.

this concept of the order of operations was explained really well with the analogy of painting a picture, where you first dip your paintbrush in the paint and then paint the shape, and the paint stays on the brush for any shapes you paint afterwards. So you write the info first like the fill colour that you want and the strokeWeight, and then you tell the computer what to draw, and everything else afterwards will follow those rules unless stated otherwise first.

#DSDN142 #Project 1

Indenting and commenting in code.

Looking into the organisational side of coding today. Making sure everything in indented is very important and really helps us understand and read the code more efficiently. Also commenting (and i thought leaving your initials in the code) is a very helpfull idea. Leaving your initials or name would be good if you were working with a large group of people.

#DSDN142 #Project 1

Progress Based Assessment 1

Doing the first project based assessment I found it relatively easy. The hardest part for me was having to think about the canvas size in order to get the position of the start and finish points for the lines. I used the beginShape command to draw three of the shapes which i found easier than writing the code for the lines as I have been learning adobe illustrator. This was easier to get my mind around as its similar to placing points on the page and having it fill in the rest automatically.

#PBA1 #Project 1

Drawing Shapes with p5j5

We looked at making Lines, Ellipse’s and rectangles in this lesson. Here’s an over view of each function:

Lines: line(((X coordinate of first point), (Y coordinate of first point)), ((X coordinate of second point), (Y coordinate of second point)));

Draws a line for one point to the other.

Rectangles: rect(30, 20, 200, 100);

Draws a rectangle at X30,Y20 that is 200px wide and 100px high. Adding another int after will add uniform rounded corners, adding 4 will give each corner its corresponding radius eg: rect(30, 20, 200, 100, 30, 30, 30, 60); Corner 4 (or the 4th corner starting from the top left counting clockwise, will have a radius of 60.

Creating a custom shape

Using beginShape we can create a shape with set points that we define, I can relate this to using the pen tool with adobe illustrator. you choose each point with the vertex(); command and the shape is drawn by joining the dots.

note: add a fill(); line to choose a fill colour.

#Project 1

In the first tutorial of DSDN142 we downloaded atom, installed atom live server and the a java framework.

I followed along a basic function to draw a circle around the mouse pointer every frame. Below is the code used and the result. I assume that createCanvas creates a workspace in the document for the animations to take place and within that we use the function ‘draw’ to draw an ellipse. I assume that this is drawn taking the position of the mouse’s X & Y position and then after those point we see 200, 200 (200px wide? and 200px high?).

I Thought it would be interesting to see if this language would support other things, so I added a “+500+ to the end of mouseX, effectively adding 500px to the mouse’s current position, this worked on the screenshot below, the mouse is represented by the red dot. I also changed the shape of the ellipse to see what it would do.

#Project 1

DSDN142 – test

Creative Coding 1 starts tomorrow (Monday 7th Jan). Im excited to start this course and hope to be able to show you some amazing things that I've Learned along the way, along with my thoughts and an insight into how I think!

#DSDN142

Trending Blogs

Recently Viewed Blogs

Daniel Hunsche