Beech Hall SchoolComputing Science Course

Learning to Code

To learn how to design and create a software application – an App

Learn the basics of App DesignLearn the basics of Computer Programming –

codingCreate apps and on your computer, the

internet and your Android deviceVisit to Barclays site in KnutsfordWin Prizes! – Best appsHave Fun – designing and creating apps is

rewarding!Impress Your friends and parents….

Purpose of the Course

The ZX81The Raspberry PIThe ArduinoPowerful computersSoftware is pretty much the sameLots of free tools to create software

History

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 PackardMark Zuckerburg – computer programmer and

billionaire at 28! Oh and he created Facebook

Famous People in IT

Meg Whitman – CEO of ebayLarry Ellison – Founded Oracle – worth about 40

Billion dollars.Larry Page – Founder of GooglePaul Allen – Programmer and Founder of

Microsoft – worth about 20 Billion Dollars

Famous People in IT

Anatomy of a ComputerWhat is software and Apps – stack and

connectthe difference between software and a

cashmere sweaterThe internet and networksIntroduction to the Arduino and the

Raspberry PiIntroduction to ProcessingThe ScreenCoding

Your First Program – Get on with it!

Getting Started

Processing – Why?Runs on Windows, Mac and LinuxWrite code anywhere, run anywhereCan run in 3 Different Ways

On Your PC/MacCan run as a web applicationCan run on Android Smartphone/Tablet

Same as Arduino – much smaller code

Getting Started

Apps need to be designedThink about what the user wants – what do

you want the app to doDesign it! – Have it in your headThen Code it

Getting Started - Apps

Used to write the programIs a program its selfRuns on any type of computerCan run on your PC or the Web or An Android

PhoneYou save your program – its called a SketchThe file is just stored on your comp – with an

extension .pdecircle.pde

Processing – the IDE

Start the Processing app

You can start writing code immediately

IDE Layout

IDE LayoutStart the sketch

Stop the Sketch

Save the Sketch! – CTRL S as

also

Enter code here – just

text

Status area

Processing First SketchStart the sketch

Stop the Sketch

Code

Processing First SketchYou should see this!!!!

barclaysapps.wordpress.comOr TwittterOr FacebookYour choice

Sketches – saving and structureColoursCode – Variables, If and LoopsCode - Getting input from the computerDrawing with VariablesDrawing with Mouse Movement

Moving On

Colours and Greys can be represented usually by a number

Greyscale is 0 to 255 – 0 is black 255 is whiteColours 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

http://www.calculatorcat.com/free_calculators/color_slider/rgb_hex_color_slider.phtml

Colors Colours

For lines Greyscale usestroke(number);

For lines colourstroke(red,green,blue);

For fills greyscale use fill(number);

For fills colour usefill(Red,Green,Blue);

How to get colours in code

Applies to lines and lines round objectsstrokeWeight(1); // Default line(20, 20, 80,

20); strokeWeight(4); // Thicker line(20, 40, 80, 40); strokeWeight(10); // Beastly line(20, 70, 80, 70);

Thickness

Primitivessize(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

VariablesUsing variable values in your code

IF Making your code do different things when its

runningLoops

Looping and making your code do many things in a loop

FunctionsCreating your own commands – like line,

ellipse etc

Computer Programming

Add test to your sketch that does not get executed

Just use a // anywhere on the lineGood for documentation – so you know what

you have written – makes it easier to read

Comments

Comments// Variables here void setup(){// This is a commentline(0,0,100,100); // So is this

}

Setup – setup functionsDraw – draw – in a loop

// Variables here void setup(){

}void draw(){

}

Sketch Structure

VARIABLES GO HERE void setup(){

CODE HERE WILL RUN ONCE}void draw(){

CODE HERE WILL RUN OVER AND OVER

}

Sketch Structure

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!

What’s a Variable ?

100

CentreX

300line(CentreX,CentreY,20,10);

It has a typeNumberStringLogical – True or False

A Variable

A clock has 12 points – how would you draw a line from the centre ?

Variables – A Circle Example

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 )

More what’s a Variable?

Most computing languages need a variable to be declared – aka setting it up

Two parts of the declarationIts typeIts value

Types - Integer, Decimal, Logical and Strings1,2,3,41.4544 , 45.55566TRUE or FALSE”“This is a sentence”, “So is this”

Declaring a Variable

int dave; // Typedave=10; // Value

int radius_1;int radius_2;radius_1=100;radius_2=150;String name;Name=“Missing Word”;

Variable Example

Lets code it - variableint 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

int myVariable_x;int myVariable_y;myVariable_x=10;myVariable_y=10;ellipse(myVariable_x, myVariable_y,100,100);

