Book Cover vol.2

‘For next week you’ll design a cover for a book of your choice. You can use form, color and typography, but not images. The main constraint is that you need to use a grid system to place elements on the page.’

I’ve picked a book about Beata Pawlikowska’s travel to Amazon Jungle. Decided to create colorful geometrical pattern, which reminds me of colors which amazon tribes use to paint their bodies.

Here’s the whole process of my project:

Screen Shot 2016-03-03 at 7.38.23 PMScreen Shot 2016-03-03 at 8.20.50 PMScreen Shot 2016-03-03 at 8.50.02 PMScreen Shot 2016-03-03 at 9.40.24 PMScreen Shot 2016-03-04 at 2.04.23 PM

Screen Shot 2016-03-04 at 2.06.52 PMScreen Shot 2016-03-04 at 6.29.31 AMScreen Shot 2016-03-04 at 8.10.00 AM

And the result:



unpublished versions:

lqlq tes

Font design


This week we were supposed to design a font based on word and write the word using this typeface.
I decided to design a font created by multiple random thin lines crossing with each other.

Because I was totally wired in, instead of displaying jus a word, I wrote the whole alphabet.
I have to say that the whole process took me a looooong time, but I was really happy with the result.

I decided to use the ‘Gotham’ font, convert it to poly and randomly connect points of the array. Of course JS wasn’t aware of the letter shape, so the lines between random points created a chaos, not a letter shape:

Screen Shot 2016-02-25 at 7.01.16 PM

Screen Shot 2016-02-25 at 7.09.14 PM Screen Shot 2016-02-25 at 7.12.22 PM

to make it look like a letter, I had to draw a poly converted letter again, draw a rect and using fill path rule display just a rectangular shape, with carved letter inside.  Finally I got the result I was looking for:

Screen Shot 2016-02-25 at 8.40.26 PM

This process was pretty crazy, since I had to do it separately for each letter of the alphabet.


Final Result:

al favie copy aal

and the prints:

IMG_8120.JPG IMG_8121.JPG

Self Portrait

scanHere we go! Finally, I finished my Computational Portraiture assignment!

The task was to ‘create a computational portrait. The portrait had to portray a person, in an environment conveying something about them that is not visible to the eye’.

During our class, James and Alexander showed us zillions of amazing tools, we could use to work on our final projects.

I have to say, I was overwhelmed. After long research, many tests, I finally decided to play with Unity 3D.

My idea was to create a 3D self-portrait, placed in my own Wonderland. I wanted to allow the user to walk around my world, so that he could explore more ‘me’ in great details.

As an introduction, I just want to say that I’m a big Tim Burton Fan. He inspires me a lot, so obviously, my work had to be a little bit related to a piece of his art.

One of my favorite movies of his is Alice in Wonderland. Moreover, my middle name is Alice, so naturally my inner wolds looks pretty similar to what he showed in the film.

I have to admit, it’s a little bit trippy and psychedelic, but I guess that’s what I like the most 🙂

First step was to take a 3D scan. Thanks to the best Moon, I was able to get a 3D model of myself. We used Kinect and the software Skanect. I was pretty surprised with the result! The ‘3D me’ turned out to be pretty accurate.


Screen Shot 2016-02-14 at 4.16.46 PM

Screen Shot 2016-02-14 at 4.13.27 PM

scanI was playing around with Maya and Blender. Feeling goofy, using Creo Parametric 2 & Keyshot  I created a Oscar Statuette out of my scan 😉


Then, started working on my scenery:

Screen Shot 2016-02-16 at 7.48.52 PM

Screen Shot 2016-02-18 at 12.53.37 PM

Here’s my beloved horse:


some screenshot from the progress:

Screen Shot 2016-02-27 at 12.07.11 PMScreen Shot 2016-02-27 at 12.07.21 PMScreen Shot 2016-02-27 at 12.07.34 PMScreen Shot 2016-02-27 at 12.07.46 PMScreen Shot 2016-02-27 at 12.08.01 PM

And the first video:

and another one:

Finally, the result:


Final video :

Now, finally, here’s the link where you can play!


Hope you’ll enjoy! 🙂 Have fun! Looking forward to hear your feedbacks!

Also, I’d like to thank James George and Alexander Porter for an amazing class! I wish it would last longer, so I could experience more tools and continue my Unity adventure! Thanks again and looking forward to have some workshops with you in the nearest future!

Colors with rune.js

For this assignment, we were supposed to play with colors.

I decided to create hexagons, divided to 6 triangles and show different color sets on the drawing.

I struggled with coding the shape I wanted to achieve, cause my aim was to create a honeycomb. I was pretty close though!

