Swing Times is an interactive public installation of 20 illuminated ring-shaped swings located in Boston. At rest, the swings emit a soft, white light that lightens the area, but, once in motion, a custom micro-controller flips the LED lighting within the swing from a white to a more vibrant purple. This controller signals and measures the swing’s activity level, which then triggers the light at varying intensities. I admire this project a lot because of how it creates an engaging experience and transforms a static place into an active park for Boston residents and visitors, as I had the pleasure of personally interacting with this installation when I visited my brother in Boston.
J. Meejin Yoon is an architect, designer, educator, and co-founder of design-drive architecture studio Howeler + Yoon. She is a current professor and Head of the Department of Architecture at the Massachusetts Institute of Technology, and previously studied at Cornell University for her Bachelor of Architecture degree and Harvard University for her Master of Architecture degree in Urban Design. She also received a Fullbright Fellowship to Korea. Broadly speaking, her work revolves around innovative and interactive landscape, and subversive structural work in various communities and for various audiences. Although she is not listed as a direct member of the design team for the Swing Time project, she is in charge and principle of many other projects under her studio, such as an upcoming “Float Lab” architectural installation.
Lauren Lee McCarthy is an artist based in Los Angeles and Brooklyn. Majority of her works focus on issues of how surveillance, automation, and network culture affect our social relationships. She is the creator of p5.js! In 2011, McCarthy received her MFA from UCLA Design Media Arts. Now, she is an assistant professor at UCLA Design Media Arts. Along with her works being exhibited internationally, McCarthy is a Sundance Institute Fellow
Among all McCarthy’s projects, I really loved her project “24h HOST,” which was collaborated with Casper Schipper. It was created in November of 2017. I approached this project mainly, because I was intrigued by the use of space and colors in this project. Reading into “24h HOST,” I admired how it used algorithms and emphasized the future role of humans in AI driven world. This project is a small, 24 hour party. Unlike most parties, this 24 hour party is driven by a software that automates the event. Every 5 minutes, one guest departs and a new guest arrives. Throughout the 24 hours, the software system all continue to bring in an endless cycle of guests, which will tire the human host.
Above is the link to the project site, but it uses a non-English language; therefore, I relied on using the information from her website (below) and different articles.
Recently I visited the Carnegie Museum of Art down the road for the first time since before this summer. There have been several new installations since I last visited the museum but one stuck out specifically which was an exhibit by the Guerrilla Girls. The Guerrilla Girls are a self defined as a group of “feminist activist artists”. The aim to target discrepancies in the art world between representation of women’s works vs men’s. Among the groups tactics for bring attention to these sexist discrepancies are absurdism and borderline threatening. One of their favorite facts to demonstrate the underrepresentation of female artist is as follows:
An example of the Guerrilla Girls Activist Art
The group consists of an ever changing flux of people who remain anonymous in order to keep the attention on the issues instead of the members. I admire this group because of their frankness, aggression, and successful unorthodox methods.
/*Vicky Zhou
Section E
vzhou@andrew.cmu.edu
Project-10-Landscape
*/
//window roll down variables
var mtnspeed1 = 0.00009;
var mtndetail1 = 0.0002;
//mountain variables
var mtnspeed2 = 0.0001;
var mtndetail2 = 0.002;
var mtnspeed3 = 0.0008;
var mtndetail3 = 0.005;
var trees = [];
var windowrolldown = [];
function setup() {
createCanvas(480, 480);
//places trees throughout landscape
for (var i = 0; i < 10; i++){
var rx = random(width);
trees[i] = maketrees(rx);
}
frameRate(50);
}
function draw() {
background(255, 220, 200);
makewindowrolldown();
makemtns();
push();
noStroke();
updateAndDisplaytrees();
removetrees();
addtrees();
pop();
displayCarWindow();
displayCarMirror();
}
//creating function to show and update trees
function updateAndDisplaytrees(){
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
//removing old trees from landscape
function removetrees(){
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].peaks > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}
//adding new random trees
function addtrees(){
var newtrees = 0.005;
if (random(0,1) < newtrees) {
trees.push(maketrees(width));
}
}
//moving trees across screen
function treeMove() {
this.x += this.speed;
}
//drawing trees
function treeDisplay() {
// var treeheight = 10;
var randomtreeheight = this.tbranches;
fill(65, 90, 85);
push();
translate(this.x, height - 30); // WHAT IS PURPOSE OF THIS TRANSLATE????
triangle(this.peaks + 10, -this.peaks - 20,
this.peaks + 90, -this.peaks - 20,
this.peaks + 45, -this.peaks - 210 * randomtreeheight);
pop();
}
//making trees
function maketrees(mx){
// noStroke();
var trees = {x: mx,
tbranches: random(0.4, 1.2),
peaks: 50,
speed: -5.0,
move: treeMove,
display: treeDisplay}
return trees;
}
//making window roll down
function makewindowrolldown() {
push();
beginShape();
strokeWeight(0.2);
stroke(60, 60, 170, 300);
for (var x = 0; x < width; x++) {
var t = (x * mtndetail1) + (millis() * mtnspeed1);
var y = map(noise(t), 0, 1, height, 100);
// vertex(x, y);
line(x, y - 100, x, height - 100);
}
endShape();
pop();
}
//making mountains
function makemtns() {
push();
//light purple mountains
beginShape();
stroke(150, 125, 130, 100);
for (var x = 0; x < width; x++) {
var t = (x * mtndetail2) + (millis() * mtnspeed2);
var y = map(noise(t), 0, 1, 0, height);
// vertex(x, y);
line(x, y, x, height);
}
endShape();
//dark green mountains
beginShape();
stroke(60, 80, 90, 120);
for (var x = 0; x < width; x++) {
var t = (x * mtndetail3) + (millis() * mtnspeed3);
var y = map(noise(t), 0, 1, 0, height * 2);
line(x, y, x, height);
}
endShape();
pop();
}
//draws car windows, frame, and handle detail
function displayCarWindow(){
//car window and frame display
push();
stroke(40, 40, 40);
strokeWeight(150);
line(-30, 100, 150, 0);
strokeWeight(100);
line(150, 15, 480, 0);
line(0, 430, 480, 430);
strokeWeight(70);
stroke(40, 50, 50);
line(0, 450, 480, 450);
noStroke();
fill(255, 220, 210);
triangle(0, 40, 0, 100, 50, 50);
//car handle and details
fill(70, 70, 70);
rect(30, 415, 120, 90);
triangle(150, 415, 150, 480, 210, 480);
fill(50, 50, 50);
rect(40, 425, 90, 60);
fill(80, 90, 80);
push();
fill(80, 90, 80);
strokeWeight(20);
stroke(80, 90, 80);
curve(40, 430, 60, 445, 120, 440, 150, 470);
pop();
pop();
}
//draws car mirror
function displayCarMirror(){
push();
noStroke();
fill(240, 240, 240, 190);
rect(0, 310, 100, 40);
rect(0, 340, 120, 10);
rect(0, 360, 40, 20);
pop();
push();
strokeWeight(25);
stroke(40, 40, 40);
fill(40, 40, 40);
curve(5, 316, 5, 316, 95, 314, 95, 400);
curve(30, 320, 103, 318, 103, 355, 35, 359);
curve(5, 410, 5, 380, 100, 365 - 10, 100, 290);
pop();
}
For this week’s project, I decided to the view from a car window in the passenger seat, because roadtripping and looking out the windows is one of my favorite views in the whole world (especially in woodsy, mountainous areas). Originally, I had envisioned making telephone poles and clouds to go along with the scenery, however, after playing around with the noise function, I discovered a very pleasing wave that forms when dialing down the speed and detail aspects. I thought this form was very similar to the feeling of sticking your hand out the car window on the highway and having it glide and ride the air, but I also thought it also waved in a manner similar to rolling up and down a car window, so I implemented it as the latter. I originally wanted to implement a reflective, smaller, moving generative landscape mirroring the current on in the small car side mirror, but I could not end up figuring it out; I would like to revisit that concept when I have more time in the future.
I looked at Angela Washko’s interactive work titled “All The Places You’ll Go”, where she begins to use postcards as found artifacts to unravel the use of women as a representation of place in the lens of the male gaze. I initially gravitated towards this project for its aesthetic appeal, and continued onward into it out of my predisposed interest in postcards as graphic artifacts.
“flight board” where postcard archives may be accessed by location
Diving into the project was eye opening in presenting me with the images in a sterile context, where I could think critically about the content of the postcard and compare it directly to prints with the same objective.
Hawaiian woman used to sell a vacation
In some images, we see the female figure being used to sell the idea of a location’s beauty. This is seen in a more contemporary example (above) and even in a more conservative context (below).
a conservative balance between beauty in women and environment (Indiana)
I really admire Washko’s ability to create such a unique emotional reaction without it feeling implicitly prescribed. Everybody who interacts with the piece will have a different interpretation and connection (or lack thereof) to each postcard based upon their life experiences and travels. However, the curation of the postcards unifies these reactions to encourage viewers to think critically upon the social implications that these small artifacts are manifestations of, and if they reflect the value systems of viewers.
In an overview of her practice as a whole, Washko works to give platform to conversations about gender and feminism in places where it does not readily exist. These environments have included formal settings such as the Museum of the Moving Image and more uncharted territory such as her performance art within World of Warcraft servers.
Angela Washko earned a BFA in Painting/Drawing/Sculpture at Temple University’s Tyler School of Art. She continued her education at UCSD where she went on to earn her MFA. Angela Washko is an assistant professor of art right here at Carnegie Mellon University.
Vareldi’s Minicade was showcased at Eyebeam.Minicade by Chloe Varelidi, 2015
Chloe Varelidi is an artist and designer whose mission statement is to “design and build playful products that empower humans to be creative, kind and curious about the world around them.” She studied design at Parsons School of Design and is now the founder and design director at humans who play. Her main work focuses on designing products that are both irresistable and fun.
Like many of her other projects, Minicade is an interactive and educational tool made by Veralidi that uses fun methods to teach important skills. I look up to this particular project because it is a web app that involves the user (along with others) to create and customize a playlist of games by learning how to code in HTML. It’s an extremely relevant skill to have and it’s projects like these that educate younger generations through a medium that they can enjoy.
Sophia Kahn is an Australian new media artist currently living in Brooklyn, New York. She earned her BA in Fine Arts and History Goldsmith College, University of London; a Graduate Certificate in Spatial Information Architecture from RMIT University, Melbourne; and an MFA in Art and Technology Studies at the School of the Art Institute of Chicago.
Periode de Delire II, Sophie Khan (2016)
She creates illustrations and videos but the main focus of her work is creating sculptures through 3D printing.She uses a precisely engineered 3D last scanner to design the body of her sculpture. When scanning, the human body is constantly moving, so the scanner receives conflicting spatial coordinates, thereby creating a glitch. This glitch is what gives her sculptures the fragmented, deconstructed appearance. She takes this scan of damaged data and re-envisions it onto a different a canvas: prints, video, hand-painted, or 3D printed sculptures.
I admire her work because her 3D printed sculptures reflects ideas of deconstruction as she blurs the lines between old and new media, digital and physical realms, and interior and exterior spaces. Her work seems to dive into the haunting challenges of time, history, and identity. They seem to resonate the idea that death is inevitable as her pieces are fragmented, giving reminders of decay and aging.
limiLAB is run by Filipa Valente, a Portugese architect and interactive artist based in Los Angeles. She did her undergrad and Masters in Architecture at the Bartlett School of Architecture in London, and her Masters in Media Art and Architecture MEDIASCAPES at SciArc. Her work explores space, and leverages light and sound.
Of her works, I found the Hybridscope City to be the most evocative. The project was sited at LAX airport, and passersby getting off the plane could cycle through the different real-time sights and sounds of the city. The form itself is also like an organic web, or specifically filleted voronori meshes. The projection mapping and skeleton tracking were powered by a kinect and a custom max/MSP/Jitter script.
While it is interactive, it doesn’t look intuitive. In the video, people really have to reach out, and it’s said that it needs a person to calibrate first. Plus, it doesn’t look obviously interactive. Since the images are projected downwards, a person’s shadow would only get in the way of the projector, which I think would make people less likely to interact with the piece.
/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_10*/
var trees = [];//make empty trees array
function setup() {
createCanvas(480, 480);
for (var i = 0; i < 6; i++){
var randX = random(-width/5,width + (width / 3));//putting in 6 trees at the start
trees[i] = makeTree(randX);
}
frameRate(10);//setting framerate
}
function draw() {
background('#D8BFD8'); //setting background color
makeBackestMountains();//furthest mountains
makeBackMountains();//next furthest mountains
updateAndDisplayTrees();//moving and displaying trees
removeTreesThatHavePassed();//taking out trees that are safely offscreen
addNewTreesProb();//putting in new trees sometimes
makeFrontMountains();//make foreground
}
//updates and displays trees as they move to the left
function updateAndDisplayTrees(){
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
//takes trees out of array once they are safely off screen
function removeTreesThatHavePassed(){
var treesKept = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x > -width / 3) {
treesKept.push(trees[i]);
}
}
trees = treesKept;
}
//adds new trees with set chance
function addNewTreesProb() {
var newTreeChance = 0.02;
if (random(0,1) < newTreeChance) {
trees.push(makeTree(width + (width / 3)));
}
}
//moves trees at 2 pixels per call
function treeMove() {
this.x += this.speed;
}
//makes trees with specified things
function makeTree(xCoord) {
var tree = {x: xCoord, speed: -2.0, move: treeMove, display: treeDisplay, size: random(0.5,1.3), grad: round(random(0,3))}
return tree;
}
//draws tree recursively with fractals
function drawTree(x, y, angle, depth, size){
if(depth != 0){
var x2 = x + (Math.cos(angle) * 10 * size * depth);
var y2 = y + (Math.sin(angle) * 15 * size * depth);
line(x, y, x2, y2);
drawTree(x2, y2, angle - (PI / 8), depth - 1, size);//left side of tree
drawTree(x2, y2, angle + (PI / 8), depth - 1, size);//right side of tree
}
}
//sets color based on the grad, 4 different colors possible
function treeDisplay(){
var treeColor;
if(this.grad == 0) {
stroke('#FFF8DC');
}
if(this.grad == 1) {
stroke('#FFEBCD');
}
if(this.grad == 2) {
stroke('#FFE4C4');
}
if(this.grad == 3) {
stroke('#FFDEAD');
}
strokeWeight(2);
drawTree(this.x, height-30, -PI / 2, 6, this.size);//draws actual tree with fifth parameter changing the overall scale of it
}
//makes foreground with given detail, moves at same speed as trees
function makeFrontMountains() {
var terrainSpeed1 = 0.00005;
var terrainDetail1 = 0.005;
stroke('#DAA520');
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y1 = map(noise(t), 0,1, 400, height-30);
line(x,y1,x,height);
}
endShape();
}
//makes mountains in background, moves slower than trees and foreground
function makeBackMountains() {
var terrainSpeed2 = 0.000025;
var terrainDetail2 = 0.005;
stroke('#A0522D');
beginShape();
for (var x2 = 0; x2 < width; x2++) {
var u = (x2 * terrainDetail2) + (millis() * terrainSpeed2);
var y2 = map(noise(u), 0,1, 150, height - 30);
line(x2,y2,x2,height);
}
endShape();
}
//makes furthest mountains, moves very slowly
function makeBackestMountains() {
var terrainSpeed3 = 0.0000125;
var terrainDetail3 = 0.01;
stroke('#BC8F8F');
beginShape();
for (var x3 = 0; x3 < width; x3++) {
var v = (x3 * terrainDetail3) + (millis() * terrainSpeed3);
var y3 = map(noise(v), 0,1, 110, height - 150);
line(x3,y3,x3,height);
}
endShape();
}
I found the template for this project very helpful, but the part of this project that took me the most time was figuring out how to make the trees look more realistic. I used recursion and fractals to make the trees look nice, and realizing that I could call the same function inside of itself took a while for me to figure out. I also played around with speeds to make different things move at different speeds. I also found a website that gives color names for different colors, so I like the way my colors fit together for this project. This project made me really comfortable with functions and how they work together. I made the project look pretty close to how I wanted it to look which I am proud of.
// assignment 10 sample code referenced for trees
// source: https://courses.ideate.cmu.edu/15-104/f2018/week-10-due-nov-4/#landscape
// p5.js.org example referenced for snowflakes
// source: https://p5js.org/examples/simulate-snowflakes.html
var trees = [];
var snowflakes = [];
function setup() {
createCanvas(480, 200);
for (var i = 0; i < 10; i++){
var rx = random(width);
trees[i] = makeTree(rx);
}
frameRate(15);
}
function draw() {
background(80, 100, 150);
displayGround();
// trees
updateCanvas();
eraseOld();
addNew();
// snowflakes
let t = frameCount / 60;
for (var i = 0; i < random(5); i++) {
snowflakes.push(new snowflake());
}
for (let flake of snowflakes) {
flake.update(t);
flake.display();
}
}
// tree functions
function updateCanvas(){
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function eraseOld(){
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].width > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}
function addNew() {
var newTreeLikelihood = 0.02;
if (random(0,1) < newTreeLikelihood) {
trees.push(makeTree(width));
}
}
function treeMove() {
this.x += this.speed;
}
function treeDisplay() {
var treeH = this.height;
fill(10, 60, 20);
noStroke();
push();
translate(this.x, height - 40);
triangle(0, treeH - 17, this.width, treeH - 17, this.width / 2, -treeH - 17);
pop();
}
function makeTree(birthLocationX) {
var tr = {x: birthLocationX,
width: random(10, 20),
speed: -1.0,
height: random(10, 20),
move: treeMove,
display: treeDisplay}
return tr;
}
function displayGround(){
fill(255);
noStroke();
rect(0, height - 50, width, 50);
// frame
stroke(200);
noFill();
rect(0, 0, width - 1, height - 1);
}
// snowflakes
function snowflake() {
this.posX = 0;
this.posY = random(-50, 0);
this.initialangle = random(0, 2 * PI);
this.size = random(1, 3);
this.radius = sqrt(random(pow(width / 2, 2)));
this.update = function(time) {
let w = 0.6;
let angle = w * time + this.initialangle;
this.posX = width / 2 + this.radius * sin(angle);
this.posY += pow(this.size, 0.5);
if (this.posY > height) {
let index = snowflakes.indexOf(this);
snowflakes.splice(index, 1);
}
}
this.display = function() {
fill(255);
noStroke();
ellipse(this.posX, this.posY, this.size);
}
}
It snowed in my hometown this past week so I was inspired to do a snowy winter landscape.
Idea sketch.
I started with a blue sky and white ground. Then, I referenced the buildings sample code to generate trees of different height and width triangles. Finally, I looked on the p5.js website to find an example showing how to make falling snowflakes (source: https://p5js.org/examples/simulate-snowflakes.html). I studied the code and adapted it to my landscape which required smaller snowflake particles.
I am really happy with the end result and it reminds me a lot of what Ottawa looks like in the winter. Also, I had some trouble understanding the lectures on particles last week so studying and learning from the snowflake example really helped.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
Among all McCarthy’s projects, I really loved her project “24h HOST,” which was collaborated with Casper Schipper. It was created in November of 2017. I approached this project mainly, because I was intrigued by the use of space and colors in this project. Reading into “24h HOST,” I admired how it used algorithms and emphasized the future role of humans in AI driven world. This project is a small, 24 hour party. Unlike most parties, this 24 hour party is driven by a software that automates the event. Every 5 minutes, one guest departs and a new guest arrives. Throughout the 24 hours, the software system all continue to bring in an endless cycle of guests, which will tire the human host.
