today, we had a special synthesis session where all the first-year students were assigned a partner and asked to *synthesize* our knowledge from pcomp and icm—so, to make something that used arduino and p5. for most of us, this was our first time ever making these two platforms talk to each other.

my partner was ella dagan and we made this silly visual thing that’s controlled by a force sensor. we used the force input to determine the opacity of the circles. if you press really hard, you get a special message!

circles n squares

don and his partner also used a force sensor to make their hypnotic color-changing thing.


pcomp: servo motor

we’ve been talking about connecting analog sensors to servo motors. in class and in labs, tom uses a potentiometer to control the motor, but CONFESSION the starter kit i bought for class didn’t come with a potentiometer and i was trying to scrape by without one. so. i tried the lab using a force sensor. either my code or wiring is wonky and the video below shows how not to use a motor, but i actually liked the effect. when you touch the force sensor, the motor stops twitching. as someone who finds touch really calming, this interaction resonated with me.

i also find rain really calming and i’ve been wanting to make a rain sketch for my computational media class. i’m imagining a future project where i use the force sensor reading to control an illustration of rain in p5 and a servo motor. as you press the force sensor, it rains harder and the servo stops twitching.


using an analog sensor to control servo motor

icm: squares with for() loops

prompt: The idea this week is to explore re-organizing your code. It is 100% legitimate to turn in a version of a previous assignment where nothing changes for the end user, but the code has been restructured. You may, however, choose to try a new experiment from scratch. Aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):

  • Reorganize “groups of variables” into objects.
  • Break code out of setup() and draw() into functions.
  • Use a function to draw a complex design multiple times with different arguments.
  • If you are feeling ambitious, try embedding a function into an object.

after looking at my hexagosh code last week, dan said it’d be useful for me to try the same exercise with squares since the math would be easier than with hexagons.

i started with vars for each set of squares. it looked kinda like:

but i couldn’t figure out where push(), translate(), and pop() would fit in.

i moved to the format below after looking at lauren’s owl code. i got the canvas to fill with squares using nested loops (!) and started creating different functions for different quadrants of the canvas, even though it seems like i should be able to just use the same function and tell it to fill(blue) when x and y are between # and #, fill(orange) when x and y are between other #s, etc. i’m still having a hard time knowing what goes into a var, what goes into a function, and how to set parameters that let me change the color/angle/whatever of one chunk of squares without affecting all the squares ;(

i’ll update this post as i make adjustments.


icm: hexagosh slider

i’m finding it really helpful to write out a program “recipe” long-hand before i do anything in the editor. because it’s so easy to test and get instant feedback in the editor, i find that i lose myself down rabbit holes before i finish building out the structure of the program.

i’ll update this post when i write the program below.

slider thoughts

UPDATE: after the mess that was my last hexagon program, this one feels so good to finish… and in way less time.

simple hexagosh slider


icm: hexagosh

i think escher would be upset to know he inspired this goofy hexagon cluster animation. here are some things i learned during the process:

  • hexagon math is frustrating.
  • i wanted the computer to recognize individual hexagons without me having to create separate objects for each of them. but it seems like, in order to have an animation where individual hexagons rotate in relation to each other, i’d have to create as many objects as hexagons i wanted on the screen.
  • a lot of the nested push/pop operations seem collapsible since they’re just repeating the same thing over and over again. i wonder if there’s a formula/format for that?
  • i wonder if i could tell the computer to continue creating hexagons and push/popping to fill the dimensions of the canvas? or if, for every canvas size change, i’d have to manually add code?
  •  i don’t understand the logic behind how the hexagons do or don’t display. for example: in the blue cluster, when i click, a different set of hexagons rotates than displays when i don’t click.
  • related: how do i avoid getting lost in nested functions?



icm: algorithmic design

prompt: Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we’ll look at how this compare to interface elements we’ll get for free from the browser.

Create an algorithmic design with simple parameters. (One example is 10PRINTexample code).

Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.

i’d like to create an escher-inspired sketch. below, i’m working on the polygon. i had to manually set the x- and y-coordinates, but it seems like there should be a way to automatically set the origin so that the entire shape shows? maybe this is a translate()?

from here, i want to create a column of hexagons.

and then another column of hexagons next to the first, offset, so there’s no space between them. and then another and then another…


i’ve changed how i structure things a little. these are starting dimensions:

this is the translation, along x- and y-axis:

this is what i’m playing with. i’m not actually sure how i’ll get these columns to populate, but i feel like it’s a start to have them lined up correctly:

the above code yields:


icm: random() and mousePressed() sketches

prompt: Create a sketch that includes all of these:

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

periwinkle block in thunderstorm

see updated notes after the code block below

i didn’t use the bar2 object this time, but will keep working with this set of code. in my dream world, a bunch of shapes start at the top and move to the bottom at different speeds. the shapes don’t have to stay in their column forever, but they don’t bounce back up when they hit the bottom of the canvas. maybe i can assign a random() x-coordinate to accomplish that? and random speeds within a range? the flashing background is intense and ridiculous and i’m keeping it for now!

updated notes to “periwinkle block in a thunderstorm” (long-hand since i spilled coffee on my laptop and was letting it dry until right now):

existing code
existing code
ideas for getting blocks to drop from top of canvas to bottom
ideas for getting blocks to drop from top of canvas to bottom

ideas for getting blocks to drop from top of canvas to bottom

stupid rosh hashannah program