Week 2

Notes

• Blog posts talk about – what worked, what you learnt
• Sketch window – We fill in with our graphics. Uses X (horizontal) Y (Vertical) coordinates. X goes first then Y (0.0 = XY)
• Functions – Do something
• Points function makes a dot
• If we wanted to draw a line then the function is Line
• Parameters go into the parentheses. Open and closed parentheses (  )
• All lines end of code end with a semi colon ; similar to how we end sentences with a full stop.
• White space tends to get ignored. Processing only pays attention to the characters. The semi colon is for the code to know when a statement starts and finishes. 
• Processing runs your code in a sequence going down (first line bottom, last line top). It works from line to line
• Ellipses are drawn from the centre, a rectangle is drawn from the top left corner
• Fill function is to fill the inside of the shape
• Fill goes from 0 – 255 to give us different colours on the greyscale. 0 = black, 128 = grey 255 = white
• If you use fill with 1 parameters it is greyscale, 3 parameters is RGB and 4 parameters is transparency
• strokeWeight needs to have a capital W
• Size should be at the top
• Using // means you can add notes with the program thinking it is code. It is a comment
• Variables – Is used to store information e.g. width and height
• size(300,200);
• frameCount goes up
•   ellipse(frameCount,height/2,50,50);
•   ellipse(width/2,frameCount,50,50);
•    ellipse(width/2,height-frameCount,50,50);
• line(0,0,mouseX,mouseY);

In Class

In class we started coding using an application called Processing. We started with learning the basic codes. We learnt that the “sentence” of code is written “functionName(x,y);” Each line must end with ; as it is the equivalent of a full stop. Inside of the brackets (which are called parentheses) are the parameters that need to be specified. The function name is case sensitive as there are function names such as mouseX where the X must be capitalised. Because each line of code is read in order, in order to layer the shapes properly I had to make sure the shapes I wanted to be in the foreground to be coded last. 

• 

• 

The first function we learned was the “point” function. In order to create a point you need to know the X,Y coordinates. This tells the point where to go.

• 

• 

We next learnt the line function. I personally find this function quite difficult. It is like the point function but two locations are needed. A straight line then will be drawn connecting the two locations given. It uses the X,Y coordinates of one end and the X,Y coordinates of the other end. Not being able to see exactly what the X,Y coordinates are made it guess work which could take a long time to work out.

• 

• 

• 

Next, we learnt the “ellipse” function which creates a circle. There are two set of parameters that are needed for the ellipse function to work. The first set being the location of the circle and the second set being the width and height of the circle. We also played with the order, moving the line cross to in front of the ellipse.

• 

• 

• 

We also learnt the rect function, which makes a rectangle or square depending on the parameters. The set of parameters are the X,Y coordinates and then the width and height. The order of the line of code affects the layering of the shapes so here I played with the location of the square and then moved it to the back which brings the ellipse forward.

• 

• 

• 

Next we learnt about the fill function. Using one parameter will fill the function with a shade of black. Using the parameter of 0 will fill the shape black and if the parameter is 255 it will be filled white and anything in between will be a shade of grey. However, to get a colour fill you would use R,G,B variables. The stroke will be automatically filled with white and have a black stroke until stated otherwise.

• 

• 

• 

• 

• 

To create a stroke, you would use the function stroke and similar to the fill function you would use the R,G,B variables. When you want to control the transparency of the fill the parameters would be R,G,B,Alpha.

• 

• 

The fill and stroke function can be applied to any function because the order of code affects layering and colouring, sometimes you need to state more than once the fill and stroke. We also learnt the stokeWeight function (notice the capital W) which controls the stokeWeight. The weight (in pixels) of the strokes default is 1 and then from there it can go up, making the weight heavier.

• 

• 

• 

• 

• 

I didn’t take as many screenshots of my mouse process but in the first image you can see my code and that the triangle head is on an angle and that I struggled with the whiskers. Struggling with the whiskers is also seen on the middle image as it didn’t make sense trying to get the ends to align. The third image you can see I managed to work it out. I was also taught that when writing a note to yourself so that the program doesn’t read it as code is to start the sentence with // . Not having all the parameters for the whiskers got me very confused but Harry was able to visually show me how to work it out which was helpful.

Code with some help from Harry understanding how to cross the lines

• 

  I struggled with the whiskers

• 

• 

I did take more processing screenshots of the panda. It took me a little time to work out the ears but the mouth took me forever to get right but I eventually got there.

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

