1. Java Programming Khan Academy and Mrs. Beth Cueni

2. Table of contents  Drawing basics Drawing basics Drawing basics  Coloring Coloring  Variables http://www.youtube.com/watch?v=Rwbg_0YGdfs Variables http://www.youtube.com/watch?v=Rwbg_0YGdfs Variables http://www.youtube.com/watch?v=Rwbg_0YGdfs  Animation basics Animation basics Animation basics  Text and strings Text and strings Text and strings  Functions Functions  Logic and If statements Logic and If statements Logic and If statements  Looping Looping  Arrays Arrays  Objects Objects  Object oriented programming Object oriented programming Object oriented programming

3. Drawing Basics  Commands Rect Rect Ellipsis Ellipsis Line Line  These commands are considered to be functions and accept parameters

4. Rectangles  Rect (10, 20, 100, 200); 10 is the x position (upper left corner) 10 is the x position (upper left corner) 20 is the y position (upper left corner) 20 is the y position (upper left corner) 100 is the width of the rectangle in pixels 100 is the width of the rectangle in pixels 200 is the height of the rectangle in pixels 200 is the height of the rectangle in pixels  Screen position is measured in pixels and the screen is 400 x 400 pixels

5. Ellipse  Ellipse (200, 200, 100, 50); 200, 200 pixel location for the center of the circle 200, 200 pixel location for the center of the circle 100 width in pixels of the ellipse 100 width in pixels of the ellipse 50 height in pixels of the ellipse 50 height in pixels of the ellipse If the last two numbers are the same, you can make a perfect circle If the last two numbers are the same, you can make a perfect circle

6. Lines  Line (34, 67, 123, 231); 34 and 67 – how far over and down the line should start 34 and 67 – how far over and down the line should start 123 and 231 – how far over and down the line should end 123 and 231 – how far over and down the line should end

7. Coloring  Commands Stroke (255,0,0); Stroke (255,0,0); Fill (0,0,255); Fill (0,0,255); noFill; noFill; noStroke; noStroke;

8. Stroke  Border color of the object  Stroke (r, g, b); The first number indicates the intensity of the color red - stroke (255, 0, 0); The first number indicates the intensity of the color red - stroke (255, 0, 0); The second number indicates the intensity of the color green – stroke (0, 255, 0); The second number indicates the intensity of the color green – stroke (0, 255, 0); The third number indicates the intensity of the color blue – stroke (0, 0, 255); The third number indicates the intensity of the color blue – stroke (0, 0, 255);

9. Fill  Color of the inside of the object being drawn  Rect (10, 20, 100, 200);  Fill (0, 255, 0); Will draw a rectangle and color it green Will draw a rectangle and color it green

10. noStroke noFill  noStroke(); – no outline will display for the object  noFill(); – the object will not be colored

11. Variables   Think of a variable as a bucket   The value is the contents of the bucket   no spaces in variable name   Must be in this format variable = value   Don’t say equals say “gets”   The value is assigned to the variable

12. Using variables as parameters var faceX = 200; var faceY = 200; var faceSize = 100; fill(0, 0, 0); Ellipse (faceX, faceY, faceSize, faceSize); // face

13. Defining variables relative to others // now we use those variables to place and size // the ears relative to the face ellipse(faceX - faceSize * 0.7, faceY - faceSize * 0.6, faceSize * 1.1, faceSize * 1.1); // left ear ellipse(faceX + faceSize * 0.7, faceY - faceSize * 0.6, faceSize * 1.1, faceSize * 1.1); // right ear

14. Animation basics Bunch of drawings played fast enough it looks like it is moving Use a function

