Comp115-subject-notes PDF

Preview

Summary

Download Comp115-subject-notes PDF

Description

COMP115 Coursework Notes Semester 1, 2015, Weeks 1 – 13

WEEK 1

Computers -

Modern computers: Desktop, laptop, server, media devices, appliances, embedded devices

Von Neumann architecture - This is a computer architecture that describes a design for an electronic digital computer. - The parts include an arithmetic logic unit (ALU), a central processing unit (CPU), a memory to store data and instructions, and input and output mechanisms. - In this system, instruction fetch and data operation cannot occur at the same time, so performance is limited.

Memory

Input

Central Processing Unit -

-

Data and instruction flow

Output Arithmetic Logic Unit

Control flow

In the memory there are two things: 1. Data that can be input, output or have operations performed on it by the ALU 2. Instructions that tell the CPU what to do Any information stored is BINARY

Binary - A system of numerical notation that has 2 rather than 10 as a base - Example: 010101 010001

a b axb

Decimal (base ten) 2 3 100 10 200 30 200+30+4 = 234

4 1 4

a b ax b

Binary (base two) 1 0 4 2 4 0 4+1 = 5

1 1 1

Other bases:

Octal (base eight) a 2 7 3 b 64 8 1 a x b 128 56 3 128+56+3 = 187

So here we change to a base 8, and our b becomes 80 = 1, 81 = 8, 82 = 64 Etc.

Hexadecimal (base sixteen) a 2 A F b 256 16 1 ax b 512 160 15 512+160+15=687

Digits are 0-9, A, B, C, D, E, F (where A = 10, B = 11,…)

-

To figure out what number a binary code is:

a b ax b

-

0 128 0

Example: Binary (base two) 1 0 0 1 0 64 32 16 8 4 64 0 0 8 0 64 + 8 + 2 + 1 = 75

1 2 2

1 1 1

To convert a base ten number into base two binary, we follow this process:

Example: What is 75 in binary? n n/2 remainder 75 37 1 37 18 1 18 9 0 9 4 1 4 2 0 2 1 0 1 0 1

In computing, when we divide by a number and it doesn’t go in evenly, it is rounded down to the nearest whole number. So even though 35/2 = 17.5, it is rounded down to 17.

Now, we take the remainder answers and write them down from the bottom to the top: 1001011 So, 75 (base ten) = 1001011 (base 2)

Representing text - Binary numbers can be regarded as a code that is used to represent decimal numbers in computer memory - Other cords can be used to represent other kinds of data (For example – American Standard Code for Information Interchange (ASCII) can be used to represent characters that comprise text).

Computer Languages Processing - Based on the Java language, which is one of the most widely used languages in software development - It can be downloaded from the processing.org website How does it work? - There are three types of codes:  High level code is explicit code Eg. Line (10, 10, 10, 10) will draw a line or a = 3 + 5 will add the values.  Assembly code assigns uses basic commands with values Eg. LOAD 0, 3 will assign the value of 3 to 0, ADD 0,0 will then add 3+3, STORE 2 will store the added value in 2  Machine code uses 1s and 0s to represent commands or values Eg. 0001  LOAD, 0100  ADD. - High level code is converted to assembly code by the compiler - Assembly code is converted to machine code by the assembler

High-level language (eg. Processing)

Compiler

Assembler

Machine language

Pixels Picture elements - Have you ever zoomed in on a picture so much that it looks like it’s made up of little squares? - These little squares are called PIXELS - Pixels are based on a coordinate system  you need two 0 1 2 3 4 5 6 7 8 9 values (one to specify horizontal position, and one to 0 specify vertical position) so that the program knows 1 where you want to draw. 2 Drawing - Points  point (3,2); 3 - You always specify the x value (the horizontal value) 4 first, and the y value (the vertical value) second. 5 - To finish drawing the point, make sure to add a 6 semicolon (;) at the end of the command so that the 7 program knows you have finished that command. 8 - Lines  line (1,4,6,6);  line (1,8,6,8); 9 - The first two numbers are the coordinates for the start of the line. The second are for the end of the line  line (Start X, Start Y, End X, End Y); - You cannot have partially illuminated pixels – They are either all or none - So when you have a line, on any angle other than straight, the illuminated pixels will be those which have the most line in it – see the yellow line as an example in the picture above - Rectangles  rect (1,2,6,5); x - Here, the first two numbers are the x and y 0 1 2 3 4 5 6 7 8 9 coordinates of the TOP-LEFT corner of the rectangle. 0 The second two numbers correspond to the WIDTH 1 and HEIGHT respectively. So in our example, the rectangle starts at the pixel (1, 2) and is 6 pixels wide, 2 and 5 pixels high. 3 - Specifying the same width and height will give you a y 4 square 5 Centre 6 - Ellipses  ellipse (6,5,7,7) pixel 7 - In an ellipse, the first two numbers are the x and y coordinates of the CENTRE of the ellipse (or circle). 8 The second two numbers correspond to the WIDTH 9 and HEIGHT respectively. - It is important to remember that the width and height come from the centre of the ellipse - Specifying the same width and height for an ellipse will give you a circle. -

