38 minute read
Gundam! That's a Huge Robot
Mario Kart is such a fun video game people have found lots of ways to Mario Kart play, including racing in real life while dressed as Mario, Luigi, and other characters. Now you can race with a and Mixed
Reality Nintendo Switch and an actual kart with a built-in camera. Your home becomes a racetrack you can create by yourself and with friends. Then race, Mario Kart style! b Gundam! That's a Huge Robot!
Advertisement
https://www.polygon. com/2020/10/1/21497792/mario-kart-livehome-circuit-preview-nintendo-switch
NINTENDO
Coolio Maximus
DANIEL VOSHART
What did Roman emperors look like in real life? We have lots of statues and busts but they’re idealized images. Some emperors probably were less handsome or much older or heavier. Toronto designer Daniel Voshart created photorealistic portraits of Roman emperors using Photoshop, machine learning, and lots of research to find common traits for each man. The results are what each of the 54 emperors would have looked like in real life. Photorealistic images present a more honest picture of what people looked like as they walked down a street. You might recognize them from these images. b
https://www.popularmechanics.com/technology/a34209169/realfaces-of-roman-emperors/
A huge 60 foot tall Gundam robot has been building all year in 2020 in the port of Yokohama, south of Tokyo. Gundams have appeared in 50 TV series and movies and a bunch of video games since 1979. It’s an incredible engineering feat to build one this tall that actually moves. It weighs about 15 tons which required a lot of engineering and design skills. Each hand is about six and half feet long. This Gundam can walk, bend its knees, turn its head, and make hand signals. It also can kneel then pick itself back up to a standing position. The Gundam project site has a lot of videos about their robot. b Get the Merch!
The Gundam Action Figure: Gundam IBO Gundam Barbatos, Bandai Spirits MG 1/100
https://www.popularmechanics.com/technology/robots/ a34108996/giant-gundam-japan-testing-mode/ https://www.popularmechanics.com/technology/robots/ a33381411/japan-giant-gundam-robot/
Keys, Handshakes, and Primes
Prime numbers are one thing in mathematics that start out simple but end up being so important, not just to math but to programming as well. Prime numbers are vitally important to things like talking, shopping, and existing online safely.
What are prime numbers? They are integers; whole numbers other than 1 that can only be evenly divided by themselves or by 1. What I mean by evenly divided is “resulting in a whole number”. So, 6/2 evenly divides into 3, but 5/2 doesn't because 5/2 is 2.5. So, 5 is a prime number. The number two is prime, 3 is prime, but 4 isn't because 4/2 is 2.
Every whole number is either a prime number, or can be represented uniquely as a product of prime numbers. What "uniquely" means here is that there aren't choices to make. There's only one way to break the number into a product of primes.
Try 236, for example. 236 ends up being the product 2*2*59, all of which are prime numbers. Wait, how do you know that 59 is a prime number? It's not obvious, is it? To be able to break a number into primes we need to know which numbers are prime in the first place. We'll come back to that question after we discuss why computer scientists use prime numbers.
The importance of prime numbers for online life comes down to cryptography and, specifically, something called asymmetric encryption.
Asymmetric encryption is generally not used to make big swaths of data secure, but rather is an important part of handshakes, the kinds of protocols used to establish that each computer in a conversation is exactly who it says it is. In asymmetric encryption, there's a public key and a private key. When a key is public, it means anyone can have it and in fact needs to have it for the next part. As for the private key, only you should have it. To prove your identity, you're going to encrypt a message with your private key and then, if it can be unencrypted with your public key, you've proven that it's you who sent the message.
To generate your public and private key, first pick two very large prime numbers: you multiply them together to make your public key and do a different, more complex, set of operations on them to make the private key. The entire reason why you can distribute the public key freely is because, while it's very easy to multiply two numbers—even big ones—it's incredibly hard to look at huge numbers (like hundreds of digits huge) and be able to figure out what prime numbers make them up.
Let's try to figure out which two prime numbers make up this relatively small number: 3183379. I'll tell you the answers at the end.
This is so hard that only one kind of computer that can solve it quickly: a quantum computer. This is what makes quantum computers both exciting and scary: they can be used to break asymmetric encryption.
So how do you know a number is prime? It turns out, the only way to know a number is prime is failing to show that it isn't. That's because the definition of "prime" means you've shown there aren't any other numbers that divide it. The simplest solution in code is the brute force check, where you check one by one to see if there is a number that can
import math def isprime(n): isPrime = True # assume it's prime until you find a factor for x in range(2,1+int(math.sqrt(n))): # check from 2 til squareroot of n # (the 1 + is so the for loop includes the sqrt) if n % x == 0: isPrime = False return isPrime
Keys, Handshakes, and Primes
divide the number you're testing. If there isn't one, then you know the number is prime.
The orange code text on page 16 shows how a brute force check might work with code by first importing a library with math functions:
But a more sophisticated, and quite old algorithm, is the Sieve of Eratosthenes. It works like this: if you want to find all the primes below a certain number, say 100, then start by writing down each number below 100. Now go to the first prime number, 2, and cross off all multiples of 2 starting with 4. The next number not crossed off is 3, so cross off all multiples of 3 that haven't already been crossed off. The next number not crossed off will be 5, so continue the process until there's no more numbers under 100 to cross off. What isn't crossed off are all the prime numbers below 100.
The Sieve of Eratosthenes calculates not just whether one number is prime, but can give you all the prime numbers below a certain number.
However, this isn't used in industrial cryptographic applications. Instead, they use probabilistic tests, which, rather than giving an absolutely correct answer, give an answer that's very unlikely to be wrong. In the asymmetric encryption we talked about, they generally use something called Fermat's test, which is incredibly fast and has a ridiculously tiny chance of being wrong. This allows for fast public/private key generation.
So prime numbers are interesting in their own right, and also important to the ways we communicate online every day. b
Eratosthenes
While it seems people from hundreds and thousands of years ago had little impact on our world of phones, computers, cars, and other amazing tools, the truth is our digital world relies heavily on inventions and people from the distant past.
Eratosthenes is one such inventor. Born around 276 BCE in a Greek colony called Cyrene, today known as Shahhat in Libya, he used mathematics to calculate the circumference of the earth based upon the angle of sunlight at different locations and points in time along the coast of North Africa. He used trigonometry to measure distances with longitude and latitude. To identify prime numbers, he also developed an algorithm called the Sieve of Eratosthenes, which is described in our article about prime numbers and encryption, to the left of this article.
However, math was only one field in which Eratosthenes excelled. He also was a noted geographer, poet, historian, philosopher, astronomer, and music theorist. Eratosthenes also discovered that a year was slightly more than 365 days and thus created the leap year, a day added to a calendar every four years. He also created a map of 675 stars as well as measured the distance between the earth and sun. The Egyptian king Ptolemy III invited him to run the Great Library of Alexandria which at the time held originals and copies of most books published in the ancient world.
Perhaps the most amazing detail about Eratosthenes, and others from the ancient world, they used sticks and camels and other primitive tools to discover useful things we use today in our modern world. b
Hiding in Plain Sight
You may have read or seen how mobile phones have been used to track people from a single event to places all over the world. The maps demonstrate the real time potential spread of the Covid-19 virus. Every phone displayed as a moving dot on the map represents a unique person who may or may not have the virus. It’s amazing yet scary technology.
What’s the magic behind these maps?
Every mobile phone connected to a telephone network broadcasts a unique identifier. It lets you walk or drive down a road and keep talking on the phone: your unique identifier is attached to your phone connection and passed along from the nearest telephone tower to the next nearest telephone tower. These identifiers are hard-wired and cannot be changed.
The maps use phone identifier data from X-Mode and mapping software provided by Tectonix. Maps are published on social media to demonstrate their technologies and advertise to get business from academic researchers and others.
Of course, there are ways to hide a mobile phone. You can put a phone in airplane mode and turn off the setting that broadcasts your location data. But most people use their phone to talk with family and friends, as well as connect to the internet to check weather and do many different things. Most phones are always on and connected.
Maps that display people as they leave a single event claim to use only the unique identifiers for each phone which, in turn, are not easily tied to an individual name. The companies that create these maps claim their
data is completely anonymous, which is true but in a limited way.
The New York Times and others have demonstrated that it is fairly easy to link a unique phone identifier to an individual. We live in one place, for example, so an identifier that stays overnight in the same location day after day likely represents the person who lives at that location. Where a person works also can be determined. And unique identifiers can be combined to identify family and friends.
These Covid-19 maps demonstrate how technology that is very useful—our phones—has serious positives and negatives that need to be known and debated. The collection of unique phone identifiers, for example, is mostly controlled by private companies like X-Mode with little or no government regulation. The companies use this data to create their maps of people leaving events. And still others, like The New York Times, use the unique identifier data plus other data to identify people who own specific phones. People who don’t have phones present another interesting issue. They can’t be tracked, if tracking is useful. Perhaps the most interesting question is what will happen after Covid-19 is no longer a public health problem: will people still care about being tracked? Or will this tracking capability be kept going in case we have another pandemic?
In the meantime, if you want privacy, keep the location setting off on your phone until you need it turned on. And maybe put your phone in airplane mode when you don’t need to be on a phone network. b
Map showing cell phones from the NYC metropolitan area and where they traveled within two days. Image from Tectonix on Twitter
Small Internet, Big Fun
I once saw a joke that goes "the internet used to consist of millions of websites, now there's just three that are filled with screenshots of each other". It's a joke, but it's not wrong.
However, there still is a huge variety of communities full of people doing strange and interesting things on the internet apart from the big social media sites. These communities make up the small internet.
Web meets Internet
First, some backstory. Every page you go to in Chrome, Firefox, etc. is a web page. The web, however, is not the internet. What used to be called the world wide web (www) is actually just a standard for communication across the internet called the hypertext transfer protocol. You might already know that the code that makes a web page is called hypertext markup language or html. Hypertext is just a futuristic way of saying "text with links to other sites". Commonplace now, but extremely cool a few decades ago when Tim Berners-Lee and his research team invented it.
But the internet existed before the web, using different "protocols" of communication and very different programs than web browsers. One of the earliest ways people talked was over a bulletin board, commonly called a BBS. This was a computer running software that would accept connections over a protocol called the "teletype network", or telnet, which was developed in 1969—over 20 years before the web. It was a very simple way to send text back and forth between two computers.
On a BBS you can leave or read messages, play games, and check out ASCII art that people made. BBS is still around. The telnet BBS Guide is a web site that's been around since the 90s and continues to keep up-to-date and active BBS listings from around the world. There are also guides showing how to get started with a BBS on modern computers. If you have a small single-board computer like a Raspberry Pi you could even host your own BBS.
Gopher it
Another historic community that's still around is gopherspace. Gopher is the most web-like of these old communities because it actually had a notion of individual pages and ways to navigate between pages. But it was more like "files and directories". Instead of being able to link any page to any other page, there was a hierarchy to them: directories could "link" to other directories; but files needed to just be plain text.
That sounds pretty limiting but honestly there's a lot of things that fit this structure, like blogs, news sites, things like that. There's even a Gopher mirror of Reddit you can browse.
Yes, like a BBS, Gopher is “alive”, but still very small. There are under 500 Gopher servers in the world, compared to something like 100 million web servers. You can get started with Gopher through the Overbite Project; but if you're running Linux you can probably start browsing gopherspace using the text browser lynx by opening a terminal and typing: lynx gopher://gopher.floodgap.com.
Playing on pubnix
Pubnix is an entirely different kind of community. This isn’t just a site you visit but a computer you can have an account on and use. It is always either a Linux or Unix computer, and when you log into it, you're using the command line. These pubnix communities are really neat because they tend to be focused either on learning how to code or just making neat things. There's a big list of small communities like this on the Tilde Team site.
Cool new space
The last corner of the small internet I want to mention is geminispace. Gemini is very tiny right now. It's a new protocol that's supposedly a little more powerful than Gopher, but way less heavy than the web. Gemini is only a couple of years old and was invented by Solderpunk who describes his motivations on the main Gemini site https://gemini.circumlunar.space.
One of the things I love about Gemini is that it was designed for literally anyone, even if they're not an experienced programmer, to be able to write their own servers and clients for it. To that end, Solderpunk provided a number of reference implementations that were each only ~100 lines of code in different languages.
So I've talked about the mechanics of a lot of the small internet, but what does it feel like? Why hang out there? Well, I think what's special about it is that it's a place where people let themselves be weird, try things, and experiment. It's a place where you'll find people who really care about the impact of technology on the world, who want to make the world better and are trying to figure out how. It's a place where people have stopped worrying about whether people like them and are seeking out people they like.
Doesn't that sound nice? b
Pinwheel Pattern
For this project, all you need is SketchUp and an internet browser. SketchUp is a free and fun web-based program for 3D modeling. You can use SketchUp to design just about anything, from furniture to a dream bedroom to an entire city. Go to https://app.sketchup.com/app.
When you start modeling in SketchUp, you start in this view, with Helen standing on the ground. She isn’t needed in this model, so press E for the Eraser, and click on any of Helen’s edges. A
Along the right side of the screen, click the “movie scene” icon to open the Scenes window. Then click the icon in the middle of the Scenes window, which looks like the top of a house. This brings the model into Top view, also called bird’s-eye view. B
The pattern we’ll be making is based on hexagons—6-sided polygons that can repeat next to each other without any spaces between. Think of a honeycomb, which is made of hexagon-shaped cells. C
Open the Rectangle fly-out toolbar on the left, and click the Polygon tool. D
Look in the field at the lower right corner, which shows the number of sides. If you don’t see the number 6 in this field, type 6 and press Enter. (Don’t click in the field, just type and the number will appear there.) E
Click anywhere to place the center of the hexagon. For the second point, move your mouse to the right or left (red direction), then click again. F
Now we need some construction lines inside this hexagon. Press L to activate the Line tool, and create this line, from midpoint to midpoint. G
Complete a triangle, by drawing lines between two other sets of midpoints. H
Create another triangle, using midpoints of the three edges not used in the previous triangle. You should have a six-pointed star inside the hexagon. I
Now we can add the curves. Press A for the Arc tool. Arcs are created by clicking three points: start, end, and a point along the arc. Start the arc by clicking the top left corner of the star. (Whenever you’re working in SketchUp, it’s important to click exact points, such as midpoints or endpoints. Always be sure to look for the pop-up that tells you what a point is, before you click.) J
A B F K L
C G
D
E H
I J M
N
O
For the second point - the end of the arc—click the center of the hexagon. K
The last point defines the “bulge” of the arc. Click the point shown below: where two of the star triangles meet. L
With the Arc tool still active, create a mirror-image of the first arc. M
Now with the Eraser (press E), erase everything inside the hexagon except for the two arcs you just added. When erasing, you can click each edge one by one, or drag the mouse to sweep over everything you want to erase. N
Now we’re ready to make some rotated copies. First, we need to select what we want to copy. Press the Spacebar for the Select tool, and click either half of the hexagon. O
Press Q for the Rotate tool, which is another three-click tool. The first point to click is the center of the hexagon. P
The next two clicks define the angle of rotation. First, tap (don’t hold) the Ctrl key on a PC, or the Option key on a Mac. This adds a “plus” sign to the cursor, which means copies will be made. Then click any two adjacent (neighboring) corner points of the hexagon. The field in the lower right shows the rotation angle, which should be 60 degrees. Q
Once the first copy is created, you can add more copies. Instead of one copy, we want two, so type 2x, which appears in the Angle field, and press Enter. Now it’s starting to look more like a pinwheel. R
We’re going to make more rotated copies, so go back to the Select tool (Spacebar) and click one of the six curvy shapes. S
Activate Rotate again (Q shortcut) and place the center at the selected shape’s hexagon corner. T
Like before, tap Ctrl or Option for copies. For the first rotation point, click where shown below along the hexagon edge: U
For the second rotation point, click the shape corner along the other hexagon edge.This time the rotation angle should be 120 degrees. V
As before, enter 2x, which produces a total of three curvy shapes that share a corner. W
Erase everything except for these three shapes. X
Then erase the three edges inside the shape. This is the pinwheel shape we’ll be copying to complete the pattern. Y
Select the pinwheel shape, activate Rotate, and place the center at any of the pinwheel corner points.
Z
Tap Ctrl / Option for copies, and for the two rotation points, click the other two corners of the pinwheel shape. The angle is 60 degrees this time. AA (next page)
To complete the repeating shape, enter 5x. Now we have six pinwheels spinning around one center point. BB
All of this is based on a hexagon, which tiles completely in all directions, so this shape will tile also. And because we’ll be making many copies of this object, it should be made into a component. (We’ll see the reason for this in a few steps.)
P S W
Q
R T
U
V X Y
Z
Press Ctrl + A (PC) or Cmd + A (Mac), to select all six shapes we have so far. Then right-click on any selected shape and choose Make Component. CC
Give the component any name you like, and click OK. DD
Once a component is created, it acts as a single object, no longer a set of six individual faces and their edges. It is highlighted in blue, which means it’s selected. Leave it selected. EE
Press M for the Move tool, and tap Ctrl / Option for copies. For the first copy, click the two points shown below, for a copy that fits perfectly along its neighbor. FF
Enter 3x, or 4x, or any number, to make a row of components. GG
Select everything again, press M again, and copy the entire row diagonally, up or down, so that the copies fit perfectly. HH
Enter 3x, or the number you prefer, to complete the repeating pattern. II
Here's why we used components: when you change one, the rest change also. With the Select tool active, double-click on any component to “open” it for editing. That component appears in a dotted-line box, and the rest of the components are faded in the background, not available for editing.
JJ
To get the list of colors, click the Materials icon along the right. In the Materials window, click the Search icon at the top, which opens the list of material categories. Open the Colors category. KK
Now you can paint your component however you like. In this example, just two colors were used to paint alternating shapes. As you paint the component, the other components get painted as well. LL
To end the editing, go back to the Select tool and click once anywhere outside the component. MM
Here’s how the pattern looks if you use three colors: NN
Or you could use six colors: OO
Because these are components, you can experiment with decorating the pattern. For example, you can add rotate-copied circles in the middle of each shape: PP
Or, if you can find the Offset tool (part of the Push/Pull flyout toolbar), you can add swirly stripes to each shape: QQ b
AA EE FF MM
BB
CC
DD GG
HH
II JJ
KK LL NN
OO
PP
Fizz, Buzz, Fizzbuzz!If you know a little bit about programming, there’s a good chance BY SIMON BATT you’ve come across some of the weird terms that programmers like to use. While they have funny names, this doesn’t take away from the fact that it's really important to learn what they mean and how they work. Have you heard of the term “modulo”? It’s pronounced like “module” except you stick an O at the end of it. It sounds like some sort of supervillain, but it’s a lot more innocent than that. In programming, modulo is represented by a percent symbol (%). You can use it like a mathematical symbol, such as + or . When you use modulo in an equation, modulo will divide the left number with the right one. However, instead of telling you the result of the division, modulo will instead give you the remainder of the division. For example, If you told a computer to calculate 11 divided by 2 you’ll get 5.5. However, if you do 11%2 instead, the computer will tell you what the remainder is. 2 goes into 11 five times, with a remainder of one; as such, 11%2 will equal 1. It seems a little odd that programmers use modulo; after all, when do you ever want to know the remainder of a division? As it turns out, modulo is fantastic for telling us if one number can be divided evenly by another number. Let’s imagine you calculate what 6%2 equals. When you press enter, the computer gives you a result of “0”. This means that there was no remainder left. Why? Easy: because 6 divides into 2 without any leftovers. When this happens, we say that the number we’re diving up is “divisible” by the number we’re dividing with. In this case, 6 is divisible by 2, because 2 goes into 6 three times with no remainder. Because of this, we can work out if one number is divisible by another using modulo. If modulo gives you a 0, it’s divisible; if it doesn’t, it’s not. Now let’s put modulo to use. Do you know of the game “Fizzbuzz”? It’s a fun game where you and your friends take turns to count upward. When someone goes to say a number divisible by 3, they say “Fizz.” If it’s divisible by 5, they say “Buzz.” If it’s divisible by both 3 AND 5, they say “Fizzbuzz.” So, to start, it’d sound like this: 1, 2, Fizz, 4, Buzz, Fizz… You can use modulo to make a computer program to play this game for you. You can set up a program that counts from 1 to 100, and checks each number using Modulo 3 and Modulo 5. If either (or both) returns 0, you tell the computer to say “fizz,” “buzz,” or “fizzbuzz.” Can you make a program that does the above? If you can, can you think of other ways you can put modulo to good use? Why not make an odd-even number detector, or a program where you enter two numbers and it tells you if one is divisible by another? The modulo sounds weird, but it’s a very useful tool. b
Novi Enim Quod Usus Linguae “Antiquae"*
If you've ever been interested in programming microcontroller computers like Arduinos, you've probably heard that you have to use the C programming language. This is mostly true. Today, however, we're going to introduce a different language that lets you interactively program your Arduino over the serial connection: uLisp.
While the language is written as uLisp, the "u" is really supposed to be a μ, the greek letter "mu" which often means "micro" in science, so μLisp is "microlisp" because it's for microcontrollers like Arduino.
What is uLisp? It's one example of the ancient lineage of programming languages called "lisps". The first lisp was actually one of the first programming languages ever made, so they're almost as old as programmable computers and even older than the home computer by a couple of decades. The family includes Racket, Scheme, Common Lisp, and Clojure among many others.
All lisps have a similar design philosophy and very similar syntax: prefix notation with lots of parentheses. So in every lisp, instead of writing "3+4" you'll write "(+ 3 4)" and instead of "print(10)" you'll write something like "(print 10)". Below is how you'd write the "blink" function that's the equivalent of "hello world" for microcontrollers. (defun b (d &optional (p 13)) (pinmode p t) (loop (digitalwrite p t) (delay d) (digitalwrite p nil) (delay d))) Compare it visually to the normal blink written in C: void setup() { pinMode(LED_BUILTIN, OUTPUT); } void loop() { digitalWrite(LED_BUILTIN, HIGH); delay(1000); digitalWrite(LED_BUILTIN, LOW); delay(1000); }
There’s no separate “setup” or “loop” here, just a single function that runs the program: b for blink. This function is defined with defun, which is a lot like saying def to define a function in Python. Instead of constants HIGH and LOW for whether a pin has power or not, we instead write uLisp’s version of “true” and “false”: t and nil.
To load uLisp you need to get the uLisp code from the main website, paste it into your Arduino studio program, and then compile and load it onto the microcontroller as you would any other program. Once you’ve done that, your microcontroller will be running the uLisp interpreter. The uLisp
Pater, non habeo braccas aliquid?***
Novi Enim Quod Usus Linguae “Antiquae"*
interpreter listens over the serial line for new programs, so as long as the microcontroller is plugged into your computer you Vis discere a lingua tua can load new programs and change the behavior of the board without ever recompiling for it. So, if you've got uLisp running right now, you can Arduino?** copy and paste the above code into the serial monitor and you should see the number next to the prompt go down, because you've provided a definition that uses some of the limited space on the microcontroller. But. Now you can call "b" by typing (b 1000) into the serial monitor and hitting enter. When you want to stop the program enter a tilde (~) into the serial monitor and hit enter. Now you can go back to entering in other expressions and trying things out. That's pretty cool. There's even an edit command you can use from the serial monitor in order to edit function definitions you already made. It ends up being a full development environment with a repl and, instead of having to run a single "loop" program on the board, you can run all sorts of programs. Now, there are limitations here: because the interpreter takes up a decent amount of the memory of the microcontroller, there's not a ton of room for your programs or uLisp data. That doesn't mean this is just a toy, though. The uLisp site has some amazing demos, including a ray tracer, small video games, and GPS mapping app that plots your walking path on a map.
Because uLisp is easier to code in than C, it's possible to make things like this even with the smaller overhead left by running the uLisp interpreter. Here are some ideas for how to use uLisp: • Writing a bare-bones gemini server that runs on a ESP32 chip (What’s gemini? See the article in this issue titled "Small Internet, Big Fun.") • Making a video game on a PyGamer board from AdaFruit • Incrementally program an AI for an Arduino powered robot car • Live code music on a piezo speaker connected to a microcontroller So all-in-all, uLisp is a really cool language and I highly recommend you check out the docs and the examples on the main site. The language isn't too hard to learn once you get used to the syntax, and it lets you experiment actively a lot more with your microcontroller than the slow "compile-upload" loop of writing C code. Happy hacking! b
uuLisp 3.3 314> (+ 1 2) 3 314> (defun b (d $optional (p 13))(pinmode p t)(loop (digitalwrite p t)(delay d) (digitalwrite p nil)(delay d))) b 275> (b 1000) Error: escape! 275>
A True Computer Art Icon BY TIM SLAVIN You know the artist Susan Kare's signs. Her minimalist focus is a number of possible solutions — work very well. You're looking at echoed today in the computer but design is not an exact science it and interacting with it, or work interface design debate between so there’s never one “right” answer. inspired by it, every time you use a realism and flat abstraction, I still think all the time about computer. for example, with Apple’s iOS6 what would be a timeless icon The garbage can icon and other operating system and new iOS7. for “save” — not tied to a piece of taken-for-granted icons can be I was fortunate to track down hardware like a floppy disk or disk traced back to Kare’s icons on the Susan and get her thoughts on the drive. Treasure chest? Anchor? first Macintosh computers. Her beginning of computer graphics, as Taxidermy? Container? icon solution for the Command well as its future. Tim: Growing up, how did you key, inspired by a symbol used Tim: How did you get hired at become involved with design? at Swedish campgrounds, is Apple? What were some key moments still used in Mac keyboards and Susan: I heard about the in your personal history that documentation today. Kare also Macintosh project at Apple from influenced your ideas about developed the iconic fonts from a good friend from high school, design? that era: Geneva, Chicago, and Andy Hertzfeld. The job title on his Susan: I was the type of kid who
New York. These were the first Apple business card was “Software always loved art and crafts and was proportionally-spaced fonts which Wizard”, and he was a key system encouraged in those areas. When I made text on a computer screen software engineer on the project. was 14, I started working during the look like print in a book. He told me there was a need for summers in the design department Because in 1983 there were an artist to create typefaces and at The Franklin Institute, a science no software programs with which symbols for the screen of a new museum in Philadelphia. That to draw icons, Kare began with type of computer, and that I could experience really introduced me an artist notebook and colored in get an idea of the craft by coloring to graphic design and typography, grids. The grids, in turn, mapped in squares on graph paper. I was and I was fortunate to have worked to what developers had to very excited, because it seemed there for an incredibly talented work with: pixels. Pixels are the incredibly interesting, and a new designer named Harry Loucks (who smallest addressable element on design frontier — and I was a good had worked for Charles Eames). a computer screen. Kare could example of the type of computer Tim: What are the one or two fill in a square on a grid and the novice that was the target key takeaways you have about programmer could fill in a square customer. design? pixel on a computer screen. Tim: Did you accomplish your Susan: For designing symbols, The grid restriction also helped goals and ambitions at Apple? I always try to create images that
Kare focus on what matters, not What did you leave on the table, are meaningful and memorable, so how many colors or how realistic if anything, that you'd like to have they are easy to remember. an icon might be. Instead, grids tried? I also believe that, in general, helped her focus on how well an Susan: I really try hard to focus less detail makes symbols more icon worked as a universal image on whatever I’m working on — to universal. Scott McCloud (in his for a concept, for example, traffic think about the design problem and terrific book, Understanding
Top to bottom: a page from Susan Kare's notebook showing the original finger pointing icon; early Macintosh fonts designed by Susan Kare; Susan Kare in her office in the 1980's.
Comics) illustrates this by showing a series of faces with less and less detail, until you see a circle with dots for eyes and a line for a mouth–it could represent anyone. And my opinion: a bit of humor is a good thing!
Tim: What sort of background do you think aspiring designers should have to become great designers? Do they have to go to school or is it possible to be a designer outside of a formal college education in design?
Susan: I’m not sure you can generalize, but I think having a liberal arts education can be helpful in solving design problems. It’s also great to seize any opportunity to gain practical experience by volunteering to create graphics pro bono.
Tim: What are the most interesting design opportunities you see in the next 10-20 years? Where do you see design providing the most value to society, companies, and individuals?
Susan: Design opportunities are everywhere — from packaging to websites to road signs. I get excited when I see something wonderfully designed anywhere (however humble or important)—seems as if there are endless opportunities for any designer to be thoughtful and improve or create something of lasting value. b
Strandbeests and the Design Genius of Theo Jansen
Like the first thought you have when you wake up, the first lesson of each year can really set the tone for the months to come. I try to be very deliberate about choosing the first glimpse students get in my class. I see this as the first impression of a good student-teacher relationship.
This year, I am focusing more on design, so I began by introducing my students to Strandbeests, large wind-powered PVC pipe beach sculptures. The artist that creates these sculptures, Theo Jansen, has been toiling away on the beaches of the Netherlands building these machines for many years. Lined with dozens of legs rotating on cams around a central shaft, the sculptures walk across the beach powered only by sails attached to tall poles.
While he has received quite a bit of fame recently, for many years Jansen was building these “beach animals” in obscurity. Beyond being engineering marvels I see the Strandbeests to be a great example of innovation, persistence, and design. I also saw this as a perfect way to stretch my students’ imaginations.
In an interview with Adam Savage, Jansen refers to his designs as not just an innovation, but his “mental children”. This seemed like a novel way to describe the process of innovation, so it became the center of our lesson. Just like real children, an innovation or a “thought child” requires years of care before it can walk on its own. In old videos from the early 90s, you can see Jansen struggling just to keep his beests upright and moving forward. However by the late 90s, his designs were intricate and towering above their creator on the beach.
If designs are like children, at what point does an innovation evolve beyond its creator to being something independent in the world? As my students discovered, something interesting happened to Theo Jansen and his Strandbeests in the late 90s and early 2000s. As his designs became ever increasingly inventive and impressive, they
Strandbeests and the Design Genius of Theo Jansen
caught the eye of artists, engineers, and designers, and fame came quickly. Now his works are exhibited in museums around the globe, and Theo is no longer the lone man on the beach. After he put diagrams on how to build the legs and cams that drive his creatures on his website, designers as diverse as Japanese puzzle makers and high school students began replicating the sculptures and building new iterations.
In this way, Strandbeests are also a great introduction into version control and open source engineering. On his website Theo presents his early designs as an anthropological museum exhibit. With each version of the design, the zip-tie connections became stronger. In many ways he sees these beests as having a spirit of all their own. Since my classes will be learning about forking and open source software in our classes this year, I found this to be a perfect opportunity to start that process.
To stoke their creativity, I asked my students to delve into their imaginations and to find some sort of “beest” to design. We made sketches based on Dr. Seuss characters, and designed creatures out of popsicle sticks. They would ask on occasion, “Does this have to have a purpose?” and I would always say no. True imagination shouldn’t need any explanation. Once they settled on a design, we brought their creatures to life using CAD and our 3D printing lab. Then, to encourage the idea of forking, students came up with iterative designs based on each other’s work.
In many ways, I wanted my students to make the connection that this is the goal of innovation. To take an idea that springs from the imagination and bring it out into the world. Given enough care and attention, it can live a life on its own and continue to grow and evolve with generations. b
FABRICE FLORIN, FLICKR
“The best way to predict the future is to implement it."
—David Heinemeier Hansson
Thank you for reading this issue of beanz! Check out the links below to read stories from this issue online with links to learn more.
The Eternal Quest for Endless Power
https://beanzmag.com/ eternal-batteries
Changing Bases
https://beanzmag.com/ counting-base-numbers
Just Add OOP!
https://beanzmag.com/ python-roll-a-story-oop
This Computer Ain't Big Enough For the Both of Us, Cowboy
Hmm, I Think I'll Save the World Today.
https://beanzmag.com/ computer-model-saves-world
tidbitz
https://beanzmag.com/ december-2020-news-wire
Keys, Handshakes, and Primes
https://beanzmag.com/ prime-numbers
Hiding In Plain Sight
https://beanzmag.com/ tracking-covid-with-phones
Small Internet, Big Fun
https://beanzmag.com/ small-internet-bbs-gemini
Pinwheel Pattern
https://beanzmag.com/ sketchup-pinwheel
Fizz, Buzz, Fizzbuzz!
https://beanzmag.com/ modulo
Novi Enim Quod Usus Linguae “Antiquae”
https://beanzmag.com/ ulisp-language
A True Computer Art Icon
Strandbeests and the Design Genius of Theo Jansen
https://beanzmag.com/ strandbeests-theo-jansen
Sssssssubscribe!
