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

6

Surprisingly, this one looked much better once printed out:

2

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.

IMG_7797IMG_7798FullSizeRender

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 :

Noise:

noise

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.

via GIPHY

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:

bee

 

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.

Assignment:

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:

via GIPHY

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.

IMG_5262-1

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

matrix.write();

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

Screen-Shot-2015-12-16-at-5.35.04-PM-1

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.

IMG_6214

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 p.jesse.donaldson@gmail.com or info@marcelanowak.com.

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

ICM Final Project – Sound & Vision

For my final project I decided to combine visual effects and sound. At first I wanted to make an audio visualizer, focusing on objects in 3D space. I started working in p5, but quickly realized that the 3D possibilities of the program aren’t fully developed yet.

That fact led me to try my luck in Processing. Despite my lack of previous programming experience, switching from javaScript to Java wasn’t very hard, so I continued working on my project in that software.

Screen Shot 2015-12-01 at 10.55.49 PM Screen Shot 2015-12-01 at 10.55.01 PM

During this time, I came across an incredibly satisfying video(click), which depicted a connection between a piece of music and its visualization. This inspired me to slightly change my general idea.

Screen Shot 2015-12-02 at 12.39.45 AM

Because of my industrial design background I was drawn to play with sketches in 3 dimensions.

My goal was to mimic the collisions in the video, replicating the way the audio responded to these collisions in my own way.

Screen Shot 2015-12-01 at 10.56.32 PM Screen Shot 2015-12-01 at 10.58.19 PM

Although I was attracted to the flat design of this video I preferred to continue developing my 3D skills.

While the project was progressing I kept stumbling across more inspiration. Each piece seemed to feature shaders and different addons, which steered me to switch to OpenFrameworks.

After struggling with installing Xcode, I converted my Java sketch to C ++.

I have to admit that was a pretty challenging task for me, both in creative, and programming way.

I spend a lot of time struggling with shaders and addons, that didn’t want to run on the newest version of Xcode, so I decided to downgrade my program to 8.4 version.

That made my life easier in terms of addons, but made it harder in terms of functions, which sometimes weren’t compatible with the ones on of reference website.

Firstly, I created a spiraling wave made out of turquoise spheres. Then, decided to draw another set of sphere (white ones) floating around the wave. My goal was to give them random speeds and positions, so that they could touch turquoise line at its different parts and moments. The moment when two sets touch each other triggers random note, so that the can create some sort of music.

Screen Shot 2015-12-01 at 5.20.58 AM

Later on, I focused on details, such as color change, particle system ‘exploding’ from the sphere that touches the line, and finally my favorite – blur and glow effect.

Here’s the final effect:

less blurry version:

I’ve learned a lot from this project . I’m amused that in such period of time I could learn so much. I feel very satisfied with the effect of my work, although I have many ideas of how I could improve my code if I have more time. Hopefully, I’ll be able to play with it really soon.

Video and Sound Final

For my Final Project I’ve been grouped with Nai-chen Yand and Carrie Zhang .

After couple hours of shooting, we end up with our final video.

During this process, we changed style of the video at least twice. In our first version we used just one song, playing constantly throughout the whole video also, we kept colors.  Finally, in the final one we decided to remove colors and changed the music, adding a silent pause in the middle of the video.

Here’s our final effect:

That was a very nice and entertaining experience. I’ve learned a lot both in terms of using Adobe Premiere and … acting.

Pin Clock

For my final project I paired up with Jesse. After long brainstorm we finally decided on creating a digital pin clock. We were inspired by a pin toy.

IMG_5125

Our first idea was to create a ‘topographic mirror’ image using 3D pin sculpture and some sort of sensors to detect what was in front of the ‘mirror’.  Because of the mechanical intricacies required to move each pin individually, and because of the cost of linear actuators we would probably have to use, we dropped that idea and came up with the clock concept.

IMG_5119

The clock would work similar as a pin toy does. Just for the design we’d need 3 sheets of flat acrylic ( 2 for board, one to attach mechanism) many acrylic rods and multi colored LED lights.

IMG_5127

Two sheets would hold the pins in place, and the third sheet would house the mechanism, which would actuate the pins forward and back to display time. Moreover, we decided on fitting multi-colored LEDs inside the pegs, so that they enhance the visual effect and the clarity of the time display.

We’ve already made our first small prototype, laser cutting wholes in 2 acrylic sheets and cutting few rods to mock up the clock dimensions. We still need to estimate the grid dimensions, the spacing between holes and the amount of holes in each row.

IMG_5123 IMG_5122 IMG_5121 IMG_5120 IMG_5118 IMG_5117 IMG_5116

Our next step will be to decide how big the grid should be, we’ll have to determine peg spacing between holes.

Here’s how our initial schedule looks like:

WEEK 1:

  • finalize our concept;
  • prototype chassis;
  • determine peg spacing;
  • determine amounts of pegs;
  • research solenoids;
  • get them to work;
  • determine power needs;
  • work with the code;

WEEK 2:

  • work withe the code;
  • work with the code ( LEDs part only);
  • order rest of materials;
  • finalize the sizing;

WEEK 3:

  • cutting the rods;
  • fabrications;
  • preparing to assemble;
  • coding – tests with servos;

WEEK 4:

  • debugging,
  • fabrications;
  • etc.

WEEK 5:

  • final assembly,
  • preparing presentation

Hopefully, everything’s gonna work well and we end up having a new, gorgeous clock for ITP.