Becca's ITP Sketchbook
Full Screen Mode here / Editor mode here
Team: Gabriella Garcia & Becca Moore
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”
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 ❤
More soon!
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/
(*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
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
Link to Sound walk reflection here
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.
Yellow Flashlight Code – Editor View
Yellow Flashlight Code – In Browser
Last week in ICM we went over variables and mouse inputs and outputs For our sketch this week we were to include:
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:
//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);
}
(Before adding rect for button )
Have also been thinking about P5js Color Study Sketches Inspired by Josef Albers ❤ ❤