Screen Shot 2016-02-21 at 6.55.36 PM

Screen Shot 2016-02-21 at 7.51.26 PM Screen Shot 2016-02-21 at 7.43.57 PM Screen Shot 2016-02-21 at 6.51.28 PM Screen Shot 2016-02-21 at 7.45.16 PM Screen Shot 2016-02-21 at 1.33.39 PM

Then I had another fancy shape ideas:

Screen Shot 2016-02-21 at 1.16.13 PM Screen Shot 2016-02-21 at 12.59.59 PM

Eventually, decided to create a grid filled with 36 hexagons, randomly colorized basing on the function I wrote.

1 3 4


Surprisingly, this one looked much better once printed out:


The prints came out pretty well too:

IMG_8053.JPG IMG_8056 IMG_8052 IMG_8055

Sharp & Wet

Our 3rd week assignment says:

Write a sketch that generates 2 shapes on a page. The first shape should be your design of the word “wet”. The second shape should be your design of the word “sharp”. Use only black and white. You have to use either Rune.Polygon or Rune.Path objects to draw the two shapes, and please try to do a design that is better done in code than in hand. Print at AMS.

Inspired by my passion to sailing, I decided to depict wet drawing ocean waves, using simple ellipse shapes.

After this step, the idea of sharp fishing hook came up quite naturally.

I had a lot of fun creating waves, changing their sizes, stroke weights or locations.

Here’s the final result:

waves_black waves_white

Next step was to print it out in AMS.


I liked the result and am really excited about upcoming prints!

Random Walker & Perlin Noise

For our first week assignment, I decided to practice Random Walker and Noise.

Here’s what I came up with :



Screen Shot 2016-02-03 at 5.41.56 AM Screen Shot 2016-02-03 at 5.42.00 AM Screen Shot 2016-02-03 at 5.42.05 AM

Later,I tried to experiment with steering walker toward different directions using mouseX and mouseY. Also, to add another feature i set up ‘keyPressed()’ to help centralize random walker in the middle of the screen again.


Screen Shot 2016-02-03 at 5.20.28 AMScreen Shot 2016-02-03 at 5.20.49 AM At the end, I decided to show ‘fear’ using noise:



Ice Cream Cone

The first week assignment was to print first generated Rune.js sketch of an ice cream cone.

Also, I’ve learned how to use github.


Using only black (0) and white (255). using triangle(), rect() and ellipse() once each, with no other drawing functions allowed (no beginshape or images), design an ice cream cone. yes, an ice cream cone.

Here’s what i did:

Screen Shot 2016-02-02 at 2.38.21 AM

Screen Shot 2016-02-02 at 3.16.16 AM

link to code

A Time Lapse screencast tool

For my Design Tool Studio project, I paired up with Eve Weinberg .

We will be making a screen recorder that makes timelapse videos and then emails you a copy that is instagram-ready, so you can open the email on your phone and share.

Each of us did some research on existing apps, similar to one we want to work on.

Existing AppprosconsTime Lapse
JingNice ideas for minimal interface bad design no
Debut lots of file formats and encoder options, centers recording on the cursor, integrated with social media – directly posts for you no indication that the app is running, accidentally hit stop when wanted to check on the recording, UI suxxx yes
LiceCapdoes GIFs well, super simple only gifs no
ScreenFlickshows the recording box. Has icon in iOS nav bar. allows you to pause. Exports to gif, YT, or QT The time lapse didnt work, or was not idiot proof yes
SnapzProX2many options, b&w filter, user can pick how many frames per second after the recordinghard to stop the recordingyes

Screenflick MovieScreenFlick’s gif:


Screenflick MovieWe weren’t fully satisfied using any of these apps.

our feature set:

  • make an mp4 file to instagram’s specs: 640×640, mp4, h264, not sure
  • show recording box and grey out areas outside of the box
  • emails you when you’re done
  • record as long as they want, then trim if its over, or speed it up
  • still to consider: how many FPS to record? 24 vs 2

nice to have:

  • add filter
  • make gif
  • pause mid recording, if you need to do something you dont want to record
  • post to giphy
  • post to FB
  • post YT
  • play it backwards, or ping pong
  • option to show mouse or not

pComp – Final

For our final, Jesse and I, instead of building a huge 11 x 25 pixel digital clock, we decided to create 5×5 pixel display.

While we now have all the materials to make a larger version, we learned early on that a smaller scale prototype would represent the foundation on which the larger display would be built on. The smaller display was built using the same principals: acrylic rod for pixels, multiplexing of an LED matrix, controlling an array of solenoids. The only thing the small scale model does not possess is controlling a large array of solenoids using the 74HC595 shift register.

