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:

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.

// Background
noStroke();
fill(180, 199, 231);
rect(0, 0, 800, 500);
fill(191, 144, 0);
rect(0, 500, 800, 600);
// Sun
fill("yellow");
circle(750, 50, 150);
stroke("yellow");
strokeWeight(6);
line(480, 60, 561, 47);
line(548, 224, 602, 172);
line(740, 304, 747, 236);
// Car
stroke("black");
strokeWeight(1);
fill(112, 173, 71);
rect(175, 340, 223, 54);
rect(108, 394, 362, 74);
fill(132,60,12);
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.

Learn More

CodeGuppy Website

https://codeguppy.com

CodeGuppy Code Editor Workspace

https://codeguppy.com/code.html

Color Names

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

RGB Triplet Colors

https://www.rapidtables.com/web/color/RGB_Color.html

JavaScript Language Specification

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

Hexadecimal Color Names

https://www.mathsisfun.com/numbers/hexadecimal-color-names.html

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