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

IMG_6288IMG_6289IMG_6290

 

 

 

Link to Sound walk reflection here 

 

 

 

P.Comp: Link NYC – Observation

 

linknyc.jpeg

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

image8

 

 

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.

 

WGWAM74I5V6NMNTX5YWJ2JJSJQ.jpg

 

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

 

wifi-technology-symbol-wireless-and-wifi-icon-vector-168905731.jpg

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
background(0);

}
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);
noStroke();
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;
noStroke();
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);
strokeWeight(20);
ellipse(150 + frameCount, 190, 20, 50 + (frameCount / 2));

//Flashlight
strokeWeight(4);
stroke(255,220,0);
fill(255, 255, 0);
rect(20, 170, 150, 55);
rect(120, 140, 70, 100);
console.log(mouseX, mouseY);

//Flashlight button
strokeWeight(1);
stroke(255,220,0);
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 ❤ ❤