Beech Hall School Computing Science Course

To learn how to design and create a software application – an App Learn the basics of App Design Learn the basics of Computer Programming – coding Create apps and on your computer, the internet and your Android device Visit to Barclays site in Knutsford Win Prizes! – Best apps Have Fun – designing and creating apps is rewarding! Impress Your friends and parents….

The ZX81 The Raspberry PI The Arduino Powerful computers Software is pretty much the same Lots of free tools to create software

Bill Gates – Programmer and founder of Microsoft – World’s richest man – wrote DOS and Original version of Windows Steve Jobs – Founder of now biggest company ever – Apple – more of a designer - he was involved in the detailed every Apple product Carly Fiorina – CEO of Hewlett Packard Mark Zuckerburg – computer programmer and billionaire at 28! Oh and he created Facebook

Meg Whitman – CEO of ebay Larry Ellison – Founded Oracle – worth about 40 Billion dollars. Larry Page – Founder of Google Paul Allen – Programmer and Founder of Microsoft – worth about 20 Billion Dollars

Anatomy of a Computer What is software and Apps – stack and connect the difference between software and a cashmere sweater The internet and networks Introduction to the Arduino and the Raspberry Pi Introduction to Processing The Screen Coding Your First Program – Get on with it!

Processing – Why? Runs on Windows, Mac and Linux Write code anywhere, run anywhere Can run in 3 Different Ways On Your PC/Mac Can run as a web application Can run on Android Smartphone/Tablet Same as Arduino – much smaller code

Apps need to be designed Think about what the user wants – what do you want the app to do Design it! – Have it in your head Then Code it

Used to write the program Is a program its self Runs on any type of computer Can run on your PC or the Web or An Android Phone You save your program – its called a Sketch The file is just stored on your comp – with an extension.pde circle.pde

Start the Processing app You can start writing code immediately

Start the sketch Stop the Sketch Save the Sketch! – CTRL S as also Enter code here – just text Status area

Start the sketch Stop the Sketch Code

You should see this!!!!

barclaysapps.wordpress.com Or Twittter Or Facebook Your choice Sketches – saving and structure Colours Code – Variables, If and Loops Code - Getting input from the computer Drawing with Variables Drawing with Mouse Movement

Colours and Greys can be represented usually by a number Greyscale is 0 to 255 – 0 is black 255 is white Colours are usually RGB – Red Green and Blue Red would be 255,0,0 Green would be 0,255,0 Blue would be 0,0,255 So a colour can be something like 5,10,60 Millions of colours available by mixing those numbers r/rgb_hex_color_slider.phtml r/rgb_hex_color_slider.phtml

For lines Greyscale use stroke(number); For lines colour stroke(red,green,blue); For fills greyscale use fill(number); For fills colour use fill(Red,Green,Blue);

Applies to lines and lines round objects strokeWeight(1); // Default line(20, 20, 80, 20); strokeWeight(4); // Thicker line(20, 40, 80, 40); strokeWeight(10); // Beastly line(20, 70, 80, 70);

size(640, 360); background(0); noStroke(); fill(204); triangle(18, 18, 18, 360, 81, 360); fill(102); rect(81, 81, 63, 63); fill(204); quad(189, 18, 216, 18, 216, 360, 144, 360); fill(255); ellipse(252, 144, 72, 72); fill(204); triangle(288, 18, 351, 360, 288, 360); fill(255); arc(479, 300, 280, 280, PI, TWO_PI); The basic shape primitive functions are: triangle() rect() quad() ellipse() arc(). Squares are made with rect() and circles are made with ellipse(). Each of these functions requires a number of parameters to determine the shape's position and size.

This section covers the basics of computer programming – use it as a reference Variables Using variable values in your code IF Making your code do different things when its running Loops Looping and making your code do many things in a loop Functions Creating your own commands – like line, ellipse etc

Add test to your sketch that does not get executed Just use a // anywhere on the line Good for documentation – so you know what you have written – makes it easier to read

