Tardis Tutorial Part 3

We have made our variables and functions for this project. Now it’s time to put them to work! This week we will make the body of the code. I will tell you what you are to make and then show you the code to see if ours matches. Think of it as a puzzle but way better.

Since the code is laid out in the order it is typed, we are going to start with the top and work our way down. First, we will start with the background, I made mine a dark navy but you are free to make it any color. Now, we will start with the light and the roof.

Now, we will start with the light and the roof. The light will be a circle, or ellipse, with the dimensions of 30 pixels wide and 20 pixels high. It has the x-coordinate of 222 and a y-coordinate of 48. The color has the RGB code of (232, 227, 232). Next, we will make 3 blue panels using the drawBluwPanel code. The first one has the coordinates of 208 and 50 respectively and a width and height of 30 and 20. The second one has the coordinates of 133 and 55. The width is 30 pixels less than the width of the Tardis’ main box and a height of 10 pixels. The last box has the coordinates of 125 and 65 in the x and y-coordinates respectively. The width is 15 pixels less than the Tardis with and a height of 13.

Does your code look like this:

fill(232, 227, 232);
ellipse(222,48,20,33);
drawBluePanel(208,50,30,20);
drawBluePanel(133,55,tardisW -30,10);
drawBluePanel(125,65,tardisW -15,13);

If so great! If not, reread the description and see what differs.

Next, we will work on the main box. The main box is positioned at the coordinates of 118 and 79. The width and height can be designated with the variables assigned to the Tardis’ width and height. The door panel has the coordinates of 140 and 112. The width and height also have variables assigned to it. For both boxes, you can use the function called drawBluePanel.

The middle part of the door has the coordinates of 40 plus half the door width and 118. The width and height are 8 and 10 less than the door height. The blue panel above the door has the coordinates of  125 and 89. The width is 15 less than the Tardis width and a height of 20. Finally, there is a black panel inside the blue panel above the door. The coordinates of the panel are 129 and 91. The width is 23 less than the Tardis width and the height is 15.

Does your code look like this:

//Main Box
drawBluePanel(118,79, tardisW,tardisH);
//Door Panel
drawBluePanel(140,112, doorW, doorH);
//Middle Part of Door
drawBluePanel(140 + doorW/2,118, 8,doorH -10);
drawBluePanel(125,89, tardisW -15, 20);
drawBlackPanel(129,91, tardisW – 23, 15);

 

Next, we will draw 8 panels, 4 on each side in 4 rows. Each panel can be drawn uses the drawBluePanel function. Every column has an x-coordinate value. The rows have a y-coordinate variable. You can use the variables  for panel width and height. you should only use variables and functions to draw these panels. No numbers!

Does your code look like this:

//First Row Panels
drawBluePanel(lRowX,row1,panelW,panelH);
drawBluePanel(rRowX,row1,panelW,panelH);
//Second Row Panels
drawBluePanel(lRowX,row2,panelW,panelH);
drawBluePanel(rRowX,row2,panelW,panelH);
//Third Row Panel
drawBluePanel(lRowX,row3, panelW,panelH);
drawBluePanel(rRowX,row3, panelW,panelH);
//Fourth Row
drawBluePanel(lRowX,row4, panelW, panelH);
drawBluePanel(rRowX,row4,panelW,panelH);

The last panel we have is the bottom floor box. This one has the coordinates of 105 and 370. The width is 25 more than the width of the Tardis and the height is 23.

Does your code look like this:

drawBluePanel(105,370,tardisW + 25, 23);

Leave a Reply

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