Image by Rubel roy's photography on Flickr
Join us as we experiment with CodeGuppy and improve your programming skills!
One of the fun parts of software programming is typing a small amount of code into a code editor, running the software to check your output, and then tweaking the code and repeating this process. It’s almost instant gratification.
In this project, we’ll create a car, some ground or background, and a sun. You’ll be able to run the code then tweak the code to play around. If you’re lucky, you’ll mess up the code so badly that you will have to start over. That’s another often part of programming.
To begin, go to the CodeGuppy.com website, log in or create an account, then go to their code workspace URL:
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.
fill(180, 199, 231);
rect(0, 0, 800, 500);
fill(191, 144, 0);
rect(0, 500, 800, 600);
circle(750, 50, 150);
line(480, 60, 561, 47);
line(548, 224, 602, 172);
line(740, 304, 747, 236);
fill(112, 173, 71);
rect(175, 340, 223, 54);
rect(108, 394, 362, 74);
circle(168, 468, 32);
circle(408, 468, 32);
Then click the Play button. Your code workspace should look like this:
Let’s have some fun. We’ll turn the sun into a tomato (for real) and play with the car. See the block of code under the //Sun line that says fill(“yellow”)? That bit of code controls the color of the sun in the upper right of our CodeGuppy screen. There’s a bunch of colors besides yellow. With your mouse, highlight the word yellow and type tomato instead.
Next, in the code block below the //Car line, see the rect(175, 340, 223, 54) line? This controls the shape of our car. rect is shorthand for rectangular. But which rectangular shape? Highlight the number 54 and change it to 44.
Press the Stop button then the click the Play button to see the changes.
With these basic changes, it’s easy to see what else you might tweak. And don’t worry too much about breaking things: copy or retype the code at the start of this article to begin again.
If you’re wondering what are all the possible colors besides yellow and tomato, definitely check out https://www.w3schools.com/colors/colors_names.asp.
Another neat thing to play with? Notice the difference between the fill(“yellow”) code and fill(180,199,231) code. Both fill a specified area with color. And one uses double quotes around a color word while the other uses three numbers separated by commas. What happens if you change fill(180,199,231) to fill(“blue”)?
The three numbers separated by commas specify the intensity of a mix of red, green, and blue colors. These three colors are referred to as an RGB (Red, Green, Blue) triplet. Each number has a possible value from 0 to 255. Together, RGB triplets can make up to 16,777,216 different colors. If you want to learn more about possible RGB triplet combinations to drop into your code, check out https://www.rapidtables.com/web/color/RGB_Color.html online.
While coding can be difficult, it also can be fun to experiment by asking “what if?” about different parts of your code. It’s an easy way to learn and often be surprised by what happens. Plus it’s neat to use code to see a computer do what you ask it to do.
CodeGuppy Code Editor Workspace
RGB Triplet Colors
Hexadecimal Color Names
What are Hexadecimal Colors?
Hexadecimal Color Picker
CodeGuppy Draw with Code Projects
Also In The August 2021 Issue
Whenever you're online there are always some basic rules you should be aware.
Read our guide on how to set up a Roblox Account.
English is a difficult quirky language to learn. Noah Text patterns help people learn English more easily.
Do you have a secret you want to pass to your friend? Try using a 'one time pad' code!
Sadly your computer doesn't have a tiny sheep in it, but what it does have is pretty neat!
Learn how the IoT is helping with COVID-19 vaccine!
Make your own lava block with this fun project!
Learn how to make music and videos with your friends using Estuary!
Keep developing your soldering skills with this fun activity!
Learn about the history of the world wide web and how browsers have evolved over time.
Problems software programmers can do to practice their skills, from beginner to advanced.
Discussing how framing failure as part of a greater game can help young designers.
Learn about the first time CGI was ever used for animation!
Diving back into logic gates and quantum computing!
The Learnmore links from the August 2021 stories, all in one place.
Interesting stories about computer science, software programming, and technology.