Point and Line to Plane
Daniel Eden is a Design Manager at Facebook. You might know him as the author of animate.css and Just My Type. He keeps a blog at: https://daneden.me/blog.
I have been following Daniel personally since my college years. Despite being a world-class designer, Daniel writes about his work with down-to-earth humbleness. While reading his adventure into generative art, I have come across one of his early sketches that is simple yet elegant.
So I thought it would be nice to kick off this month with Daniel’s sketch. Every great adventure starts with one step. It’s ok to start simple, as long as you consistently put in effort to improve your work.
The Task
In Drawing With Numbers, Daniel wrote:
My “sketches” started with one goal; to recreate a design I first saw on the back of one of Dropbox’s design team sweatshirts, created by Kristen Spilman. It’s simple enough—an array of rectangles, each rotated so they’re pointing towards a point in space.
Here’s Daniel’s sketch on CodePen.
We have reproduced it below:
Your task is to recreate it. We suggest that you use p5.js, which is easy to get started. With p5.js editor, the only thing you need to get started is a browser. Of course, feel free to use any creative coding libraries that you prefer.
Here’s the sketch ported to p5.js, on p5.js editor.
If this is your first time using p5.js, read the docs, try to understand the code and recreate it in the editor. If you can comfortably recreate this, try tweaking the code a little bit to introduce something new into the sketch. Here are some ideas:
- Can you give each line a different length or color, depending on its position & orientation?
- Can you make the lines rotate gradually to their final pointing direction?
- Let’s imagine the center as a live stage, surrounded by the line-crowds — can you make the center “shine” every few seconds to indicate an exciting performance? Can you make the line-crowds perform a stadium wave? There’s no limit to your imagination. Impress us!
When you are all done, post your work on Twitter with the hashtag #codecember and #day1. Remember to include a link to the source code, so others can learn from your creation. We look forward to seeing your sketch!
P.S. Point and Line to Plane is a book by the Bauhaus master & director, Wassily Kandinsky. We feel you might like it.