Author Archives: kaaaaathy

serial: grow-poem [w.i.p]

(this is project #2 for this week. I focused more time on experiment #1, “tamagotchi party,” but wanted to get this idea out of my system too.)

My friend L thought it would be fun to use the plant sensor towards something virtual. I thought about things that take in water, sun… things that grow.

Today in ICM, we learned how to manipulate strings. I was struck with this image of a poem which is generated…. so slowly… over the period of days. And even better if it took on a life of its own, and like all other organisms, grow using water and light.

the p5 sketch (in progress):

Screen Shot 2017-10-18 at 2.23.47 AM.png

the bare bones hardware (in progress):


Like everything else, this project is an under-going process! Will update more later.



html dom: personal site

I was a little short on time this week, so I wanted to do something nice and simple.
I created this personal splash site for myself:

Screen Shot 2017-10-15 at 10.11.40 PM.png

in motion:

kathy site.gif

It’s definitely still got a bit of tweaking to do. I’ve been meaning to re-do my personal website for a while. It’s been very vanilla and minimal as of now:

Screen Shot 2017-10-15 at 9.01.29 PM.png
I thought it would be fun to integrate a p5 background into a single-serve page.
I was inspired by Rafael Rozendaal’s slinky “slick quick” website:

Screen Shot 2017-10-15 at 9.46.21 PM.png

Okay, so I made something which is secretly a bouncing ball (although it does have a layer of bouncing colors too.)

Screen Shot 2017-10-12 at 7.26.58 PM.png

I added a button at the top of the page which would let people refresh the background of all its color nonsense.

A few of the challenges I ran into:

  • I wanted the “button” element to be responsive when I changed the window width. I know how this works with CSS on an existing HTML element.I wonder if there is a way to control a specific HTML element which I already created, without declaring it in p5?(Here, “clear bg” stays fixed when I resize the window:)
    Screen Shot 2017-10-15 at 9.06.33 PM.png
  • In the end, I put all my nested HTML elements into one js dom div. Because that one string got so long, it was difficult to change aaaaannny of the content in the Div element.
  • Object oriented: The color change was a bit more difficult than a normal 1d ball bounce; I wanted the individual red, green, blue values to “bounce” back when they hit max or min values (255, 0).I got it in the end; for a while, it looked like this:Screen Shot 2017-10-12 at 7.00.54 PM.png
  • Also, I worked on everything zoomed out. As a result, put in all the CSS values wrong… derp. Note-to-self, work at 100%!

Lingering questions:

  • I had multiple buttons at one point. I thought it would be nice to create a nav div to house the buttons in. Is it possible to nest DOM elements with sketch.js? 
  • The sheep image that appears on click disappears, unless I set up my own local server? How do I do that?
  • Can p5 be responsive without refreshing the page? I noticed that the sketch canvas bounds were fixed after loading… I assume no 😦

I will be troubleshooting sometime in the future. I transferred everything to github for now, so it is live.

You can see it hosted here:  

See the original p5 sketch:

5 images

It’s the month of October, and the animals are busy at work…


Still, a springy sense of whimsy persists in parks…


Meanwhile, like bees, everyone is so busy at ITP, gathering knowledge.

I’ve been thinking about lots of things. For instance, ways of understanding programming, without the programming…

I remembered being so aware of recursion as a kid, and creating loads of recursive jokes with my brother. Somehow kids find infinity on their own, and it totally enthralls them.

(a TV in a TV, in a TV, in a TV…!)

I wonder what other concepts we learn through our world, through our bodies, through humor.


Here’s a new markdown language just for burritos.

I’ve been on the lookout for systems and new language short hands people make, especially when they don’t have a formal, product-polished system in place.


And as usual, I’ve been observing the hostile, barred-teeth expressions of our city. Somebody must’ve kept sitting on this pipe!

new toys: rain sensor, LCD [bloopers]

For this week, I wanted to make a plant interface which could tell you if the plant needed water. (I have a soft spot for this “Internet of Plants” future…)

Screen Shot 2017-10-11 at 12.53.13 AM.png

Here are all the parts at play. Note that it doesn’t work (yet.)


I definitely upped the ante on myself this week! This post will mainly be about my process and struggles.

I spent most of my time playing around with these two new sensors….

This lovely rain sensor:

… and this very finnicky 16×2 liquid crystal display (LCD):


Continue reading

follow up: 4×4 matrix piano, servo fun!

4×4 happy birthday!

Just for fun, I tried playing a full song on the 4×4 I set up last week.

As someone who played the piano for 11 years, it was pretty difficult to conceptualize the notes “wrapping” as they increased. I found myself remembering the “shape” of the sequence of notes, much more than the distance between them.

Many takes later…

Continue reading