Programming

Code a Smile BY TIM SLAVIN

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 left side code panel. PLAY 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); 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

A

B

C

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 some of the fun that can inspire 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. b

tidbitz

Your Brain on Code

Computer programming is a new skill for our human brains to learn. It’s an activity our brains may not be optimized to do well. And while there are similarities between programming languages and natural languages, it turns out coding doesn't engage the language system part of our brains. Instead, coding engages the multiple demand system, the part of our brain that triggers when we do math problems or try to think logically. More interesting, coding uses the multiple demand system in both right and left sides of our brains. Solving math problems only uses one side. b

https://spectrum.ieee.org/tech-talk/computing/software/what-does-your-brain-do-whenyou-read-code

Shining Armor

Run away! Run away!

THISISENGINEERING, UNSPLASH

Untying the Knots

Is anybody here really In 15th and 16th century Peru, good at the Incas had the largest and most getting out knots? complex society in the Americas but they left behind no written records. The Inca people used khipas, knotted cords attached together with other knotted cords, to keep records of important activities. As a freshman

WIKIMEDIA COMMONS economics major at Harvard, Manny Medrano used his knowledge of Spanish and economics to discover that khipas not only recorded census information, but also recorded the social status of people in a community. This finding will help decipher other khipas and provide insights into how the Inca people lived. b

https://www.atlasobscura.com/articles/khipus-inca-empire-harvard-universitycolonialism

WIKIMEDIA COMMONS

Researchers used Unreal Engine, Blendr, and other software to model the Vimose chain mail armor. It's the best example in existence of Iron Age chain mail, used from AD 150-220. The armor is made of 20,000 small iron rings with room underneath for padding and held with a belt. The Unreal Engine software was used to test a variety of theories about how the armor fit a human body, as well as how it performed when its wearer was on foot and on horseback. b

Are You Writing This Down?

Maybe some old ways of doing things are better after all. A University of Tokyo study has shown that the act of writing with a pen on paper increases memory retention in the brain more than using a stylus and an electronic tablet or a smartphone with a touchscreen. The physical, material properties of paper provide more fixed cues for memory encoding that the hippocampus portion of the brain processes. When it comes to the encoding of new information in the brain, nothing beats good old-fashioned handwriting on paper. Maybe taking notes by hand in class will give you an edge on your next exam! b

https://newatlas.com/science/writing-paper-better-memory-stylus-tablet-brain-activity/

CDC.ORG

Outsmarting a Smart Virus

When the Covid-19 pandemic hit in early 2020, scientists immediately turned to software to communicate with other scientists and to solve problems. The Cleveland Clinic created a predictive model using patient records and artificial intelligence to identify patients most likely to test positive based on age, race, gender, socioeconomic status, vaccination history, and current medications. They used the limited amount of tests available of to confirm if members of this group had the virus. Other scientists and groups also used software to manage hospital beds, identify bthreats to patient recovery, and other important clinical information.

https://www.smithsonianmag.com/science-nature/how-doctors-are-using-artificialintelligence-battle-covid-19-180977124/

Talk About DIY!

https://www.archdaily.com/958331/building-houseswith-giant-blocks-u-build-and-the-future-of-selfconstruction

Got Legos? The U-Build system is also a set of reusable modular blocks that allows people and communities to create buildings and houses with minimal fuss. The system uses CNC (Computer Numerical Control), an automated 3D printing technology, to create these reusable blocks on demand. A concrete foundation and plasterboard walls are not required either, making construction simpler with less impact on the environment. b