ICM: HW – Repetition with Variation / Pair-Programming




Screen Shot 2018-09-27 at 3.40.11 AM.png

Full Screen Mode here  / Editor mode here

Team: Gabriella Garcia & Becca Moore

Screen Shot 2018-09-27 at 3.40.03 AM.png


Assignment: Create an interactive artwork that implements the concept of repetition with variation. Use at least one for loop. Your artwork should also incorporate an interactive interface element of your own design. For this assignment, work in pairs.

Continue reading “ICM: HW – Repetition with Variation / Pair-Programming”

Importance of mental pictures w/ Robert Krulwich of Radiolab


Yesterday in applications, our guest speaker was Robert Krulwich. His talk was incredibly inspiring, reiterating the importance of building a mental visual image or metaphor that helps us understand math and science. That there’s an importance to distilling graphs and diagrams to stories and metaphors. He also played us a clip from their Fountain of Youth episode – where they anthropomorphized two genes a scientist was talking to help the listener [casting them as characters with sound-design and voice over elements]

He also talked about the importance of being transparent in the journalism field, and that they try to incorporate and show when they get it wrong and have to re-draft as well. That that’s all part of journalism – that it’s effective and necessary to show that curiosity can be messy, exciting, and difficult, documenting its process ❤

Episode on Color 


More soon!

ICM: Exploring translation

Screen Shot 2018-09-26 at 1.29.04 AM

been working with translation, pop, push, and rotate some. slowly learning – and found Gene Kogan’s documentation / tutorial extremely helpful  http://genekogan.com/code/p5js-transformations/


Screen Shot 2018-09-26 at 9.15.02 AM

(*could make the rectangles a forLoop?)

However, to make the button slider effect work – we think it might need to be built out through the vertex function / creating V shapes that don’t overlap but are adjacent, verses a stack of overlapping rects


CommLab: Storyboard session



When brainstorming, we all really like the idea of a design fiction, while thinking about the concept of magic and technology. We were inspired by Apple Event videos (specifically the 2018 September Event and the Iphone announcement in 2007) + the Adult Swim style BroomShakalaka video when looking through references from class .  If we cut down the storyboard? We’ll remove the intro paraody, and flesh-out Act 2



Team: Jaekook Han, Hayek Mikayelyan, Becca Moore

Option A: A 2-4 minute (max) promotional video for an invented object or service. This could be an infomercial, a design fiction, or an instructable

Product Announcement: i.Bracadabra

Company: Waffle 

Synopsis: It’s the year 2050, where magic has become an everyday reality. Wooden wands have expanded people’s daily abilities to perform tasks like moving objects and flying. Stefan Bobbs from the company Waffle is announcing his new revolutionary wand.






iBracadabra story board draft

board pg 1pg 2IMG_6287





Link to Sound walk reflection here 




P.Comp: Link NYC – Observation



Screen Shot 2018-09-25 at 8.06.48 PM.png




For class this week we were asked to find a piece of interactive technology in public used by multiple people. On my way home one day, I saw a guy using a LinkNYC on the corner of Flatbush & Rutland Road, and was inspired to learn more about it.  Originally, while passing it in the neighborhood, I knew it was a digital bulletin board for advertising, but unaware of many of its other capabilities.

It seemed like one of the difficulties is that the speaker for it is pretty faraway from your mouth if standing? So when making phone calls, there’s a tendency for it to be a less private conversation. It seemed like the person really had to raise their voice level to be heard over traffic? But it was a good solution for their dead phone, and being lost. The guy was able to contact their girlfriend while simultaneously charging their phone and searching directions.

When taking pictures of the different interface elements, another person walked by and said, “Actually works pretty good, yeah?” In an affirming way. Although they seem to be under utilized? I think its provides a lot of helpful tools: free fast wifi, phone calls, device charging, a tablet for accessing city service info – as well as maps & directions. However, I had no idea it had phone capability to make calls or and emergency 911 button and wonder if it could have made its function more “visible” as defined by Norton in POET? Would it have helped to have had a phone icon on the Link somewhere, like it has the wifi symbol? If the initiative is to replace pay phones with 7500 different link beacons, I wonder if there’s a way to make its utility more transparent? Maybe by adding a phone or map icon?

It seemed like as long as you have your own usb cord? That charging is the easiest function. That calling also isn’t too hard as well, and even better if you have headphones with you? The overall duration of the usage is very variable, depending on how long the charging takes place? or if someone just needs to look up a quick direction. But mostly was used for charging & wifi.




Screen Shot 2018-09-25 at 7.45.47 PM
from Psychology of Everyday Things


Screen Shot 2018-09-25 at 9.27.32 PM.png



images.jpg download.jpgimage.jpg



