Loops and Canvas Programs AP CSP Program 1. Draw something like the figure shown. There should be: a blue sky with no black outline a green field with no black outline a yellow sun with a black outline a stick figure where the lines are 5 pixels wide, you pick the color and the school-appropriate pose Program 2. Create a canvas that is 320 by 400 pixels in size. Enter the code below. setactivecanvas("can"); setfillcolor( "orange" ); rect( 0, 0, 320, 400 ); onevent("can", "mousedown", function(event) { var x = event.x; var y = event.y; circle( x, y, 10 ); ); Run the program. Notice that each circle is centered around the point where the mouse went down. Important: event.x and event.y are coordinates of the mouse with respect to the screen, not the canvas. Modify the program as follows. Move the down so there is a 50-pixel space at the top of the screen rather than the bottom. Do NOT resize the canvas. Run the program and notice that the circles are now drawn 50 pixels below the spot where the mouse was clicked. Correct the code so that circles appear where the mouse was clicked. Add a label above the canvas that displays the number of circles currently displayed. For example, the label in the bottom figure says Number of Circles: 3
Program 3. Create a 250 by 250 pixel canvas in the middle of the screen. Give it a background color (by drawing a big colored rectangle). Whenever the user moves the mouse over the canvas, draw a 20 by 20 square centered over the mouse s location. The squares should be partially transparent. Put a button below the canvas. When the user clicks the button, all the squares should disappear, but the color background should remain. The user can still draw squares after clicking the button. Hints/suggestions. Since event.x and event.y are with respect to the screen s coordinate system, you need to know the upper-left hand coordinates of the canvas to properly adjust the coordinates. You can get those numbers from the canvas s property window (in the design view) or by calling the getxposition and getyposition functions. To generate a random colored squares, generate three random numbers [0, 255] and use the rgb function with the setfillcolor function. Extra Challenge. If this was too easy, change it so the mouse must be dragged for the squares to be drawn (not just moved). You will need one global variable, the mousedown/mouseup events, and... Program 4. Create a canvas that fills the whole screen and name it can. Then complete the cube function so that it draws a cube wherever the mouse goes down. The x and y parameters are the coordinates of the cubes upper left back corner. len is the length of all vertical and horizontal lines. The diagonals are len/2 pixels long. The figure shows the program after I have clicked ten times on the canvas. setactivecanvas("can"); setfillcolor( "yellow" ); rect( 0, 0, 320, 450 ); onevent("can", "mousedown", function(event) { var num = randomnumber(4, 20); cube( event.x, event.y, num ); ); function cube( x, y, len ){ you write this.
Program 5 (for loop). Complete the program below so that when the button is clicked, it draws that many vertical and horizontal lines. The lines should be spaced 20 pixels apart. setactivecanvas("can2"); drawbackground(); onevent("btndraw", "click", function(event) { var num = getnumber("txtnumlines"); drawvert( num ); drawhoriz( num ); See note below. ); function drawbackground(){ make the background of the canvas some color function drawvert( num ){ use a for-loop to draw num vertical lines that are spaced 20 pixels apart. function drawhoriz( num ){ use a for-loop to draw num horizontal lines that are spaced 20 pixels apart. Note. Once you get the lines draw, you ll notice that the background disappears when the button is clicked. Add one line of code to that function so the background does not disappear when the button is clicked. Program 6 (for loop). There is one canvas that fills the entire screen. Do not write a function. When the program starts, it should draw a series of rectangles that fill the screen. Each rectangle is 20 pixels high. The top most rectangle should be all blue (or red or green). With each rectangle, the blue (or red or green) becomes darker and darker. You will need the rgb function.
Program 7 (for loop). There is one canvas that fills the entire screen. When user clicks on the screen, 10 squares are drawn. The outermost square is 90 by 90. The next square is 80 by 80; the one after that is 70 by 70, and so on to the smallest one which is 10 by 10. The outer most square is black and the inner squares become gradually lighter and lighter. Hint 1: rgb( n, n, n ) If n = 0, then the color is black if n = 255, then the color is white if 0 < n < 255 then the color is some shade of grey. Hint 2. First calculate the coordinates of the upper left hand corner of the outermost square. Program 8 (for loop). There are two labels, one text input, and one button. No canvas. When the program starts, the bottom label is empty. The button is clicked, the label shows the prices for 2 wombats, 3 wombats, and so on up to 10 based on the price for one wombat. The figure on the far right shows prices when the price of one wombat is $5. If a different price was entered, and the button clicked again, the label would show the new prices.
Program 9 (for loop). There are two labels and one button. When the button is pressed, 5 random numbers [1,9] are generated. These numbers, and their sum, are displayed in a label. Try to get an extra line break between the last number and the total. Below that label, is a second label. If the total is between [20, 30], display You Won!; otherwise display you lost. Every time the button is clicked, the old number disappear and new numbers (and a new message) are displayed. Program 10 (for loop). There is a label and text input element at the bottom and a 320 by 400 pixel canvas filling up the rest of the screen. The canvas should have a background color. If the number of lines is less than two, then no lines are drawn when the mouse moves over the canvas. If the number of lines is two or more, that s how many lines should be drawn from the bottom edge of the canvas to wherever the mouse is. The points along the bottom edge should be evenly spaced out with the first and last points being at the corners. Depending on the number of lines, the last point might not be exactly at the bottom right corner but it should be close. The lines follow the mouse around the canvas. You can change the number of lines as the program runs. The left figure shows what your program should look like with 6 lines and the mouse near the bottom. The right figure shows it with two lines and the mouse on the left and near the top.
Program 11 (while loop). It s 21 again but this time with while loops. There is a button and three labels. When the button is clicked The player keeps drawing random numbers [1, 11] until they have 17 or more. Those numbers and the total are displayed in the left label. The computer keeps drawing random numbers [1, 11] until it has 17 or more. Those numbers and the total are displayed in the right label. The results are displayed in the bottom label. Same rules as before: o If the player has more than 21, they lose. End of story. o If the computer has more than 21 (and the player did not have more than 21), the computer loses. o If neither one busted (went over 21), then the higher score wins. There can be ties. When the button is clicked, everything is displayed at once. There is a way to slow things down and displayed the numbers one at a time but we are not there yet. Program 12 (while loop). This is a very simple art program. There are five buttons and one canvas. The user clicks on a color and then drags the mouse on the canvas. We are simulating a spray paint tool that draws 6 small circles in random locations around the mouse s location. setactivecanvas("can"); var red = 255; var green = 255; var blue = 255; var down = false; We need the red, green, and blue components of a color because we need to use the rgb function so we can use a low alpha value (around 0.1 or 0.2). When the mouse goes down on the canvas, down = true. When the mouse comes up on the canvas, down = false When one of the colored buttons across the top is clicked on, set the global variables red, green, and blue to the appropriate values. When you pick a background color for a button, you can find the values for red, green, and blue in the properties window. I m leaving it up to you to figure out how to code the Clear Canvas button. onevent("can", "mousemove", function(event) { if ( down ){ Draw 6 small, mostly transparent circles in random locations around the mouse s location. Play with the numbers until you get it looking the way you want. Please use a while loop for the 6 circles. Yes, you could use a for loop but we re practicing while loops for now. );
Program 13 (while loop). This program simulates playing Yathzee except there are only three dice and you keep rolling until all three match. There is one button and one label. When the button is clicked, the program keeps generating three random numbers [1, 6] until all three are the same. Then it displays how many rolls it took. Every time you click the button, it runs a new simulation. Note. Occasionally, it will take so many rolls that the numbers go off the label. That s ok. Program 14 (while loop). This program simulates flipping a coin again and again until you get three heads (or tails) in a row. There is one button and one label. My code is less than 20 lines but I think that many will find this a little tricky to code right. Here is an outline of some of my code. First, I use the number 1 to mean heads and 2 to mean tails. Second, since the program needs to remember what the outcome was the past two times, I made global variables to store the past 3 outcomes. These are updated each time through the loop. var old = -1; var older = -2; var oldest = -3; var txt = ""; old, older, and oldest are given arbitrary values that are all different. while ( the last three flips are not the same ){ Two statements go here. old = randomnumber(1,2); if ( current == 1 ){ // this means they got heads update txt else { update txt Change the text on the label