Learning to Code

1. Learning to Code Beech Hall School Computing Science Course

2. Purpose of the 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….

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

4. Famous People in IT • 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

5. Famous People in IT • 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

6. Getting Started • 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!

7. Getting Started • 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

8. Getting Started - Apps • 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

9. Processing – the IDE • 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

10. IDE Layout • Start the Processing app • You can start writing code immediately

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

12. Processing First Sketch Start the sketch Stop the Sketch Code

13. Processing First Sketch You should see this!!!!

14. Moving On • 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

15. Colors Colours • 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 • http://www.calculatorcat.com/free_calculators/color_slider/rgb_hex_color_slider.phtml

16. How to get colours in code • 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);

17. Thickness • 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);

18. Primitives 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. 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);

19. Computer Programming • 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

20. Comments • 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

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

22. Sketch Structure • Setup – setup functions • Draw – draw – in a loop // Variables here void setup() { } void draw() { }

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

24. What’s a Variable ? • 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! 100 300 CentreX line(CentreX,CentreY,20,10);

25. A Variable • It has a type • Number • String • Logical – True or False

26. Variables – A Circle Example • A clock has 12 points – how would you draw a line from the centre ? Calculated x,y Centre Point x,y

27. More what’s a Variable? • 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 )

28. Declaring a Variable • 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,4 • 1.4544 , 45.55566 • TRUE or FALSE” • “This is a sentence”, “So is this”

29. Variable Example • intdave; // Type • dave=10; // Value • int radius_1; • int radius_2; • radius_1=100; • radius_2=150; • String name; • Name=“Missing Word”;

30. Lets code it - variable 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); }

31. What is a Variable - Examples Tell the program what type – int - Integer • intmyVariable_x; • intmyVariable_y; • myVariable_x=10; • myVariable_y=10; • ellipse(myVariable_x,myVariable_y,100,100); Tell the program what value – 10 Now you can use myVariable_x anywhere in the code without having to type 10

32. What is a Variable - Examples • 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

33. Variables – Logical • A logical variable is called a Boolean – George Boole • Its yes or no, true or false , 1 or 0 • Simple to use • booleantheTruth; • theTruth=true;

34. How to see what a variable is - DEBUG • 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);

35. Using Variables • You can use variables like this: • int a; • int b; • b=10; • a = b+5;

36. Using variables in the sketch • 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);

37. Variables – A Circle Example • A clock has 12 points – how would you draw a line from the centre ? Calculated x,y Centre Point x,y

38. Assignment – The Mouse Move // Variables void setup(){ size(300,300); } void draw(){ background(0); ellipse(mouseX,mouseY,30,30); } Variable!

39. Clock - Calculate • 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();

40. The IF Statement • If – its called a conditional statement • Depending on the outcome of something you can execute a block of code

41. The IF Statement • if ( something ) • { • Do this • } • else • { • Do that • }

42. The something! - Expressions • 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); }

43. IF Expressions • (X == Y) • (X > Y) • (X < Y) • (X >= Y) • (X <= Y)

44. Lets code the IF • Use the previous example void draw() { if ( mouseX > 100 ) { ellipse(50,50,10,10); } else { ellipse(20,20,10,10); }

45. IF Expressions – Combine them • 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 }

46. Exercise – The Microsoft Logo! • 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!

47. Exercise – Microsoft Logo • Try the mousePressed variable – how do you think that might work ? • A bit of 3D for Windows 8?

48. Assignment 3 – The 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.

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

50. The GUI • 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