Java Programming Khan Academy and Mrs Beth Cueni

Java Programming Khan Academy and Mrs. Beth Cueni

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

Drawing Basics Ø Commands l l l Rect Ellipsis Line Ø These commands are considered to be functions and accept parameters

Rectangles Rect (10, 20, 100, 200); Ø l l Ø 10 is the x position (upper left corner) 20 is the y position (upper left corner) 100 is the width 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

Ellipse Ø Ellipse (200, 100, 50); l l 200, 200 pixel location for the center of the circle 100 width 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

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

Coloring Commands Ø l l Stroke (255, 0, 0); Fill (0, 0, 255); no. Fill; no. Stroke;

Stroke Ø Border color of the object Ø Stroke (r, g, b); l l l 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 third number indicates the intensity of the color blue – stroke (0, 0, 255);

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

no. Stroke no. Fill Ø no. Stroke(); – no outline will display for the object Ø no. Fill(); – the object will not be colored

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 l variable = value Ø Don’t say equals say “gets” Ø The value is assigned to the variable

Using variables as parameters var face. X = 200; var face. Y = 200; var face. Size = 100; fill(0, 0, 0); Ellipse (face. X, face. Y, face. Size); // face

Defining variables relative to others // now we use those variables to place and size // the ears relative to the face ellipse(face. X - face. Size * 0. 7, face. Y - face. Size * 0. 6, face. Size * 1. 1); // left ear ellipse(face. X + face. Size * 0. 7, face. Y - face. Size * 0. 6, face. Size * 1. 1); // right ear

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

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

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

mouse. X and mouse. Y mouse. X – x position of your mouse. Y – y position of your mouse

New way to increment X = x + 1; Can be written X +=1; x += 1; y -= 2; ball. Width *= 0. 99; ball. Height /= 1. 01;

Another shortcut eye. Size = eye. Size + 1 OR eye. Size +=1; OR eye. Size ++;

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

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

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

Adding strings text. Size(30); var my. Name = “Mrs. Cueni"; var message = my. Name + "!!!"; text(message, 41, 30); This displays Mrs. Cueni!!!

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 mouse. X and mouse. Y the string or text will follow your mouse

Making text larger var how. Big = 30; var draw = function() { how. Big = how. Big + 1; text. Size(how. Big); background(0, 238, 255); var my. Name = “Mrs. Cueni"; var message = my. Name + "!!!"; text(message, mouse. X, mouse. Y); };

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

New JAVA commands Ø Random (50, 350); l Generates a random number from 50 -350

Passing parameters You can pass parameters in a function draw. Circles (10, 30); draw. Circles (200, 30); Ø Var draw. Circles = function (circle. X, circle. Y){ }; Passes 10 to circle. X and 30 to circle. Y Passes 200 to circle. X and 30 to circle. Y

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

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

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

New JAVA commands Ø mouse. Is. Pressed If (mouse. Is. Pressed) { ellipse (mouse. X, position, 50); } Ø Random (0 , 1) generates a number between 0 and 1 to three decimal places

New JAVA commands Ø Round (0. 2314) will round to 0 Ø Round (0. 7341) will round to 1

Operators Operator Meaning === !== > >= < <= Strict equality Strict inequality Greater than or equal Less than or equal True expressions my. Age === 53 my. Age !== 52 my. Age > 21 my. Age >= 53 my. Age < 55 my. Age <= 53

Difference between = and === Ø A single = assigns a value to a variable var my. Age = 56 Ø === checks for equality If (my. Age === 53){ }

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

Looping While loops For loops Nested loops

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

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

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

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

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 ( ; ; ) { }

For loop example for (var i = 0; i < x. Positions. length; i++) { draw. Winston(x. Positions[i], y. Positions[i]); }

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

Arrays Ø Variable is like a drawer Ø Arrays are like a chest of drawers Ø Pill case example

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 house. Furniture = [‘chair’, ‘couch’, ‘table’]; Use brackets, not parenthesis

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

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

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

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

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

Objects Create objects if you want to keep track of a bunch of properties for a single variable var cueni. Age = 53; var cueni. Eyes = “brown”; var cueni. Likes = [“walking”, “sewing”];

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

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

Array of Objects my. Cats is the name of the array The array has two objects: name and age

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

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

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

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. x = x; this. y = y; };

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

Programming is scary? https: //www. youtube. com/watch? v=w. Nbe. XD 2 w. F 1 g