// Variables here void setup() { // This is a comment line(0,0,100,100); // So is this }

Setup – setup functions Draw – draw – in a loop // Variables here void setup() { } void draw() { }

VARIABLES GO HERE void setup() { CODE HERE WILL RUN ONCE } void draw() { CODE HERE WILL RUN OVER AND OVER }

Computer looks into the variable for a value and uses that Can store your value Can Calculate your value Its like a container It can change when the sketch is running! CentreX

It has a type Number String Logical – True or False

A clock has 12 points – how would you draw a line from the centre ? Centre Point x,y Calculated x,y

Not a constant A Value that can change in your code after you write it Had many uses Saves putting in same number Can be used to control the code flow Stores values you calculate in your code Calculate something and store it Call it what you want – make it relevant though – x1 and y1 etc Can have a type Number Character/String Logical ( True or False )

Most computing languages need a variable to be declared – aka setting it up Two parts of the declaration Its type Its value Types - Integer, Decimal, Logical and Strings 1,2,3, , TRUE or FALSE” “This is a sentence”, “So is this”

int dave;// Type dave=10;// Value int radius_1; int radius_2; radius_1=100; radius_2=150; String name; Name=“Missing Word”;

int x1; int y1; int radius=20; void setup() { x1=100; y1=100; radius=20; Size(200,200); } void draw() { ellipse(x1,y1,20,20); }

Tell the program what value – 10 Now you can use myVariable_x anywhere in the code without having to type 10 Tell the program what value – 10 Now you can use myVariable_x anywhere in the code without having to type 10 int myVariable_x; int myVariable_y; myVariable_x=10; myVariable_y=10; ellipse(myVariable_x, myVariable_y,100,100); Tell the program what type – int - Integer

The system can set a variable for you. The location of the mouse is stored in two variables mouseX mouseY Now you can use those variables in your code to draw the position of the mouse

A logical variable is called a Boolean – George Boole Its yes or no, true or false, 1 or 0 Simple to use boolean theTruth; theTruth=true;

Debugging – all code has bugs – find em’ If you want to see what a variable looks like This is called debugging – we use a command called println println(variable ); println(“The variable x=“ + x);

You can use variables like this: int a; int b; b=10; a = b+5;

Example 1 – save lots of numbers being written int a = 50; int b = 120; int c = 180; line(a, b, a+c, b); line(a, b+10, a+c, b+10); line(a, b+20, a+c, b+20); line(a, b+30, a+c, b+30); a = a + c; b = height-b; line(a, b, a+c, b); line(a, b+10, a+c, b+10); line(a, b+20, a+c, b+20); line(a, b+30, a+c, b+30); a = a + c; b = height-b; line(a, b, a+c, b); line(a, b+10, a+c, b+10); line(a, b+20, a+c, b+20); line(a, b+30, a+c, b+30);

A clock has 12 points – how would you draw a line from the centre ? Centre Point x,y Calculated x,y

// Variables void setup(){ size(300,300); } void draw(){ background(0); ellipse(mouseX,mouseY,30,30); } Variable!

Code here to draw 60 points on a circle – variables! // Draw the minute ticks strokeWeight(2); beginShape(POINTS); for (int a = 0; a < 360; a+=6) { float angle = radians(a); float x = cx + cos(angle) * secondsRadius; float y = cy + sin(angle) * secondsRadius; vertex(x, y); } endShape();

If – its called a conditional statement Depending on the outcome of something you can execute a block of code

if ( something ) { Do this } else { Do that }

Variables – mostly used You can compare a variable to a number or another variable If ( mouseX == 100 ) { line(x,y,w,z); } If (mouseX > 100 ) stroke(1,2,3); Else stroke(4,5,6); }

(X == Y) (X > Y) (X < Y) (X >= Y) (X <= Y)

