🎵🔴🔶🔵 lego sound sequencer 🔵🔶🔴🎵

the winter show

Here’s the project setup, an hour before the show (and me, nervous and excited.)

things I learned:

==================
it’s fun, it’s funny

Once people got it, they really loved it! People described it as “fun,” “addicting,” that they could “just keep going.” People smiled, laughed, got silly with the sounds: “ba-ba-ba-ba…. aaaaah….. hellooooooo?”

I would feel a little nervous if I saw them put on headphones without reacting… then immediately relax if they started smiling. “That’s so funny,” they’d say about the sounds. “Like a bunch of animals,” or “a load of babies.”

 

I feel good that I built up enough of a system that people started imagining other applications for it…

What if you could use it as a gameboard base, and create other blocks, puzzles, and drawings to play on top?

What if you could build upwards? Or save your song?

 

===================
fewer bricks is better

It was often more effective to play with a few bricks at a time. More than roughly 2 of each color made everything a very noisy wash. From an interaction standpoint, it felt important to be able to see the causality of what you were building.

==============
kids just wanna play

Kids just want to play with legos. They’re the best testers in that way, regardless of your project’s audience, because they’re not going to listen to you… they’re not going to read… they’re just going to explore hands first.

Here are some nice things that thoughtful little people made.

Like some of the adults, too, the kids were driven by what looked cool, not what sounded best. In fact, the temptation to make something with Legos was so strong that even people who were just loitering would just drop some bricks on the canvas for fun.

=============
go with the grain

In some ways, I made a project which is against the grain of legos. You can’t push things together very hard, and you can’t stack things to any novel result.

In some ways, it was much better for adults, because it required deliberate care and attention. One parent said of their kid, “She doesn’t really know what to listen for.”
Adults might love the concept behind it, or start dreaming about the business prospects…
Legos shouldn’t required deliberate care and attention. In this sense, my project opposed Lego-ness.

My project also opposed the grain of public interactive showcases: it was very sensitive to changes in noise and light. The tech wasn’t too forgiving– errors in image-processing sometimes felt jarring and obvious.

Finally, as more visitors came and played with it, it would often behave more and more “broken” until I restarted it. Though, I think that’s probably common for many projects. Still, my dream for it was for recorded voices to accumulate, erase, and become more interesting over time, capturing the vibe of the last musician.

 

pcom: adventures in fabrication

Spent this weekend at home recuperating from the week.
It was a rainy few days where I only left home once per day.

I was so tired. I moved in slow leaps and small bounds on fabrication… something that is very new and daunting to me, but felt very good after I reflect on my work Sunday.

Also, at this point, p5.js finally works!

https://vimeo.com/245683284

and fabrication is coming along… (cardboard mockup)

measurements/schematics

trying different interfaces for record dashboard

workspace circa 5pm today

to-do list, circa 4pm

icm final ✨✨

The last two weeks have been tough for me on many levels. I decided to pivot my final project from sandwiches. I got some great feedback on that project, but just not enough time to flesh it out the way I want.

For this week (our last week), I instead built out a virtual version of my pcomp project, which is a lego music sequencer. Some of the functional code I had already written last week.

Here’s the working prototype (which is sure to keep changing!)

I was at first avoiding merging ICM + pcomp for a long time, because I don’t feel like this project, as a browser game, totally stands on its own as a satisfying interaction. Still, this was actually one of the most challenging things I’ve coded so far in ICM. I feel pretty proud, and I learned so much from the experience.

I was up for at least 8 hours in Bobst, where it’s climate-controlled to keep you AWAKE. M2M chocolate and tea kept me going through the wee hours…

The process really pushed me to be very deliberate, detailed, and creative with my debugging. I was working with several layers of storing information…

• built-in 1D pixel color array ([r,g,b,a])
• analyzing a 2D brickArray (based on x,y coordinates, incremented out per brick width and height)
• asking the 2D brickArray if each index item was more red, green, yellow, or blue based on a ratio of [r] vs [g] vs [b]
• based on color, storing values “R” “Y” “B” “G” as strings into a 2D “songArray”
• interpreting strings and playing corresponding sounds
• stepping through a column of sound at a time, based on frameCount% intervals

Some stills from that late night:

Setting up an array of brick colors… why is it not working?? Ah, because I used “push()” incorrectly.

Finally, console is telling me where each brick is on the grid. Took a while to make sure “x,” “y,” columns and rows were aligned and not reflecting on the wrong axis.

If the sound was successfully stored, it would tell me in the console. (see: “BLUE, beatbox @ x2, y6”)

When experimenting with p5 pixels, I wrote a function to draw a rectangle for each unit to make sure the computer was seeing the image.

Here I was experimenting with pixels, to see if p5 could read the blue lego image as “on top of” the white grid image.”

When we tested it in class, my tester got the premise of it pretty easily. People liked the idea. Here were the questions I posed:

• What do you think a physical experience offers that this one doesn’t? and vice versa?
• Imagine you can record your own sounds. How long do you think you would play with this before getting bored?
• What kind of sounds would you like to hear?

The “found sounds” aspect really appealed to people. Mimi asked me to consider if “playing with legos” is the main interaction, or “building music.” Someone suggested screaming lego people…

~~~~


sandwich side note:
Here’s some of the feedback I got from user-testing my sandwich prototype. I would love to continue this sometime, maybe during J-term? I have too many ideas!

• “professionalism” section really made people think about their personal definitions
• people chuckled when they were defining “sandwiches” 
• introduction felt a little long/text-heavy (for some, not all)
• because it’s modeled after a work test, you want to just get it over with (for some)
• the ending was confusing. needed resolution. more frustrating than communicating a lack of agency (“I would think your code was broken”)
• user-testing prototype worked really well!

 

