Intermediate Programming in Java

Intermediate Programming in Java

Hello, and welcome to the course page! We will be using this for our daily agenda, as well as a place to post useful links and explanations of assignments. Be sure to check here at the beginning of class every day, and please use this to review and preview outside of class.

 

If you have any questions, please feel free to email me at michael@ilabliberia.org

 

Thank you,

Michael Madaio

 

All of the code we’ve used in class – A Google Doc with all of our code for you to copy and start fresh.

 

 

Helpful Links and Resources:

 

  • OpenProcessing – a great community of people making cool things with Processing – This includes their finished sketches AND their source code.
  • The Nature of Code – An in-depth website on using Processing to simulate real world physics
  • A several hundred page textbook by the creators of Processing
  • StackOverflow – a community of programmers discussing issues – not Processing-specific, but might be useful for error messages or concepts.

 

 

Day 12 (7/25/14)

 

This is the last day! We will have until 5:00 to finish your projects, then we will take a brief survey on the course, before we go around for each person to demonstrate their project for the class. Remember, it doesn’t need to be a game. It can just be an interactive graphic display.

 

 

Before we demo our projects, we will take our end of class survey.

 

Congrats! Check the Google Doc for some extra bonus code I’ll be sharing today, and I’ll open to for anyone to access so you can share YOUR code with other people!

 

Please continue learning! There are links above that will teach you everything you want to know, AND more! And they’re all free. Practice, practice, practice. Watch tutorials, read explanations (and the API), find other people’s code, and copy it, understand it, and change it to make it your own!

 

Please stay in touch!

 

 

 

 

Day 11 (7/23/14)

 

This is our second to last day! Today we will start to use everything we have learned to make a simple game, or interactive visualization.

 

 

