22 Programming Languages
BY TIM SLAVIN
a e d o C
CodeGuppy makes the coding discovery process both easy and fun to experience. This is the first in a series of coding projects using the CodeGuppy website (CodeGuppy. com) that will appear in future issues. Their projects use JavaScript and it’s not hard to change the code to see your results. Maybe you’ll get hooked on the process of writing and tweaking code. We’ll start with a Draw with Code project. Go to the CodeGuppy. com website, log in or create an account, then go here, to their code workspace URL: https://codeguppy. com/code.html You should see a blank code workspace. A The code panel is on the left column and code output displays on the right side of the workspace. Notice the PLAY button at the top right of the PLAY left side code panel. Clicking the PLAY and STOP buttons toggles code to display (PLAY) or not display (STOP) in the STOP right side code output panel. Now type or copy/paste this JavaScript code into the Code panel on the left side of the workspace. noStroke(); background("#548235"); fill("#ffc000"); circle(400,300,200); fill("black");
e l i Sm
circle(314,206,25); circle(504,206,25); fill("#c00000"); arc(400,340,238,196,0,180); Then click the PLAY button. Your code workspace should look like this: B Who said coding is hard? Let’s play with the colors of the smiley face. Do you see the #548235 bit of code? What’s up with that? It’s called a hexadecimal number. Colors are converted to six character hexadecimal numbers between #000000 (black) and #ffffff (white). (More about hexadecimals at the end of this article.) You might think, do I have to learn hexadecimal numbers? No wonder programming is so hard to learn!. Actually, plain old English words for different colors that everyone uses also work. In your code editor, change #548235 to green. Yes, it’s that easy. Press the button to display the changed code. Your code workspace should look like this: C Also try LightCoral and Peru and Tomato (really!) instead of #548235. All possible color names to try out can be found online at https://www. w3schools.com/colors/colors_ names.asp. If you want to experiment a bit, here are some guidelines for the other parts of the code. This gets a little more advanced from here. See the circle(400,300,200) code? In JavaScript that’s the circle()
function and the 400,300,200 are the x,y,d coordinates. The x and y coordinates are measured from the center of the circle. The d coordinate sets the diameter of the circle, in this case, 200. What happens if you change the d coordinate to 400? 150? Don’t forget to press the PLAY button to display your changes. The arc(400,340,238,196,0,180) looks linteresting, doesn’t it? In JavaScript, the arc() function is used to draw an arc. It has 7 parameters. The 400,340,238,196 bits are the x,y,w,h parameters. The x and y parameters are the x and y coordinates for an ellipse, an oval basically. The w parameter is the width of the arc of the ellipse. Can you guess what the h parameter represents? Yes, the height of the arc of the ellipse. The 0,180 bits are the angles to start (0) and stop (180) the arc, specified in radians. Want some fun? Change the 0 in the arc function to 10: arc(400,340,238,196,10,200). You’ll see the start angle for the arc begins 10 radians below the 0 parameter. Now you might notice I said there are 7 arc() parameters but I’ve only defined six. The seventh parameter is optional and not used in this project. It’s the mode parameter which determines the way to draw the arc: Chord, Pie, or Open. Let's go back to hexadecimal numbers. We know they are used to define colors. The six characters can be a mix of 0-9 or a-f, as in ffc000 in the code. And each pair of