What is a Variable - ExamplesTell the

program what type – int -

Integer

The system can set a variable for you. The location of the mouse is stored in two

variablesmouseXmouseY

Now you can use those variables in your code to draw the position of the mouse

What is a Variable - Examples

A logical variable is called a Boolean – George Boole

Its yes or no, true or false , 1 or 0Simple to useboolean theTruth;theTruth=true;

Variables – Logical

Debugging – all code has bugs – find em’If you want to see what a variable looks likeThis is called debugging – we use a command

called printlnprintln(variable );println(“The variable x=“ + x);

How to see what a variable is - DEBUG

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

Using Variables

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);

Using variables in the sketch

A clock has 12 points – how would you draw a line from the centre ?

Variables – A Circle Example

Centre Point x,y

Calculated x,y

Assignment – The Mouse Move

// Variablesvoid setup(){

size(300,300);}void draw(){

background(0);ellipse(mouseX,mouseY,30,30);

}

Variable!

Code here to draw 60 points on a circle – variables!

Clock - Calculate

// 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 statementDepending on the outcome of something you

can execute a block of code

The IF Statement

The IF Statementif ( something ){Do this

}else{Do that

}

Variables – mostly usedYou can compare a variable to a number or

another variableIf ( mouseX == 100 ) {

line(x,y,w,z);

}If (mouseX > 100 )

stroke(1,2,3);

Elsestroke(4,5,6);

}

The something! - Expressions

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

IF Expressions

Use the previous example

Lets code the IF

void draw(){

if ( mouseX > 100 ) { ellipse(50,50,10,10);}else{ ellipse(20,20,10,10);}

You can use AND and ORAND is

(X == Y)&& (X > 10)OR is

(X > Y) || (X>3)IF Would then look like

If (( X > Y ) || ( X > 3 )) {

// Do Stuff}

IF Expressions – Combine them

Write an App that draws different colours in 4 boxes when the mouse moves into it.

Exercise – The Microsoft Logo!

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?

Exercise – Microsoft Logo

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.

Assignment 3 – The Logo

Graphical User InterfaceConcept of Objects on the Screen

ButtonsWindowsText BoxesRadio SwitchesSlidersWheelsOn/Off SwitchesInvent Your Own

The GUI

Based on a toolkit or a library of existing codeUsually 3 Stages

1 – Declare the Object variable2 – 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

The GUI

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

GUI - Need to install the Library

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

The GUI

Go to barclaysapps.wordpress.comLook for the example – GUI StuffPaste that inNote how much simpler the code isNow run it – have a play and see if you can

change some of the button objects.You could use this in your app design

GUI – Example

Loops repeat tasksVery handy for being loopy in your codeTwo different types:

While LoopFor Loop

Loops

Images – Displaying picturesMotion – Some Animation techniquesCode - Functions – how to make code simplerThe Robot – using picturesArduino – First Project – The Button

More Features

Objects – the core of modern programmingArrays – how to have lots of data3D – How to draw in 3DArduino – The 7 Segment Display

Week 4

Arduino – Putting it TogetherThe 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

Week 5

Internet Applications – Web Servers – how do they work

An Introduction to HTML and JavascriptHow to Write a Web Application Coding HTMLCreating a web application

Week 6

Project ProgressWriting a Web Application and using a simple

Web ServiceA look at Mobile applications – Android and

iPhoneDoing some coding – A simple smartphone

application using Processing for Android

Week 7

Web Applications Part 2Finishing Web ApplicationFinal Review of Projects – Prizes awarded to

best team

Week 8

General Notes

Getting Started

Anatomy of a computer

Disk Storage

MemoryInput

Net

wor

k

Output

Programs

CPU

All computer languages have a simple syntaxSyntax describes rules of a language is written

Everything is line by lineOne command per lineThe curly bracket is used { }To draw a circle – use the ellipse command

Notes on Syntax

ellipse( centre x, centre y , width x , width y);

command valuesSemicolon –

end of commandbracket

bracket

Divided into Pixels – Picture ElementsX = LengthY = HeightX and Y = ResolutionEach Pixel has an “Address”(X,Y)X ALONGY DOWN

The Screen

(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 directionWhen the user user tells you to stop:

Clear the Screen

The Text Program - 1

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

The User

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

The Keyboard

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

The Buffer

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 AlongY Down

The Monitor

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 }

Code Rules

Loops – make the code repeat - for for ( variable=0; variable < total repeats ;

variable++ ){

Repeat the code }

Or use whileWhile ( something is true ) {

Repeat this code here}

Code Rules

Ellipse(start_x,start_y,width,height);

Mini Reference