-

Text  text(“Hello”,20,20); Type what you want your text to say in the quotation marks ““. The two numbers after it are the coordinates for the BOTTOM-LEFT of the text You can change the size, colour and positioning using textFont, textSize, textAlign commands, among many others that can be found online in the Processing library: https://processing.org/reference/text_.html Other shapes You can look up the codes for drawing many other shapes including triangles, quads, curves and arcs, by searching them on the Processing reference menu: https://processing.org/reference/

Image and Window Size - The order that you draw the shapes in will determine how they sit, For example, if you draw a rectangle first, and then a circle in the same position, the circle will appear on top of the rectangle. - To set the size of the window that you want to draw in, you can do this by using the command size (width, height); - You can specify the width and height of your display window in pixels - Example  size (400,150); will give you a display window 400 pixels wide and 150 pixels high Colour - Colour can be set in two different ways  Grayscale  This is a colour with one parameter. You choose a value between 0 (black) and 255 (white). This will give you varying degrees of grey. Closer to 0 will be darker greys, closer to 255 will be lighter greys.  RGB  This is a colour with three parameters: a red, a green and a blue. You can set each colour by choosing a value between 0 and 255. For example, 0 in the red section will give you no red, and 255 in the red section will give you all red. You can get as many different colours as you like by making combinations of red, green, and blue.  (Red, Green, Blue) - You can access the colour selector on processing by going to Tools  Colour Selector. Pick a colour by sight and it will give you the appropriate values to inpu t. - Colour can be set for everything such as background, outline, text colour, and more.

0

50 100 162 209 230 255

Using Colour commands: - Colour commands must be added BEFORE the shape that they are modifying. - When used, all shapes/text/drawing commands after it will be that colour. If you set a fill of light grey, then all shapes will be light grey until you specify otherwise. - If you put multiple fills, one after the other, then the previous ones become redundant. Only the last one will apply. - As with drawing shapes, colour order is important. If you set the background colour last, it will sit on top of anything you have drawn before it. However, this can be useful if you want to clear everything on your display. - Examples:

Command Grayscale RGB Set Background colour background (160); background (38,237,211); Shape Outline stroke(160); stroke (38,237,211); Shape Fill fill(160); fill(38,237,211); noStroke(); Turn off Outline Turn off Fill noFill(); This makes a shape transparent Documenting your work - It is helpful to make comments in your code that tell you what it is or does. You make comments on the same line by using the // followed by a comment. - Example: int xcoord1 = 10 // First x-coordinate Or rect(0,0,10,10) // draw rectangle in top left corner - For comments that need to go over multiple lines you can use /* … */ and anything in between them will be a comment. - Documentation is particularly important for the assignments.

WEEK 2

Interaction Animation - There are two steps to animation (a moving picture): 1. Setup your initial display window 2. Draw images one after the other - This can be done by using the following codes void setup() { SETUP CODE GOES HERE

Executed once

} void draw() {

Executed many times, Over and over again

REPEATED DRAWING CODE GOES HERE } -

-

In void setup, you want to put in your drawing (eg. the shape, size, colour, background, location) Void draw will be executed many times, so you can put something like a random tag to randomise a given value. For example: fill (random (255));  this will assign a random fill value up to 255. Every time void raw executes, the random fill colour will be reassigned. Basically, everything in void setup is constant and will stay the same, but everything in void draw can change as it executes depending on what you put in the code. You can only have one display window, so for each new image, you have to clear the display window. You can do this by using the background function  Make sure it is the same colour as your initial background setting.

Mouse position - To make an animation change, we need some data that varies with time - Let’s introduce mouse variables  These can be used to specify a coordinate: mouseX, mouseY  (x,y) position of mouse pmouseX, pmouseY  previous (x,y) position of mouse -

Examples  ellipse (mouseX,mouseY,50,50); will draw a circle at the position of the mouse.

void draw() { stroke(0); line(pmouseX,pmouseY,mouseX,mouseY) } This will draw a line from the previous mouse position to the current mouse position

Mouse clicks and key presses - There are also void functions that can be started in other ways void mousePressed() {

void keyPressed() {

CALLED WHEN MOUSE BUTTON PRESSED

CALLED WHEN KEYBOARD KEY PRESSED

}

}

-

When you press the mouse, draw finishes its current iteration, mousePressed executes once, and then draw begins to execute again. For example: You can clear the display window by putting the background function into mousePressed.

Variables -

-

-

Memory is how a program remembers things while it is running A variable is a high-level way of thinking about memory, they are used to store values. We have a piece of memory of a particular size, and a code that says how to understand the bits in that piece of memory, but how do we tell the code what we want to store? Declaration: You need to declare. A declaration says what type of data we want to store in memory, its name, and initial contents int total = 1729 Type is the type of data - integer, float, boolean, etc. Name is what you want to call it. This can be anything, but Type name initial value you want to pick something that describes it so that you can easily use it later. Initial value is the value of your data at the beginning of your program.

