Tardis Tutorial Part 2

This week we will be adding functions to our code. These are going to be used for the rest of the project minus the text portion. We are going to make three functions: drawBluePanel, drawBlackPanel, and drawWindow.

First, we are going to start with the function called  drawBluePanel. This will make the bulk of the Tardis. For this function, we are going to use parameters for the x-coordinate, the y-coordinate, the width, and the height. In the body of the function, we will make a fill, stroke, stroke weight, and rectangle code. To set it up, start with the functions “skeleton” or general setup. This would be

To set it up, start with the functions “skeleton” or general setup. This would be var drawBluePanel = function(){}; Now we are going to add the parameters. I called them x, y, width, and height. These will go in the parenthesis. Next, is the code that goes in the brackets. The panels will have a fill of (13,36,128) and a stroke of (11,24,71). I found that the stroke weight of 2.5 looks the best. For the rectangle, the code with parameters will look like this: rect(x,y,width,height);.

The finished code will look like this:

var drawBluePanel = function(x,y,width,height){
fill(13, 36, 128);
stroke(11, 24, 71);
strokeWeight(2.5);
rect(x,y,width,height);
};

The next function is the drawBlackPanel. You will only use this once in your project. The reason this is a function and not just a line of code is for ease of editing. By the time you are finished with this project, you will have over 120 lines of code. This will make it hard to find one line of code to edit it.

This function uses the same parameters as the previous function and rectangle code. The only difference is the color codes. The all of the fill numbers are 0. The stroke weight is 0. and the stroke color is (8,22,60).

The final function will look like:

var drawBlackPanel = function(x,y,width,height){
fill(0, 0, 0);
stroke(8, 20, 66);
strokeWeight(0.5);
rect(x,y,width,height);
};

Finally, the last function is the drawWindow function. This function also uses the rectangle code with parameters for is coordinates and size. The color of the windows is  (232, 227, 232) to give it the off white color. The stroke color is (164, 168, 184) to offset it from the blue panel behind it. With the stroke weight of 1, the windows have enough of an outline to give the windows enough of a distinction.

The drawWindow function looks like:

var drawWindow = function(x,y,width,height){
fill(232, 227, 232);
stroke(164, 168, 184);
strokeWeight(1.0);
rect(x,y,width,height);
};

Leave a Reply

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