beanz Magazine

CodeGuppy Smiley Project

CodeGuppy

Use CodeGuppy to write, learn from, and improve your coding with this simple exercise!

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

Also In The June 2021 Issue

Geocaching is a fun activity here on Earth. Now you can geocache on Mars. And the International Space Station.

He has performed for three US Presidents and with his business partner Scott Jacoby has helped build recording studios in Anguilla.

Use CodeGuppy to write, learn from, and improve your coding with this simple exercise!

Computing can help teach problem solving skills. Here's one way to help students and your kids to become critical thinkers.

New project alert! This time we are building transistors, a critical piece of any modern electronic device!

Exploring another weird tech term! This time we are looking at hard disk drives!

Check out our interview with Allison Grey, a mechanical engineer at vertical farming company in California!

What do cow catchers, an angry government and an early version of a modern computer have in common?

Learn how to edit your photos in fun and weird ways with Python!

In the time before WIFI there was Amateur Radio. Get your call signs ready!

Ever wonder how your computer processor works? And how that might impact quantum computing hardware?

While we all obviously love sheep, today we are talking about a different type of TEG.

Links from the bottom of all the June 2021 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about computer science, software programming, and technology for June 2021.