15. Animation function var draw = function() { // this is the draw loop! everything inside these // brackets will be run over and over again. }; }; Get into the habit of indenting all code within the { } for easier readability

16. Animated Car example explained Identify the X command outside the loop to start Incrementing the value of x within the loop X = X + 1 May need to refresh the background within the loop

17. mouseX and mouseY mouseX – x position of your mouse mouseY – y position of your mouse

18. New way to increment X = x + 1; Can be written X +=1; x += 1; y -= 2; ballWidth *= 0.99; ballHeight /= 1.01;

19. Another shortcut eyeSize = eyeSize + 1 OR eyeSize +=1; OR eyeSize ++;

20. Text and Strings commands  textSize(46); Similar to font size Similar to font size  fill(8, 142, 204); Similar to font color Similar to font color  text("Sophia", 114, 120); Identifying the actual text and the location Identifying the actual text and the location

21. Text and strings Text (“hello”, 60, 55); where 60, 55 locates the lower left start point of the text NOT the upper right as in rectangles where 60, 55 locates the lower left start point of the text NOT the upper right as in rectangles

22. String command // think of string = text fill (92, 24, 219); textSize (30); var myName = “Mrs. Cueni"; text(myName, 41, 30); text(myName, 41, 60); text(myName, 41, 90);

23. Adding strings textSize(30); var myName = “Mrs. Cueni"; var message = myName + "!!!"; text(message, 41, 30); This displays Mrs. Cueni!!!

24. Animate text You can animate text by putting the text inside the draw function and it will be repeated over and over If you replace the screen location with mouseX and mouseY the string or text will follow your mouse

25. Making text larger var howBig = 30; var draw = function() { howBig = howBig + 1; howBig = howBig + 1; textSize(howBig); textSize(howBig); background(0, 238, 255); background(0, 238, 255); var myName = “Mrs. Cueni"; var myName = “Mrs. Cueni"; var message = myName + "!!!"; var message = myName + "!!!"; text(message, mouseX, mouseY); text(message, mouseX, mouseY);};

26. Functions  Java has built in functions but you can also make your own functions Var drawComputer = function() { } Var tells it to run the function drawComputer is the name of the function

27. New JAVA commands  Random (50, 350); Generates a random number from 50 -350 Generates a random number from 50 -350

28. Passing parameters  You can pass parameters in a function drawCircles (10, 30); drawCircles (200, 30); Var drawCircles = function (circleX, circleY){ }; Passes 10 to circleX and 30 to circleY Passes 200 to circleX and 30 to circleY

29. Global functions  Sometimes called Magic functions  For example the function Draw gets called over and over again  Sometimes this is not efficient  Custom functions can be called

30. Local and Global functions  If the variable is defined in a function, it is considered a local value to the function  You can turn the variable into a global variable if it is defined outside the function  Local variables – within a function  Global variables – defined outside the function

31. Logic and If statements  Boolean expressions give a result of TRUE or FALSE  Created by George Boole  If a certain condition is true execute the following code

32. New JAVA commands  mouseIsPressed If (mouseIsPressed) { ellipse (mouseX, position, 50, 50); }  Random (0,1) generates a number between 0 and 1 to three decimal places

33. New JAVA commands  Round (0.2314) will round to 0  Round (0.7341) will round to 1

34. Operators OperatorMeaning True expressions === Strict equality myAge === 53 !== Strict inequality myAge !== 52 > Greater than myAge > 21 >= Greater than or equal myAge >= 53 < Less than myAge < 55 <= Less than or equal myAge <= 53

35. Difference between = and ===  A single = assigns a value to a variable var myAge = 56  === checks for equality If (myAge === 53){ }

36. Logical operators  && means AND  || means OR Sometimes called pipes Sometimes called pipes Located below the backspace key Located below the backspace key If not on your keyboard, use shift +\ If not on your keyboard, use shift +\

37. Looping While loops For loops Nested loops

38. While loop example fill(120, 9, 148); var message = "Loops are REALLY awesome!???"; var y = 40; while (y < 400) { text(message, 30, y); text(message, 30, y); y += 20; y += 20;}

39. Loop questions 1. What do I want to repeat? The text function with the message! 2. What do I want to change each time? - The y position, increasing by 20 each time. 3. How long should we repeat? 1. As long as y is less than 400

40. Repetitive code Ask yourself if you can use a loop when you see code that repeats Loops have built in code that tells it to repeat the content of the loop until the condition is satisfied

41. Balloon Hopper program The command to get the image of Hopper var hopper = getImage("creatures/Hopper- Jumping"); image(hopper, 223, 232);

42. For loops More concise than While loops Trick used in the example is to comment out the code /* */ Format – three parts only use two ; // for (start; how long; change) for ( ; ; ) { }

43. For loop example for (var i = 0; i < xPositions.length; i++) { drawWinston(xPositions[i], yPositions[i]); }

44. Nested For loops A loop within a loop Decide what loop controls what Inner loop – number of gems Outer loop – number of rows Think of any 2-d objects to convert to nested loops

45. Arrays  Variable is like a drawer  Arrays are like a chest of drawers  Pill case example

46. Format of array To create an array, we declare a variable like we always do, but then we surround our list of values with square brackets and separate each value with a comma: var houseFurniture = [‘chair’, ‘couch’, ‘table’]; Use brackets, not parenthesis

47. Defining arrays var myTeachers = [“Cueni", “Mesh", “Hamilton"]; // myTeachers[1] fill(255, 0, 0); text( myFriends[1], 10, 30); This shows Mesh Why???? Arrays start numbering at 0

48. Length of the array myTeachers.length – keeps updating and returns the number of elements in the arrayas you add elements

49. Arrays and loops Arrays and loops work really well together 1. What do I want to repeat? 2. What do I want to change each time? 3. How long should we repeat? Can use While or For loops

50. Arrays and loops var myTeachers = [“Cueni", “Mesh", “Hamilton", “Vidmar", “Craigo", “Baird"]; var teacherNum = 0; while(teacherNum < myTeachers.length) { text(myteachers[teacherNum], 10, 30+teacherNum*30); teacherNum++;} teacherNum++;}

51. Adding values to an array var xPositions = [100, 200]; var draw = function() { if (mouseIsPressed) { xPositions.push(mouseX); } Where ever the mouse is clicked, that X value is added or pushed onto the length of the array. (Starts with two values)

52. Objects Create objects if you want to keep track of a bunch of properties for a single variable var cueniAge = 53; var cueniEyes = “brown”; var cueniLikes = [“walking”, “sewing”];

53. Identify objects var cueni = { age: 53, eyes: “brown”, likes: [“walking”, “sewing”], isCool: “false”, }; Called properties of cueni Each item is called a key Key of age with a value of 53

54. To display object values text(“Mrs Cueni is “ + cueni.age + “ years old”, 10, 50); Text(“Mrs. Cueni has “ + cueni.eyes + “ eyes”, 10, 70);

55. Array of Objects myCats is the name of the array The array has two objects: name and age

56. Cat example Array of objects var myCats = [ {name: "Lizzie", age: 18}, {name: "Daemon", age: 1}]; for (var i = 0; i < myCats.length; i++) { var myCat = myCats[i]; println(myCat.name + ' is ' + myCat.age + ' years old.'); }

57. Object Oriented Programming  Why is it useful? Many items have the similar properties and object oriented programming allows you to pass and share the properties Many items have the similar properties and object oriented programming allows you to pass and share the properties  Object literals Similar in nature with different properties Similar in nature with different properties StudentsStudents Name Name Age Age Height Height Eye color Eye color Hair color Hair color

58. 2 Object literals with properties and values var winstonTeen = { "nickname": "Winsteen", "nickname": "Winsteen", "age": 15, "age": 15, "x": 20, "x": 20, "y": 50 "y": 50}; var winstonAdult = { "nickname": "Mr. Winst-a-lot", "age": 30, "age": 30, "x": 229, "x": 229, "y": 50 "y": 50};

59. Object types defined Object name starts with capital letter Winston Constructive function var Winston = function(nickname, age, x, y) { this.nickname = nickname; this.age = age; this.age = age; this.x = x; this.x = x; this.y = y; this.y = y;};

60. Object prototype Property of an object and you can attach functions or behaviors. Know as a Methods

61. Programming is scary? https://www.youtube.com/watch?v=wNbeXD 2wF1g https://www.youtube.com/watch?v=wNbeXD 2wF1g