Use the previous example void draw() { if ( mouseX > 100 ) { ellipse(50,50,10,10); } else { ellipse(20,20,10,10); }

You can use AND and OR AND is (X == Y)&& (X > 10) OR is (X > Y) || (X>3) IF Would then look like If (( X > Y ) || ( X > 3 )) { // Do Stuff }

Write an App that draws different colours in 4 boxes when the mouse moves into it. When mouse cursor moves here change the colour! And here!

Try the mousePressed variable – how do you think that might work ? A bit of 3D for Windows 8?

The dynamic Microsoft Logo is the assignment Prize for the best one – dynamic – colourful – creative If you want– Google something and copy some code! As long as it works and you make it your own version.

Graphical User Interface Concept of Objects on the Screen Buttons Windows Text Boxes Radio Switches Sliders Wheels On/Off Switches Invent Your Own

Based on a toolkit or a library of existing code Usually 3 Stages 1 – Declare the Object variable 2 – Define the object – position, colour, size in Setup() 3 – Wait for events to be triggered then pick up those events Not and X or Y in site !!!! Hooray

We will show you how! Need to import Library and add a file – that’s got all the code. Now you can try out the example

To give you a flavour – use Processing 2.0 – Go to contributed libraries and Select G4P – select G4P_Showcase

Go to barclaysapps.wordpress.com Look for the example – GUI Stuff Paste that in Note how much simpler the code is Now run it – have a play and see if you can change some of the button objects. You could use this in your app design

Loops repeat tasks Very handy for being loopy in your code Two different types: While Loop For Loop

Images – Displaying pictures Motion – Some Animation techniques Code - Functions – how to make code simpler The Robot – using pictures Arduino – First Project – The Button

Objects – the core of modern programming Arrays – how to have lots of data 3D – How to draw in 3D Arduino – The 7 Segment Display

Arduino – Putting it Together The Button + The 7 Segment Display + = The counter – press a button to countdown The Coding Competition – Draw a Clock Face with hour, minute and second hands – fully animated

Internet Applications – Web Servers – how do they work An Introduction to HTML and Javascript How to Write a Web Application Coding HTML Creating a web application

Project Progress Writing a Web Application and using a simple Web Service A look at Mobile applications – Android and iPhone Doing some coding – A simple smartphone application using Processing for Android

Web Applications Part 2 Finishing Web Application Final Review of Projects – Prizes awarded to best team

General Notes

Disk Storage Memory Input Network Output Programs

All computer languages have a simple syntax Syntax describes rules of a language is written Everything is line by line One command per line The curly bracket is used { } To draw a circle – use the ellipse command ellipse( centre x, centre y, width x, width y); command values Semicolon – end of command bracket

Divided into Pixels – Picture Elements X = Length Y = Height X and Y = Resolution Each Pixel has an “Address” (X,Y) X ALONG Y DOWN

(0,0) (13,7) X Y

You can start the program when the user tells you You tell the screen the start position is (0,0) You tell the screen the color to draw is white You tell the user the program is ready You now run in a loop until you are told to stop You ask the buffer for a character Work out where the letter in the next space in the X direction Tell the screen where to write the next character If the next character is at the end – write on the next line at the start – in the Y direction When the user user tells you to stop: Clear the Screen

You start the program You tell the keyboard which key you pressed You can stop the program when you are done

The Keyboard sends the letter to the computer. You need to tell the buffer what the next key is that was pressed

You store the keys that were pressed. Then when you are asked for the next key you give it when asked The buffer is in the memory of the computer

You are the monitor – you draw a pixel on the board at the correct location You can use any colour Remember the address of a pixel X,Y X Along Y Down

Functions – Make the computer do something FunctionName (some values,some other values); Expressions variable = (2+65 *3 ) + x Branches – Run one bit of code or another if ( something is true ) { Run this code here } else { Run this code here }

Loops – make the code repeat - for for ( variable=0; variable < total repeats ; variable++ ) { Repeat the code } Or use while While ( something is true ) { Repeat this code here }

Ellipse(start_x,start_y,width,height);