What do you want to make, with the skills you’ve learned so far?

 

  • Using mouseX and mouseY to check the mouse position and use it for something
  • Using mousePressed, mouseClicked, keyPressed, and the key variable to receive keyboard and mouse input.
  • Creating text (Either strings or variable integers)
  • Importing images
  • Using 2D primitive shapes (line, rect, ellipse)
  • Changing colors of shapes, changing background colors
  • Changing size of objects
  • Changing position (“movement” or “speed”)
  • Changing rate of position change (“acceleration” or “falling” or “gravity”)
  • Checking position against other factors (“bouncing” “walls” “floor” “ceiling” “encountering other objects”)
  • Creating a variable sized class of objects with shared characteristics (variables) and behavior (functions).
  • if/else conditionals to check if a condition is true or not
  • for loops to run while a certain condition is occurring “for (int i=0;i<10;i++) {“
  • What else did I miss?
Some possible simple games to make in the next 3 days:
  • Pong
  • Golf
  • Chase a ball game?
  • Falling game?
  • Flying bird game?
  • Marbles?
  • Pool?
  • Football?
  • Snake?
  • What else??
On Friday, you will demo them for the class, and you will get the chance to play each others’ games!
I’m excited!

 

 

Day 10 (7/21/14)

 

We will start by reviewing the mousePressed, mouseX and mouseY, and keyPressed commands from Friday, so if you have yours open and running, experiment with different ways you could turn that into a game. Perhaps, consider some of the other code we’ve used already, such as gravity/friction, arrays, or collision/boundary checks.

 

Today we will learn how to import an image into your file, so that rather than moving a circle, you can move a cat, or a picture of your face. Or any .jpeg, .jpg, or .png.

 

We will also learn how to add text on the screen to display, for instance, a score.

 

See the code in the Google Doc called: Chase with Image, and Chase with Image and Text.

 

At this point, start to think about the game you want to make! You’ll have the rest of the week to work on it, so think about something you can achieve in 2 classes (Wednesday and Friday), with the code that you know now. Good ones might be marbles, pool, golf, pong, snake, football, and others. What do you want to make? How would it work in Processing?

 

 

Day 9 (7/18/14)

 

We started fresh with a single primitive shape, either an ellipse or a rect, and added user interaction in the form of mousePressed, the mouseX and mouseY, and keyPressed.

 

Check out either our sample code for the files called Chase #1, 2, and 3, or look at the Processing API, or Reference, page for explanations of how to use those Booleans (true/false).

 

 

Day 8 (7/16/14)

 

Reviewed gravity and friction, creating bouncing balls. This is listed as Ball Array #3 on the Google Doc.

 

 

Day 7 (7/14/14)

 

I will NOT be gone today. We will still use this as a chance to catch up with what we did last week, using the course notes or the Processing Tutorials on their website. Feel free to ask someone nearby you for assistance, if those two places don’t help.

 

 

If you successfully had an array of balls last week, and feel like you understood the concept, you have a couple of options of what to do today.

 

  • Fix the random placement error that causes some to start out “inside” the walls.
  • Add gravity.
  • Add friction. (meaning, they will get “slower” and “slower” with each time they change direction, like how friction works in the real world.
  • Making larger balls move slower than smaller balls. (giving a sense of “mass” or “weight”)
  • Make them change color when they bounce?
  • Make them change size when they bounce??
  • Make them change direction when they encounter the mouse (mouseX, mouseY)?
  • Make them change size or color when they encounter the mouse?
  • Adding more classes, with different shapes, or different properties (ie: still using an ellipse, but with different internal functions, rather than move and boundaryCheck)
This might be more difficult:
  • Using mouseClick or mousePressed to affect the speed, direction, size, or color of the balls.
  • Having the balls collide with each other, changing their direction (and reducing their speed) each time.

 

 

Have fun!! See you on Wednesday!

 

 

 

 

Day 6 (7/11/14)

 

Review:

 

On Wednesday, we learned how to create multiple instances of a class, by “passing in” parameters to the constructor, and assigning those to temporary variables.

 

In your main tab, you should have the following: (feel free to copy this and paste it into Processing)

 

 

Ball newBall;
Ball ball2;
Ball ball3;

void setup() {
size(640,480);
newBall = new Ball(100, 1, 5, width/2,height/2,100);
ball2 = new Ball(200, 2, 10, width/4, height/4, 200);
ball3 = new Ball(50, 4, 1, width/8, height/8, 50);
// add a 4th ball, with different parameters
}

void draw() {
background(0,100,100);
newBall.move();
newBall.display();
ball2.move();
ball2.display();
ball3.move();
ball3.display();
}

 

 

 

In your Ball tab, you should have the following:

 

 

 

class Ball {
color c;
float xpos;
float ypos;
float xspeed;
float yspeed;
int diameter;

 

Ball(color tempC, float tempXspeed, float tempYspeed, float tempXpos, float tempYpos, int tempDiameter) {
c = tempC;
xpos = tempXpos;
ypos = tempYpos;
diameter = tempDiameter;
xspeed = tempXspeed;
yspeed = tempYspeed;
}

 

void move() {
xpos += xspeed;
ypos += yspeed;

 

// make this a boundsCheck function
if (xpos + diameter/2 >= width || xpos – diameter/2 <= 0) {
xspeed *= -1;
}

 

if (ypos + diameter/2 >= height || ypos – diameter/2 <= 0) {
yspeed *= -1;
}
}

void display() {
fill(c);
ellipse(xpos, ypos, diameter, diameter);
}

}

 

 

 

Keep a few things in mind:

  • The order that you create the parameters of the constructor (in the Ball tab), needs to be the same as the order you “pass in” the parameters in each ball instance (in the main tab).
  • Make sure you set each generic variable (xSpeed, for instance) equal to a temporary version of that variable (tempXSpeed).
  • Make sure YOUR variable names are consistent within your program.
  • Check your brackets.
If you already have this, try to add in a random integer for some of the values:
  • random(minValue,maxValue)    // The default data type for this is a float, but you can make it an integer if you want by writing:
  • int(random(minValue,maxValue))
  • If you only have one parameter, it assumes the minValue is 0, and it uses your single parameter as a maxValue.
Now….
We will be creating an Array, or a list of balls. See below for your main tab:

Ball [] balls = new Ball[10];       // Notice the square brackets [ and ] enclosing the number of Balls.

 

 

 

void setup() {
size(640,480);
for (int i = 0; i < 10; i++) {
balls[i] = new Ball();     // balls[0], balls[1], balls[2], balls[3], etc
}
}

 

 

void draw() {
background(0,100,100);
fill(255);
for (int i = 0; i < 10; i++) {
balls[i].move();
balls[i].boundaryCheck();
balls[i].display();
}
}

The variable “i” is created inside the for loop’s check condition:
for (int i = 0; i < 10; i++)
This means, for the integer “i”, which starts at 0, and UNTIL it equals 10, then increase it by 1 each loop (++ means increase by 1). So, the code inside the for loop will execute when i = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 (but not 10, since we said i < 10).
This is true both in the setup() function, and in the draw() function. Then the code runs for each numbered instance of the ball class.
balls[0].move();
balls[0].boundaryCheck();
balls[0].display();
Then….
balls[1].move();
balls[1].boundaryCheck();
balls[1].display();
And so on.
This is what your constructor will look like, in the Ball tab:
Ball() {
x = random(width);
y = random(height);
xSpeed = random(0,10);
ySpeed = random(0,10);
diameter = random(15,90);
}Next:

  • Try adding a random fill with r,g,b. How would you do it? Where would the fill() function go? In the draw() still? Or would it go in setup?
  • Notice how sometimes, some of the balls will start “inside” the “walls” of the window, and get stuck there? Why do you think this is? How could we prevent this?
  • Now, let’s add gravity!

 

 

 

 

 

Day 5 (7/9/14)

When we left yesterday, we had begun our exploration of Object-Oriented Programming, or defining a class of objects with similar characteristics (size, position, speed, etc), and behaviors (functions like move, display, boundaryCheck, etc).

 

 

Remember that you should have 2 tabs – your main tab with the setup() and draw() functions, as well as the creation of a specific instance of your Ball class, and the 2nd tab which should include all of the information specific to the Ball class.

 

 

In your main tab:

 

 

Ball ball1;

 

void setup()  {

size(600,600);

Ball ball1 = new Ball();

}

 

void draw() {

 

background(255);

ball1.move();

ball1.boundaryCheck();

ball1.display();

}

 

 

 

That’s it.

 

Now, in your 2nd tab, (called Ball), you will have all of your Ball class info.

 

 

class Ball {

color c;
float xpos;
float ypos;
float xspeed;
float yspeed;
int diameter;

 

Ball() {       // This is the constructor, where we assign values to the variables.

c = 150;

xpos = 100;

ypos = 100;

xspeed = 10;

yspeed = 5;

diameter = 80;

}

 

void move() {

// put all the move code here

}

// put your void boundaryCheck() and void display() code here.

 

 

}    // This bracket closes the bracket for the ENTIRE class Ball tab.

 

 

 

 

 

 

Before we go on, let’s please take a few minutes to take a brief survey.
Part of what I’m doing here at the iLab is researching how places like the iLab function, and how members of the community take advantage of the resources offered here. For this, I will be giving a “pre” course survey (this one), and a survey at the end of the course. If you’ve already taken it for another course, you do not need to take it again.
Thanks for your participation!

 

 

 

Now we will talk about how to add multiple instances of the same class. What does this mean? Well, in “Object-Oriented Programming”, we want to deal with large groups of objects that have similar characteristics and largely similar functions and behaviors, but with different variations on those. For instance, we might want to have 4 balls, all of which follow the same basic rules for display and movement and have the same basic characteristics (x,y, diameter, diameter) and a color.

 

 

 

Each class tab starts with declaring the local variables that pertain to it:   (BUT, not yet assigning them values ( int diameter = 100;)

 

class Ball {
color c;
float xpos;
float ypos;
float xspeed;
float yspeed;
int diameter;

 

// note that the bracket remains open… everything else below is INSIDE the Ball class, including all of the functions that we had in our main tab before.

 

 

NOW, in our constructor, where we had assigned each variable to a single value (when we did this yesterday, with ONE ball), we want to be able to have multiple values for each variable.

 

We will do this with what we call a temporary variable, and for ease of reference, we will say tempXspeed, tempYspeed, tempC, tempDiameter, etc)

 

In the parameters of our Ball constructor, we will set these in whatever order you want (BUT, remember the order, so you can “pass” in the values in the correct order in your main tab). They require the data type in front of them, since this is the first time the program is encountering these values, so you need to tell it what data type to prepare for (int, float, color, string (which we haven’t used yet)).

 

Then, within the brackets of the constructor, set the main class variable (c, xpos, ypos, etc), = to the temporary ones you’ve just passed in.
Ball(color tempC, float tempXspeed, float tempYspeed, float tempXpos, float tempYpos, int tempDiameter) {
c = tempC;
xpos = tempXpos;
ypos = tempYpos;
diameter = tempDiameter;
xspeed = tempXspeed;
yspeed = tempYspeed;
}

 

// The Ball(color tempC….) etc is called the constructor, and that is where we set the variables to temporary versions of those variables to be changed when we create a new instance of this class in our main page.

 

 

 

Now, at the top of your main tab, create 3 instances of type Ball:

 

Ball ball1;
Ball ball2;
Ball ball3;

 

Then, within your setup function, create them using any parameters you like (BUT, in the specific order which you set the temporary variables in your class constructor).

 

size(640,480);

ball1 = new Ball(50, 1, 1, width/2,height/2, 200);
ball2 = new Ball(100, 2, 5, width/4, height/4, 100);
ball3 = new Ball(200, 4, 10, width/6, height/6, 50);

 

 

And…. in your draw() function, call the functions that you created INSIDE your Ball class tab:

 

 

void draw() {
background(0,100,100);
ball1.move();

ball1.boundaryCheck();

ball1.display();
ball2.move();

ball2.boundaryCheck();
ball2.display();
ball3.move();

ball3.boundaryCheck();
ball3.display();
}

 

 

 

 

 

 

Day 4 (7/7/14)

 

Welcome to the start of the 2nd week of this class. Today we will begin by reviewing the concepts from last week, and then move on to learn about “Object-oriented programming” (OOP).

 

 

Start by opening up your last script. You should have drawn an ellipse of any color, and had it moving left to right and up and down on a background of any color. Remember if you want a color other than black, grey, or white, you need to use the 3 parameters for color (red, green, blue), still from 0 to 255.You should have also been checking the edges of the circles (not the center) against the borders of the window, and causing the speed to change “direction” (meaning, going from positive to negative, or negative to positice), if the edge of the ellipse encountered the edge of the window. Think again about WHAT it is is you’re comparing, which is NOT x and y, but x + diameter/2 and y + diameter/2. Think about what you’re checking them AGAINST, which is either 0 or width (the built-in variable for the width of the window), or 0 and height (the built in variable for the height of the window). Unlike every other variable, you do not need to (in fact, should not) “declare” the width and height variables at the top of your program.

 

 

In case you missed it, or were a little behind on Friday, here is the code. Feel free to copy and paste this into your code editor, though be aware that the lines will not be indented the way that you would want them to be, though the program will still run.

 

 

int x = 100;
int y = 100;
int xSpeed = 1;
int ySpeed = 2;
color c = (150);
int diameter = 50;

void setup() {
size(640,480);
}

void draw() {
background(0,255,255);
move();
display();

}

void move() {
x += xSpeed;
y += ySpeed;

if (x + diameter/2 >= width || x – diameter/2 < = 0) {
xSpeed *= -1;
}

if (y + diameter/2 >= height || y – diameter/2 < = 0) {
ySpeed *= -1;
}
}

void display() {
fill(c);
ellipse(x, y, diameter, diameter);

}

 

 

 

Now we will be learning about how to create multiple “instances” of a “class” of objects. Think of these like trees: each one has a trunk, branches, and leaves, though the amount of them, the position, and their color and size might change. In our class tab, we will need to define the characteristics that will be associated with that class. In our ball example, it’s all of the information we need to know to create a ball. That includes what it DOES as well as what it looks like.

 

 

 

 

 

 

Day 3 (7/4/14)

 

Welcome to the end of the first week! We will begin by opening up the Moving Block programs that we ended with on Wednesday. If you had an ellipse, change it to a rectangle using the rect() function. Remember which parameters it takes (they’re different than the ellipse), and try to have the block move to the right, until it “hits” the right border of the window (or, as we remember, until the x coordinate of the right side of the block is more than or equal to the x coordinate of the window). Then, have it change direction (speed = speed * -1…. also known as speed *= -1). Then repeat the same bounds check for the left side of the window and the x coordinate of the left side of the block.

 

Remember a few things:

  • The x and y coordinate for rect() or the TOP LEFT corner of it, while x and y for ellipse are the CENTER.
  • The width of your window is determined by your size, with 0 being the x coordinate of the left side of the window, and the maximum size being the right side of the window.
  • Alternatively, you can use the built-in variables “width” and “height” which are assigned to the width and height values of the window.
IF you have a rectangle that moves right until the exact point where it encounters the border of the window, changes direction, then does the same at the left border, then try to experiment.
  • Set a goal, change the code, and see if what you predicted would happen actually did happen.
  • Maybe try changing the color of the block?
  • Adding another block starting at the bottom of the screen on the right side, and moving in opposite directions to the other one?
  • Making a single block move vertically instead of horizontally?
  • Making a single block move both vertically AND horizontally (diagonally)?
Let’s now add the y component to the movement. Therefore, we’ll need to increment our y coordinate in relation to a ySpeed variable (which you’ll need to declare, of course).
Then add another series of bounds checks like you had for x (you can copy it, just make sure the values you’re checking are correct, or else it won’t look right).

 

 

Great job! Outside of class, try to experiment more as we indicated above, with a different set of shapes, colors, and starting locations, sizes, and directions.

 

 

 

 

 

 

 

 

 

 

Day 2 (7/2/14)

 

Your challenge – and you have exactly 20 minutes to complete it – draw a stick figure in Processing, using only the functions you know now.

 

As a reminder, we have learned the following functions:

  • size()
  • background()
  • line()
  • strokeWeight()
And we talked about the following, very briefly:
  • stroke()
  • ellipse()
  • rect()
  • fill()
How detailed can you make it? 20 minutes, then we’re going to share them. Good luck.
Now, we will talk through in more detail how to use the ellipse() functions, rect() functions, and fill() to create a series of shapes. Remember that the order you call your functions in matters – stroke before the line you want to change, fill before the ellipse or rect that you want to fill, etc.
Here again is the more in-depth explanation of the parameters of these functions:
  • stroke() – which changes the color of the lines used. Its parameters are the same as background’s (either 1 for B/W, or 3 for RGB, all on a 0-255 scale).
  • rect() (meaning rectangle) – which takes 4 parameters – rect(x, y, width, height);    // The x and y coordinates are for the top left corner of the rectangle, which is the default. If you want to make the CENTER of the rectangle the position for x and y, then before you call rect(), you must call another function, rectMode(CENTER). For more info, see the Reference page.
  • ellipse() – which could be a circle, and takes 4 parameters – ellipse(x,y, width, height); // Except, ellipse’s default mode is CENTER. Be aware. This is often confusing at first.
  • fill() – which, fills in the drawn objects listed below it, again, with the same 1 or 3 parameters as background and stroke.
Finally, we will attempt to have our ellipse move. Let’s create a new sketch with 1 ellipse.
We want to try to have it move on its own. How would we do that?
Well, what does “move” mean? A changing x and y coordinate! How do we get the coordinate to change? Let’s make it a variable! While we’re at it, let’s make the diameter of the ellipse a variable as well. (in a circle, width and height are the same)
//At the top of your sketch, you will “declare” these global variables:
int x = 0;
int y = 0;
int diameter = 100;
ellipse(x,y, diameter, diameter);
Make sure that runs before doing anything else. Notice where the x any y coordinates placed the ellipse. If you want it to be different… change the variables.
Now, let’s create another variable to track the speed.
int speed = 5;
In our draw function, BELOW the ellipse() function, let’s make our x variable increase by the speed.

 

Now, we will create a “move” function, so we can move and also check to see if it has “hit” (or, met the x coordinate) of the “walls”.

 

 

 

void move() {
x += speed;

if (x + 250 >= width) {
speed = speed * -1;
}

if (x <= 0) {
speed *= -1;
}
}

 

Let’s call the move function within our draw loop.

 

 

 

Lastly, how would we make it “bounce” around the screen like a screensaver?

 

 

Day 1 (6/30/14) – An Introduction to Processing

 

For this course, we will be using a platform called Processing to visualize our Java code and create interactive visual art and simple games with it, in an effort to understand “object-oriented programming.” Perhaps differently than the programming you’ve done before, we will be learning how to work with objects, classes, and instances of classes in order to write that code that is more efficient and complex than we could otherwise do.

 

 

To open the Processing software, we will be using the Terminal command interface, which is a way to bypass the icons and windows of Ubuntu and access a lower level of command code. First, navigate to the “Terminal” by clicking on the Search icon on the top left corner of the screen and typing in Terminal. Once there, we will tell the Terminal to “change directory” to the Processing directory by typing “cd processing-2.2.1″ and pushing Enter. Next we will type ” ./processing” and push enter. Processing should then open.

 

 

If you have worked with Arduinos before, then you might recognize the IDE or, Integrated Development Environment, that Processing uses, as Arduino’s was modeled after Processing. Find the code editor window (the main part of the window). Processing calls this the “sketchpad” and calls each program a “sketch”. The idea is to try to make it seem as casual and easy to create and change as a short graphic sketch. Next, find the Run and Stop buttons. These will be how you… you guessed it, “Run” your program and “Stop” your program. Then, at the top of the screen, find the File menu, and the New, Save, and Open buttons. Similar to Microsoft Office software, “Save as…” saves a NEW version of the program, with a different name, and “Save” saves OVER the current version of the sketch. Make sure you know which one you want when you click it.

 

 

Ok! Now let’s write our first program. In each program are the two functions:

 

void setup() {

}

 

 

void draw() {

}

 

 

setup() runs once – only at the beginning of the program (to set it up…), while draw() runs continuously, 60 times per second, throughout the life of your program (until you push stop). Therefore, any actions, functions, or information that the program only needs at the beginning, put in the setup() function, and any actions, information, or functions that need to happen continuously, or be updated throughout, put in the draw() function.

 

At this point, a quick review – remember that functions are the element of code that provide the statements, or instructions, for how the program should act on given information – they take in data, in the form of inputs, (either parameters “passed in” to the function, or variables and functions that you create within the brackets { } of the function. Remember that anything you contain within the function MUST be within those two brackets, and SHOULD be indented (using the Tab button), to make it easier to read and understand. If any parameters get passed in to the function, they should be contained within the parentheses. For example, Processing has a built in function called line() which draws a line from point 1 to point 2. In order for it to “know” the coordinates of those points, you should create parameters to reflect the x and y coordinate of them.

 

 

line(0,0, 100,100);

 

The parameters that line() takes are line(x1,y1, x2, y2);

 

Remember to end each statement with a semicolon “;”, unless it has a bracket at the end of the line, like a function does when you create it. Because line() is a built-in (or, “native”) function of Processing, you do not need to create it, you simply need to call it, like we did above. To see more of Processing’s built-in functions, look at the Reference page (sometimes called Documentation, or API), on Processing’s website, Processing.org. (also linked to above).

 

To see the line() function in action, we must first tell Processing what size window to create. Since this can only happen once, it should go within the setup() function.

 

 

void setup() {

size(800,600);

}

 

void draw() {

line(0, 0, 100, 100);

}

 

Then click run! Make sure yours looks exactly like mine, down to the brackets, parentheses, commas, and semi-colons. The spaces don’t necessarily matter (except for spaces between words, but to make things easier for yourself and anyone else who reads your code, put spaces between values like parameters, parentheses and brackets, etc, as seen above.

 

Notice that this coordinate system is a little different than the Cartesian coordinate system we’re all used to. (Even if we don’t know it by that name, exactly).

  • Where is 0,0?
  • Where is it usually on a graph?
  • Where is 100 on the x axis in relation to 0?
  • Where is 100 on the y axis in relation to 0?
  • Now try changing the parameters of the line function, and pushing Stop and Run to see how it changes the sketch.

Another function we can use, related to lines is strokeWeight(). This function takes as its parameter a single floating point number (commonly known as a decimal, like 5.5, or 3.2, but known in programming languages as “float”) that will determine how thick to make the line, or, in graphic terms, the line’s weight. Because the program runs everything within a single function in linear order, from the top down (and then repeats… 60x a second, but still in that same order), if we want the strokeWeight() function to apply to our line(), it has to be above it in the text editor. Try changing it to be below your line function and running again to see the difference. Now add another line, below strokeWeight to watch it affect only that 2nd line.

 

void setup() {

size(800,600);

}

 

void draw() {

line(0, 0, 100, 100);

strokeWeight(5);

line(0,400, 100, 400);

}

 

 

 

But wait! What was the problem? Why didn’t it affect ONLY the line below? Ah, yes, because draw() runs on a LOOP (60x per second), so after reading the first line() function, it read strokeWeight(), then went back to the top and read the first line() function again, applying to that. If we want a different strokeWeight for the 2 lines, then we need another strokeWeight ABOVE the first line, with a different value.

 

 

Now, try the background() function! This creates a background for the screen, and it takeseither a single black and white color parameter from 0 (meaning black) to 255 (meaning white).  OR, it could take 3 RGB (red, green, blue) parameters, also from 0 (black) to 255 (fully red (or green, or blue)).

 

Again, the order matters. Try putting this as the first function within draw() and see how it affects the rest of the sketch. (Remember that it needs at least one parameter. Try 255 (white) to start.) Then try putting this after the line functions and see what it looks like.

 

 

Some other built in draw functions we will be using are:

  • stroke() – which changes the color of the lines used. Its parameters are the same as background’s (either 1 for B/W, or 3 for RGB, all on a 0-255 scale).
  • rect() (meaning rectangle) – which takes 4 parameters – rect(x, y, width, height);    // The x and y coordinates are for the top left corner of the rectangle, which is the default. If you want to make the CENTER of the rectangle the position for x and y, then before you call rect(), you must call another function, rectMode(CENTER). For more info, see the Reference page.
  • ellipse() – which could be a circle, and takes 4 parameters – ellipse(x,y, width, height); // Except, ellipse’s default mode is CENTER. Be aware. This is often confusing at first.
  • fill() – which, fills in the drawn objects listed below it, again, with the same 1 or 3 parameters as background and stroke.

 

 

What can you create using just these functions??

Leave a Reply

Your email address will not be published. Required fields are marked *