Global Variables - Global variables are particularly helpful. Declare them at the top, before your void functions, and you can use them anywhere in the program. - Example: declaring int coord = 5; means you can draw line (0,0,coord,coord) which will extend from (0,0) to (5,5) - You can also declare a variable inside a function. In the case of our mousePressed function, we can declare variable and use them within the same function. - When a function finishes executing, any variable is deleted, and is only declared again if the function is called  These are called local variables. - Global variables are accessible by any program and can be updated. That is, for every iteration of a program a variable can be added to, subtracted, divided, multiplied, and more. - To create a constantly changing variable (movement in an animation) this needs to be done in void draw. Example: A moving circle - To move a circle across the screen, we set the x coordinate in an initial position. - Then in draw, every time it executes, x is increased by 1. This means that every time draw iterates the circle will move right horizontally along the screen. - You also have to make sure to use the background to clear the screen using the background after every execution, otherwise you will have a bunch of circles on the screen. Example: A growing line - The x coordinate of the end of the line is increased with every execution, so the length of the line increases. Mathematical Operators - You can use + - * / % to update variables - % is the remainder operator. What is the remainder when 4 goes into 15? It is 3. So 15%4 = 3. 15%5 = 0, as there is no remainder.

int x = 0; void draw() { background(255); ellipse (x, 150,50,50); x=x+1; } int length = 10; void draw() { strokeWeight (4); line(0,50,length,50); length = length+1; }

Random numbers  random (low,high) will return a float between those two specified numbers. random (high) will return a float between 0 and the specified number. If you want the random number to be an integer, you can CAST it to type int by using int number = (int)(random(0,10));

WEEK 3

Conditionals Boolean Expressions - A boolean expression is something that is true or false ( a yes or no question) - Examples: In everyday language: Is it raining? Have you started assignment one? Or in programming: is the shape on the screen? Is the circle red? Did the user press the mouse? - To declare a boolean variable, we use the same process as before. Type, name and value boolean fillred = true; Are we currently filling with red? Yes. Relational Operators - Relational operators are symbols that are used to relate two different things: Symbol Meaning Example Represents > Greater than circleradius > 200 Does the circle fit in the screen? >= Greater than or equal to ycoord >= 0 Is the shape on the screen? < Less than mouseX < 250 Is the mouse on the left side of the screen? = 300)) checks if the x-coordinate is off the screen. If it is less than 0 it will be off screen to the left, if it is more than 300 it will be off the screen to the right. Therefore meeting either one of these conditions will mean that the expression is true. Check you understanding: if x = 6, y = 3, z = 5 Boolean b1 = x>y && y>z; True / False Boolean b2 = x>y && z>y True / False Boolean b3 = x>y && y>x True / False Boolean b4 = x>y && x>y; True / False Boolean b5 = x>y || y>z; True / False Boolean b6 = x>y || y!=y; True / False Boolean b7 = !(x>y); True / False Answers: 1F, 2T, 3F, 4T, 5T, 6T, 7F

-

You can even create boolean statements within other statements: E.g. boolean b = (x1 >=0 && y1>=0) || (x2 >=0 && y2>=0);

Displaying Text - We touched on displaying text earlier, but here are some more detail - (Optional) Create a font  You can create a font for your text by specifying the type and size you want

Pfont font; Font = createFont (“Georgia”, 16); -

Select font  Select the font you have created by using textFont (font); If you didn’t do the first step, you can always list a font type here instead like arial, times new roman, Georgia, etc. Draw text  Draw the text on the display window as per normal, remembering the numbers following are the coordinates: text(“Hello!”, 50, 75); You can even use variables if you want your text to change, just declare it and then use it in the text:

int value = 10; text(value, 50, 75); Slowing things down - Framerate  The standard rate for the void draw functions is 60. That means it executes 60 times per second. If you want to slow it down you can change the framerate by using frameRate(); and inserting a number between the brackets. frameRate(30); will slow it down to half speed (30 executions per second) frameRate(15); will slow it down to quarter speed (15 executions per second) - Delay  You can also stop the program running for a specified time by using delay(); Delay(150); will delay the program running by 150 milliseconds, you can put any number between the brackets, just remember that it is in milliseconds, and 1000 milliseconds = 1 second.

WEEK 4 Straight

Loops Control flow pattern - The best way to understand loops is to look at the pattern of execution. - A straight line pattern follows the code as it is written in sequential order - An if statement or an if else statement causes the code to branch out depending on a condition, and then follow a set of statements before returning back to the code. - A while loop causes the code to branch out depending on a condition, and it flows backwards and continues to execute until that condition becomes false. It then returns back to the same place in the code.

If else statement (two options)

While loops - Loops allow code to be repeated by allowing control to flow backward - They are very helpful for drawing patterns.

If statement

while (expression) { statements; } Statements Expression (decision point)

Exit Conditions - How can we stop loops if they keep repeating? When you create a loop, you also create an exit condition so that it only repeats as many times as you want.

-

int posX = 10; while (posX 100) { line(posX,10,posX,100 posX = posX + 10; }

If the condition is false when the loop is reached, then the body of the loop is never executed.

int posX = 10; while (posX...