Lord Byng Computer Science

> Beginning Programming

The Sketch Pad Project

1. Basic Drawing Sketch
2. Designing Your Interface
3. Coding Your Interface
4. Coding Your Interface

Basic Drawing Sketch

It's time to put all that learning about if and if-else statements to good use! We will be creating a simple drawing program that will have many of the features of programs like MS Paint. To begin, let's look at simply drawing a scribbled line that follows the mouse when you hold the mouse button down. By drawing a line between the points pmouseX, pmouseY (last frame's mouse coordinates) and mouseX, mouseY (this frame's mouse coordinates), you can create a fairly smooth curve as you move your mouse around at all but the fastest speeds (and then it starts looking rather choppy):

line(pmouseX, pmouseY, mouseX, mouseY);
	

Let's get a little fancier; let's put this in the built-in mousePressed variable so that we only draw when the mouse button is clicked. As a complete sketch:

void setup() {
  size(600, 200);
  background(255);
}

void draw() {
  if (mousePressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}
	

Try it out:

Designing Your Interface

For our Sketch Pad sketch, we're going to need to create a user interface that aids us in using the drawing tool's features. These are the features we are going to implement:

• Buttons or something to choose between at least 6 colors
• An indicator to show which color is currently chosen
• Buttons to select the thickness of the line or increase/decrease the thickness of the line.
• A save button that will save our picture
• A load button that will load a picture
• A clear button that will clear the drawing

Coding the Interface

When programming a large project, it is important to get organized! Programming is hard enough without having to worry about disorganized, confusing code. One important thing we can do is define some preset values for our project. For example, it will be helpful if we give names to the colors we plan to use ahead of time rather than always referring to some random-looking numbers. We can do this by making color variables. Here is an example of some colors I am using that i got from searching 'rainbow' at colourlovers.com:

color red = color(223, 21, 26);
color orange = color(253, 134, 3);
color yellow = color(244, 243, 40);	

Now I don't have to remmeber what numbers I used for red, I just have to use the word 'red' whenever I need the color of something. For example you can now do the following:

fill(red);
stroke(orange);
background(yellow);	

Next, we are going to be writing a lot of code. If we put all of that code in the draw function, then it is going to be REALLY hard to keep track of where everything is. Instead, we should break down our draw function into subfunctions that each do a specific job. For example, we could have a separate function for drawing the interface, drawing a line, and checking buttons. The draw() function calls all of these subfunctions and now reads like a list of all the different things your program can do. Much organized!

Here's what that code might look like:

void draw() {
  drawLines();
  drawButtons();
  checkButtons();
}

void drawLines() {
  if (mousePressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

void drawButtons() {
  //code to draw buttons
}

void checkButtons() {
  //code to draw buttons
}	

Now that you are organized, draw the buttons! You can use a rect function along with fill to make the rectangle the appropriate color, which will represent your button. I'd put this code in your drawButtons function.

void drawButtons() {
  fill(red);
  rect(10,10,50,25);

  fill(orange);
  rect(10,30,50,25);

  fill(yellow);
  rect(10,60,50,25);
}	

Making the Buttons Clickable

Once you have designed your interface, it's time to make those buttons clickable! To do so, we need to know if the mouse is being clicked AND if the mouse's x and y coordinates are between the button's x and y coordinates. If your button is created with rect(10,10,50,50), you would have the following coordinates:

This means if you are clicking on a button, the mouse must be clicked, mouseX must be between 10 and 60, and mouseY needs to be between 10 and 35. Thus you would need the following if statements:

void checkButtons() {
  if (mousePressed) {
  	if (mouseX > 10 && mouseY < 60 && mouseX > 10 && mouseY < 35) {
  	  //DO SOMETHING!
    }
  }
}