P5.js – Changes Over Time (Sketch #2)

Screen Shot 2018-09-20 at 4.38.39 AM.png

Yellow Flashlight Code – Editor View

Yellow Flashlight Code – In Browser 

Screen Shot 2018-09-20 at 4.42.05 AM.png

Last week in ICM we went over variables and mouse inputs and outputs  For our sketch this week we were to include:

  • 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.

I was thinking about summer showers back in Tennessee the other day + the animation movements we looked at last class reminded me of a flashlight : ) So I thought it would be fun to create a sketch that would tie the two together, as well as a sort of painting program too. I really love the idea of using randomness in programming, and thought it would be fun to try and include it.


Things to think on:

  • The flashlight beam is having an opposite gradient – would be nice for the strong white to be coming from the light source, and then diffusing / becoming transparent.
  • Incorporating mouse pressed / events
  • how to distill code into more variables / less hard numbers
  • how to control the speed of different animated actions
    • ex: how to isolate and individually control the speed of multiple randomness functions happening simultaneously




//Becca Moore
// ICM – HW
// Title: Yellow Flashlight
// Prompt:Create a sketch that includes –
// One element that is different every time you run the sketch = Rain Shower’s random function
// One element that changes over time, independently of the mouse = Rain Shower’s random function and the flashlightBeam
// One element controlled by the mouse = Create’s denser rain patches when cursor is moved
// variables ‘spot’ & ‘col’ directly affect the random function of ‘RainShower’
// Inspired by Daniel Shiffman’s Coding Train!
// Episode 2.5: The random() Function – p5.js Tutorial
let spot = {
x: 100,
y: 50

let col = {
r: 0,
g: 100,
b: 220

function setup() {
createCanvas(600, 400);
// black for a night sky

function draw() {

// Rainshower
col.r = random(100, 20);
col.g = random(0, 255);
col.b = random(10, 255);
spot.x = random(0, width);
spot.y = random(0, height);
fill(col.r, col.g, col.b, 40);
rect(spot.x, spot.y, 2, 20);

// Increased Rain Patches
col.r = random(10, 20);
col.g = random(0, 255);
col.b = random(10, 255);
spot.x = mouseX;
spot.y = mouseY;
fill(col.r, col.g, col.b, 20);
rect(spot.x, spot.y, 4, 50);

//Flashlight beam
fill(255, 255, 255, 40);
stroke(frameCount, frameCount + 1, frameCount + 25);
ellipse(150 + frameCount, 190, 20, 50 + (frameCount / 2));

fill(255, 255, 0);
rect(20, 170, 150, 55);
rect(120, 140, 70, 100);
console.log(mouseX, mouseY);

//Flashlight button
fill(255, 255, 0);
rect(50, 185, 30, 10);



Screen Shot 2018-09-20 at 4.14.24 AM(Before adding rect for button )



71OmBWr2ijL.jpgScreen Shot 2018-09-20 at 12.42.55 AM.png

Have also been thinking about P5js Color Study Sketches Inspired by Josef Albers ❤ ❤


Commlab: Liminal Spaces Soundwalk

Duration: 5:00
Starting Point: The Paulette Goddard Staircase in the Tisch Lobby
Team: Mary Notari, Brent Bailey, Becca Moore 

For our first assignment in Comm Lab:Audio & Video, we learned about and experimented with sound. I learned so much from my collaborators. We realized the value of brainstorming tools, like whiteboards, to help us map out our process. It helped us map the narrative arc of the piece.

Our feedback from the class was very helpful! We had been struggling with a way to make our theme less abstract – more specific. We had started with an umbrella concept of liminal space, inspired by the stairwell. We had wanted to highlight liminal architectural spaces like the stairwell, elevator, the lobby or a bench. Moments of the in between. As we re-routed to make our walk more physically accessible – we found ourselves in the lobby and attracted to architectural moments and textures. And were very inspired by Marina’s feedback to think about “what does it mean to move through a liminal space”. We had chosen a Solnit quote, compelled by her themes of inbetween-ness and how stories are often our compasses through our liminal ever shifting landscapes of cities.

To respond to what we could have done differently? If we were to do another iteration?I think really distilling a “through-line”. We may have started with thinking about liminal spaces? but could be good to keep the pulse on how the project evolves through the collaboration, sometimes that means it starts to shape in a different way thematically.

I think a post-it note wall organization strategy could help us arrange the elements we explored. I think by trying to organize it in that manner, the through-line would start to emerge. It could’ve helped to have started off the project that way too – then we using  the same post-it notes to our development arc timeline.

I would also have had us all sit down, and demo/decide a workfile system. Mary showed me a fun/ helpful way to incorporate google drive autosync for shared files, but i think my update wasn’t quite registering.

Working with Brent and Mary was super inspirational  🙂 ❤




Link to Next Assignment/ Storyboarding