Once we had nailed down our idea to creating a display using a matrix of illuminated acrylic rod actuated to create a 3 dimensional effect, we had to create a plan to keep us on track, and make a list of techniques and challenges to overcome.

As we started looking into hardware for the project, we had a pretty clear idea that we would be using transparent acrylic rod (not tube) for the pixels, and that each rod would be drilled for an LED. This really left three unknowns for us to work through: Rod diameter, rod spacing, LED selection. After playing with a few Illustrator sketches to determine spacing we settled on 7/8” W x 2.5” H acrylic rod for each pixel, 10mm ultra bright LEDs for illumination, and 6mm spacing between pixels.

Screen Shot 2015-12-27 at 1.10.52 PM

The next challenge was the actuation hardware and mechanism, this was where we really started to get out in the weeds. We looked at a number of mechanisms for pixel actuation:

  • Gear driven servo actuation
  • Linear actuators
  • Individual solenoids
  • Solenoid on gantry

We eventually settled on individual solenoid actuation because of mechanism simplicity and cost. Using the solenoids would cut out the need for a complex gear assembly, and low voltage solenoids were less expensive than linear actuators across the board.

The first solenoid we used ended up being perfect for our purposes, the JF-0520B. This solenoid uses 5v, possesses .35N of force, features push / pull operation and has a long stroke length (7mm) compared to many solenoids of similar size and voltage. The push / pull operation also ensures that the pixels will not only be pushed out, but also pulled back in as part of the operation. Once we had the solenoid, the next step we took was building a prototype chassis, fixing the solenoid to it and testing the operation. As you can see below, we built this chassis by cutting three acrylic sheets on the laser cutter. Each had holes in the corner for mounting. The first two sheets used large round center holes to house our acrylic pixels. The third sheet used square openings for the solenoids to seat into.


We learned how to wire the solenoid using the schematic linked here and here. Using the labs from class to guide us, we learned that the transistor is used to “allow us to control the flow of a high-current circuit from a low-current source.” Meaning control the solenoid circuit which runs on bench power using our Arduino. The other component we learned about in this circuit was the protection diode (1N4004) to protect from problems caused by any reverse flow of current.

With our mechanism working we felt we had a good proof of concept for moving forward. At this point we set our sights on fabrication, preparing for the eventual scaling of our project.

FullSizeRender-2IMG_6016IMG_6025 IMG_6039-4

After cutting and drilling a whole mess of acrylic rods, it was time to tackle another large technical hurdle we were facing. Multiplexing the LEDs. For those familiar with Arduino boards, you know there are a finite amount of digital pins for addressing LEDs or any other on / off component. In order to essentially expand the number of digital pins you have to drive LEDs you must learn a technique called multiplexing. This technique requires three things:

  • Creating an LED matrix
  • Wiring the chip
  • Using the code

Soldering together an LED matrix is simple enough, essentially you wire all of the anodes into rows, and cathodes into columns — creating a common cathode matrix. The result looks something like this.

IMG_6012-1 IMG_6015-3

You can check if you’re doing it right as you go by touching one of the cathode (+) column leads to the 3.3v out on your Arduino, and one of the anode (-) rows to ground. If you’ve wired the matrix correctly the LED at the intersection of the column and row should light up like this.

Actually wiring the LED matrix to the chip proved to be much more of a challenge than I had originally estimated. For availability and documentation reasons, we chose to use the MAX7219 LED driver chip to multiplex our LEDs. There was a fair amount of documentation on this chip online, a friend of mine and fellow LED matrix enthusiast Gustavo Abbot also had used these in the past, and offered his assistance.

In the end, the chip worked wonderfully. However, there was a fair amount of info that threw us off as well along the way. We began on this Arduino forum which was aimed at explaining how to use this chip, and even included a schematic. We learned however through the MAX7219 product data sheet that there were a few issues with this page. First, the digits and segments were mislabeled in the Arduino forum’s breakdown of the 7219’s pin layout. The second issue was with the wiring schematic to the chip. The schematic includes decoupling capacitors of 10 micro farads and 100 nano farads to suppress noise signals caused by the power supply lines. However, after speaking with Tom Igoe, we learned that all that was required for the circuit was a 100 nano farad decoupling capacitor. Changing this component out made the illumination of our LEDs much more consistent. I have included below an annotated page of the MAX7219 data sheet to show exactly how to wire it to your arduino, as well as the full data sheet here.