sandwich storyboard

============================
ICM final project boss battle
progress:  week 1 —-> week 2 👾
============================

is a storyboard a sandwich?

This week I wrote copy text and gathered imgs for my sandwich game.

J gave me the idea to model it after CAPTCHA image testing, which distinguishes bots from humans.

As I started putting it together, the copy text naturally materialized as some sort of weird AI job application procedure….

Here are some simple gifs of “gameplay.”

Applicants are first questioned on their sandwich identification skills…

…then proceeds onto bigger questions. What is professionalism? How do we define it? (It can be a euphemism sometimes.)

Though as a simple AI perhaps you are just looking for straightforward cultural symbols of what it is. Parsing for white men at computers…

By part 3 in the game, the user doesn’t have any control over which images are chosen.

The user might click on a mother nursing her kid as a “leader,” but all of their choices become ultimately zapped…

The whole world turns to sandwiches.

cam doodler

~~~~~
doodle your world via webcam!
fool your foes! impress your friends! 👀

check out the demo:

look at what these awesome people made:

~~~~~
code version: https://alpha.editor.p5js.org/kathymakes/sketches/B1sZUM4Rb
play version: https://alpha.editor.p5js.org/full/B1sZUM4Rb

stop & frisk data, 2016

This week’s homework was pretty challenging for me. I spent most time reviewing Dan Shiffman’s videos to understand how strings and APIs work. (It did help this week, to do part of the quiz *first*, instead of in retrospect.)

The other hard part was figuring out what kind of data set to work with. I spent a good couple hours getting distracted between all these API sites…

These are the ones I narrowed down to, not even the full list!

I’ve always wanted to do something rooted in my surroundings; especially after civic hacking stuff back home in Boston, it lends this sense of investment to do stuff in your own city.

There is so much just on NYC open data alone. (Not to mention, multiple rat sighting maps…)

Here is the CSV for NYC Stop and Frisk data, in the year 2016, taken from the NYPD site.

Stop-and-Frisk is a NYC-specific program aiming to lower crime by detaining and searching people “at random,” for dangerous assets, drugs, contraband. It’s known for being incredibly racially biased, and having pretty much no effect on crime.

I wanted to highlight with visuals how biased and ineffective Stop and Frisk is in general, by using a data set to show amount of people stopped last year.

I debugged by using console.log() to continuously print out strings. Later on, I wrote functions to display only text for specific races.

My dataset is currently incomplete, since I never did figure out what “Q” was an abbreviation for.

Overall, this feels like an unfinished experiment to me, and I would definitely like to do more! The aesthetics are kind of rough and arbitrary. Technically, I would like to push myself by adding a layer of data— e.g. showing how the MAJORITY of people who were frisked did not have any contraband, any arms, any weapons whatsoever.

As someone who can be impatient with direction-following, I definitely reached my limit this week of “figuring stuff out on my own.” In other words— I couldn’t just subsist on skimming libraries and glancing back at in-class exercises!

 

html dom: personal site

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

in motion:

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:

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:

http://www.slickquick.com/

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

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:)
  
• 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:
  
• 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:
http://kaaathy.com/  

See the original p5 sketch:
http://alpha.editor.p5js.org/kathymakes/sketches/rkfwhL63Z

leWitt maker (now with 900% more FUNCTION!)

Last week, I made this Sol LeWitt wall-drawing-builder.

It totally does the job, but with very free-spirited, non-compartmentalized code. I have only one function, “randomLines(),” holding the whole thing together. (see above)

Looking at this, it’s not immediately clear what’s going on. Thank god for past Kathy’s comments! And yet still it would be such an undertaking if I wanted to change the way it behaves at all.

This week, we were tasked with rewriting our programs with functions. I’ve worked with functions before so I thought it would be a breeze to simplify my code this way. It wasn’t difficult per se, but definitely I hit a few crossroads in the process.

My objective:
I need something to randomly draw lines, and I need it to do that in a quadrant that I click.

Seems simple enough! But I realized that I had a number of options.

• I can randomly draw lines, but what kind of lines?
• Do I need to tell p5 how to make a horizontal line every time I draw?
• Do I make the lines random when I draw, or make them random before I draw?
• I can figure out what quadrant, but is it when I click? Or is it all the time?

I did some pseudocode to figure it all out…

I made separate functions for “checking,” and “executing.” For example, checking what quadrant I was in was separate from drawing in that quadrant. This felt cleaner and less error-prone.

I organized the 4 types of lines in their own functions as well. With this flexibility, I can change things so that some lines are drawn randomly and some are not.

There are 9 new custom functions, where there used to be just one.

• findMouse();
  • checks mouse position against quadrant bounds, returns quadrant #
• drawLines(x,y);
  • draws a random line pattern using (x,y) to determine location
  • (x,y) are provided by input from “mousePressed()” and “findMouse()”
• randomNumber();
  • generates a number between 1-5, assigns to global variable “r”
• randomLines();
  • draws 1 of 4 line types based on variable “r,” determined by randomNumber();
• horizontal();
  • draws horizontal lines
• vertical();
  • draws vertical lines
• diagonal1();
  • draws lines starting from top left
• diagonal2();
  • draws lines starting from top right

You can check out the improved code here.

azalea’s drawing: adding “night mode”

For part 2 of this week’s assignment, I switched p5.js drawings with Azalea and added interface functionality to it.

Here is Azalea’s original sketch:

See the original code.

The design’s main variables are color and shape type, both of which are controlled by the mouse position through 6 different quadrants of the screen.

leWitt maker

Play with the drawing here.
Check out the code.

I’ve always loved Sol LeWitt’s work. When I went to Dia Beacon earlier this month, I was especially moved by this wall drawing. It’s such nuance and beauty created by such simple rules.