learning to code
Post on 13-Mar-2016
27 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related