Finally, once we had the chip wired up all that was left was the code. Gustavo was a great help here, pointing us towards the pertinent libraries we would have to include in our IDE to get this to work. The libraries you will need in order to multiplex LEDs on your Arduino using the MAX7219 are:

  • Adafruit GFX: Core graphics library for Arduino – must be paired with hardware-specific library
  • Max72xxPanel: Hardware specific library
  • SPI: Allows you to communicate with Serial Peripheral Interface Devices with the Arduino as the master. — Excerpt from Arduino reference

We started here by first going through the libraries and the example sketches that came with them and pulling out the pertinent lines of code to get this working.

What you see above is the code for scrolling 0 – 9 on a 5×5 pixel display. The persistence of vision phenomenon present in LED matrices made hard coding this an interesting learning experience. You couldn’t just call up a digit at once. You have to do a row or column of the digit, use a very short delay, then proceed to the next. Because the mux pulses the LEDs quicker than the eye can tell, rows and columns of the digit are flashing on and off so quickly your eye cannot tell and you brain just perceives a full digit. The wonderful thing about the Max72xxPanel library is it provides ints for you to plug in the number of horizontal and / or vertical multiplexes for easy scaling of LED matrices. As you can see above I have hardcoded the x,y coordinates which make up each number. While I am only using 1 5×5 matrix. If I was using the full extent of the chip (8×8) and had a second horizontal display, writing to the next matrix is as simple as this:

matrix.drawPixel(8, 1); // top right of first matrix

matrix.drawPixel(9, 1); //top left of second matrix


For the full version, we would like to try a clock display and will be using code adapted from a clock display programmed in p5.js


The last ‘how it works’ related items I’d like to cover are the solenoid array, and the 5×5 matrix we presented. For this prototype, because of its size, there were enough digital pins for the multiplex, as well as a 15 solenoid array. Therefore, we did not have to address the solenoids using the 74HC595 shift register. When we scale up however, we will have to address the solenoids using shift registers to help us economize on digital pins. — although scaling up will still necessitate multiple Arduinos running a single sketch, syncing them using I2C. While I have not yet been able to address multiple solenoids using a shift register, this forum seems to provide some nice first steps. One consideration we made while creating even the 5×5 was power for the solenoids. By switching them on and off quickly in sequence to create a snake effect tracing out each digit, we only use the voltage and current requirements of one solenoid. If we wanted to actuate multiples at a time, the power requirements would scale by the number of solenoids being actuated.

With respect to the 5×5 we presented in class, one major design change we had to make as we entered our latter prototyping phases was the LED matrix. As you saw above the earlier matrices we created were rigid, created using solid core wire. Because of the actuation of pixels that was going to happen behind the matrix, for the final we had to create a sort of ‘soft matrix’ using stranded cable. The stranded cable allowed for easy actuation of the pixels, but looked a bit messy at the end of things. In the future, we will examine how to create this matrix to be as robust as possible, while also remaining as neat and flexible as we can allow.


In terms of the scalability of the project, as mentioned above we are already prepared to scale up on the number of pixels physically and technologically, we have already laser cut our second board as well as created the acrylic pixels for it. I plan to spend my time during the break learning to control a larger array of solenoids using the shift register, as well as experiment multiplexing with RGB LEDs as well. In terms of the fabrication challenges associated with adding a large number of solenoids I believe we need to revisit our method of joining the solenoids to the pixels. Currently we are using hot glue as the shielding as well as the method of joining the pixel to the solenoid. In the interest of creating a robust final product, we will need to replace this with some kind of mechanical link I believe.

For me this idea turned into much more than just a final project. I think combining the concepts of building your own displays, challenging what a pixel is, and experimentation with topographies has potential to be something not only very artistic, but also presents interesting opportunities for data visualization / message augmentation. Some of my ideas for future display projects are:

  • Creating mirrors
  • Music / FFT analysis
  • Scrolling brail below text
  • Interactive displays using RGB LEDs

Please stay tuned for further pixel pushers updates. We will be continuing to experiment with expanding this display through the winter — both of us are incredibly excited to see where this goes.

Finally, we’d like to thank Gustavo de Campos Abbot for pointing us in the right direction with the multiplexing work. To see Gustavo’s amazing work, just give the link above a click. We’d also like to thank Tom Igoe for lending some of his time to help us defrag our MAX7219 circuit. You’ve made it this far, please take some time to look through Tom’s work, here. He is one of the fathers of the Arduino and has oh so much knowledge to give.

If there are any questions on the above, please feel free to reach out directly at or

Marcela & Jesse

Now, time for my little photoshoot:

pin_clock-2 pin_clock-3 pin_clock-4 pin_clock-5 pin_clock-6 pin_clock-7 pin_clock-8 pin_clock-9 pin_clock-10 pin_clock-11 pin_clock-12 pin_clock-13 pin_clock-14 pin_clock