The final part of class, we learnt the importance of what the first set of code we should write should be. This is –

void setup(){
}

void draw(){
}

void setup only runs the code once and void draw runs repeatedly. We used the stroke function (R,G,B,Alpha) and then the line function.What was used was the mouseX, mouseY parameters. The system variable mouseX always contains the current horizontal coordinate of the mouse and mouseY always contains the current vertical coordinate of the mouse. The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc.

• 

• 

• 

• 

• 

• 

• 

Above I played with having a colour as well as the line function. I loved the mouseX and mouseY function and being able to interact with the outcome. I also liked that if I let it run it would move on its own and create a different set of outcomes.

Learnt functions and definitions –

• Each “sentence” of code is written “functionName(x,y);” (must end with ; and be aware of capital letters)
• The size function decides on the size of the play screen and is written like – size(X,Y);
• The brackets are called parentheses and what is written in these parentheses are called parameters.
• The “point” function. In order to create a point you need to know the X,Y coordinates e.g. point (X,Y);
• Line function needs 4 parameters. A straight line then will be drawn connecting the two locations given. It is written like – line (X1,Y1,X2,Y2);
• The ellipse function creates a circle. There are 2 sets of parameters that are needed. The first set being the location of the circle and the second set being the width and height of the circle. It is written like – ellipse (X,Y,Width,Height)
• Keep in mind the order of things written. The last thing written is on top (is bought forward) which means that the first code written will be moved to the back (will be in the background).
• The rect function creates rectangles and squares. It is written like – rect (X,Y,Width,Height);
• The fill function can be written 3 ways –
  • For shades of black and white it is written it has one variable between 0 – 255 – fill(0);
  • For colour it has 3 variables – fill(R,G,B);
  • To change transparency there is 4 variables (R,G,B,Alpha);
• The stoke function sets the colour used to draw lines and borders around shapes. This colour is specified in terms of the RGB or RGBAlpha
• The strokeWeight controls the weight of the stoke (notice the capital W). The weight (in pixels) of the strokes default is 1 and then from there it can go up, making the weight heavier.
• When writing a note to yourself so that the program doesn’t read it as code is to start the sentence with //
• The system variable mouseX always contains the current horizontal coordinate of the mouse and mouseY always contains the current vertical coordinate of the mouse.
• The system variable frameCount contains the number of frames that have been displayed since the program started. It starts as 0 and then after the first iteration of draw it is 1, etc.
• Each parameter can be divided using / , multiplied * , addition + and minus –
• Start each code with this layout (doesn’t need the lines with // but this helps to remind me of what each void does)

void setup(){
// runs once
}

void draw(){
// runs repeatedly
}

Here you can see different things that I tried. I created a YouTube playlist, the playlist should play the next video, if it doesn’t use this link (https://www.youtube.com/watch?v=_HejJyCQQ4A&list=PLENsRNu2d7MMXJq7GfT0-JVrDyUyLLW3a)

In this code, I played with the changing colour using the parameters mouseX and mouseY as well as the ellipse

Similar to the one above, I wanted to trial it again. The frame-count makes the ellipse move by itself

I wanted to trial playing with frame-count and changing the colour using the cursor. It created a different image depending on where I started and when I moved my cursor but it would always head in the same direction

Again, similar to above but being able to stop the ellipse from continuously moving in one direction with my cursor and then being able to restart it the same way

This one reminds me of a flashlight and the light reaching out into the dark

I started playing with different shapes in different locations as well as adding colour. I like having colour rather than the black and white as it appears to be more inviting and interesting

I love being able to draw and write with this code. Adding colour and life to a black background. It makes a difference in what would be an otherwise plain background

A different version to the one above where mouseX and mouseY have been switched which makes the ellipse go in another direction making it more unpredicatable

The black outline creates a sense of shadow making the final code appear to have some depth. Not a big fan of the continuous movement as it goes off the screen and you can no longer interact with it. I do like being able to control some of the movement and the colour changing that is also done on mouseX and mouseY

I like this one and being able to create a sense of depth, it stays within the screen. It appears as if the ellipse could go far in the distance and then come right back

This one created interesting patterns that could only be made once

I really like the changing colour that depends on where the mouse is and how you can create different lengths of lines

Being able to play with different parameters in my own time allowed me to experiment and create a further understanding on how they work. Some of it was trial and error to see what different functions do with different variables which created some interesting outcomes.