Many programmers got hooked on coding when they found a simple way to write code, saw the result of their code, then changed their code, saw their change, and played around with code. The CodeGuppy website makes this discovery process both easy and fun to experience.

This is the first in a series of coding projects using the CodeGuppy website 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, log in or create an account, then go this their code workspace URL: https://codeguppy.com/code.html

You should see a blank code workspace like this:

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 left side code panel. Clicking the Play and Stop button toggles any code to display (Play) or not display (Stop) in the 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");
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:

Who said coding is hard?

Well, here’s what makes coding hard (and fun, I promise): 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 and colors are converted to six character hexadecimal numbers between #000000 (black) and #ffffff (white). More about hexadecimals at the end of this article, if you really want to know.

You might think, do I have to learn hexadecimal numbers? No wonder programming is so hard to learn.

Actually, plain English color names normal non-technical people use also works. In your code editor, change #548235 to green. Yes, it’s that easy. Press the Play button to display the changed code. Your code workspace should look like this:

Also try LightCoral and Peru and Tomato (seriously!) instead of #548235. All possible color names to try out can be found online here.

If you want to play more, here are some guidelines for the other parts of the code:

• 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 like more fun, doesn’t it? In JavaScript, the arc() function is used to draw an arc. It has 7 amazing parameters. I’m joking: they’re normal not amazing. 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 smart people might notice I said there’s 7 amazing arc() parameters but I’ve only defined six. The seventh parameter is optional and not used in this project. If you’re wondering, it’s the mode parameter which determines the way to draw the arc: Chord, Pie, or Open.
• What’s up with hexadecimal numbers 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 characters represents some quantity of the colors red, green, and blue. So with ffc000, ff represents a shade of red, c0 represents a shade of green, and 00 represents a shade of blue.

Which leads to the last thing to share for people who want to explore the code more deeply. Every programming language has a specification online that describes all the features of a language, including functions like circle() and arc() for JavaScript. Search online for the phrase, JavaScript language specification, to find the developer.mozilla.org site which describes JavaScript, including functions. Or search with the phrase, JavaScript arc function, to find details about how to use the arc function.

Congratulations! You’ve now experienced the basic fun that can cause people to enjoy software programming for a lifetime. Coding is definitely hard at times. But the basics are simple and fun: type code to see what happens then play around by experimenting and tweaking code.

Learn More

CodeGuppy Website

https://codeguppy.com

CodeGuppy Code Editor Workspace

https://codeguppy.com/code.html

JavaScript Language Specification

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources

Hexadecimal Color Names

https://www.w3schools.com/colors/colors_names.asp”

What are Hexadecimal Colors?

https://www.mathsisfun.com/hexadecimal-decimal-colors.html

Hexadecimal Color Picker

https://www.w3schools.com/colors/colors_picker.asp

CodeGuppy Draw with Code Projects

https://codeguppy.com/site/download/draw_with_code.pdf