Java Programming

Java Programming Khan Academy and Mrs. Beth Cueni

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

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

Rectangles • Rect (10, 20, 100, 200); • 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, 200, 100, 50); • 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); • 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 • Stroke (255,0,0); • Fill (0,0,255); • noFill; • noStroke;

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 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); • Will draw a rectangle and color it green

noStroke noFill • noStroke(); – no outline will display for the object • noFill(); – 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 • variable = value • Don’t say equals say “gets” • The value is assigned to the variable

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

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

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

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

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

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

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

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

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

Adding strings textSize(30); var myName = “Mrs. Cueni"; var message = myName + "!!!"; 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 mouseX and mouseY the string or text will follow your mouse

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

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

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

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

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 • mouseIsPressed If (mouseIsPressed) { ellipse (mouseX, position, 50, 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

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

Logical operators • && means AND • || means OR • 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 • 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. • How long should we repeat? • 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 = getImage("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 < xPositions.length; i++) { drawWinston(xPositions[i], yPositions[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 houseFurniture = [‘chair’, ‘couch’, ‘table’]; Use brackets, not parenthesis

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

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

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

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++;}

Java Programming