An image of the room in which Social Soul was held.
I chose Lauren Mccarthy who created p5.js. However, the project I want to discuss today is Social Soul, an immersive digital experience that puts users in someone else’s social media stream. It was created in 2014 by Lauren Mccarthy, Kyle McDonald, and MKG for Delta Air Lines TED2014 summit. I admire it because it poses a really valid question that often goes unanswered. It’s something that we really do not think about yet pervades every aspect of our realities. It makes use of a custom algorithm that matches conference goers with other attendees’ social streams. The project uses 7 coding languages and incorporates generative audio/music as well. Following the viewing session, the viewer is sent a tweet that encourages them to connect off-screen to their soul mate.
Cannot post the updated file from the email I sent over. I have instead uploaded the archive for this project. Archive
For this project, I created worms that change color and inch along the landscape with hills in the background. The worms were inspired from nematode references in cartoons.
A nematode from the hit children cartoon, Spongebob!
var terrainSpeed = 0.0005;
var terrainDetail = 0.002;
var terrainDetail1 = 0.00125;
var terrainDetail2 = 0.001;
var terrainDetail3 = 0.0005;
var yaxis = 1;
var c;
var c1;
var c2;
var xStart = 0, pat, patY;
var swimmer = 'https://vignette.wikia.nocookie.net/spongebob-polska/images/d/d5/Patryk.gif/revision/latest?cb=20180830203043&path-prefix=pl';
function preload(){
pat = loadImage(swimmer);
}
function setup() {
createCanvas(480, 480);
frameRate(10);
c2 = color(179, 77, 37);
c1 = color(200, 200, 200);
c = color(247, 222, 85);
patY = height/2;
}
function waveback() {
beginShape();
stroke(250, 250, 255);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 5, 0, height / 4);
line(x, y + (height / 10), x, height);
}
endShape();
}
function wavemidback() {
beginShape();
stroke(224, 224, 224);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 4, 0, height / 2);
line(x, y + 15 + (height / 10), x, height);
}
endShape();
}
function wavemidfront() {
beginShape();
stroke(192, 192, 192);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 3.5, 0, height);
line(x, y + 25 + (height / 10), x, height);
}
endShape();
}
function wavefront() {
beginShape();
stroke(160, 160, 160);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail3) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 3, 0, height);
line(x, y + 50 + (height / 1.9), x, height);
}
endShape();
imageMode(CENTER);
image(pat, width/1.5, (15*noise((width/5+xStart)))+height/2);
xStart+=10;
}
function draw() {
background("white");
setGradient(0, 0, width, height / 3, c1, c2, yaxis);
setGradient(0, height / 3, width, 2 * (height / 3), c2, c, yaxis);
fill(247, 222, 125);
//ellipse(width / 2, 25 + (height / 2), 50, 50);
push();
waveback();
wavemidback();
wavemidfront();
wavefront();
noFill();
rect(0, 0, width, height);
pop();
}
function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
if (axis == yaxis) { // Top to bottom gradient
for (var i = y; i <= y+h; i++) {
var inter = map(i, y, y+h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}
}
I came about this thinking that I wanted to do something just very very weird. I found this gif on giphy, but could not effectively call it in my code, I ended up resolving the issue by just moving the static image
/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 9
*/
var stripes = [];
var offset = 0;
function newStripe(px, py, ph) {
color: setColor();
return {x: px, y: py, h: ph};
}
function setColor(){
return color(random(1, 255), random(1, 255), 70);
}
function setup() {
createCanvas(480, 300);
stripes.push(newStripe(600, 200, 200));
}
function stripeRight(p) {
return p.x + p.h;
}
function stripeLast() {
return stripes[stripes.length - 1];
}
function draw() {
background("lightblue");
stroke(0);
for (var i = 0; i < stripes.length; i++) {
var p = stripes[i];
fill((random(0, 255)),(random(0, 255)), (random(0, 255)));
rect(p.x - offset, 0, 50, p.h + 100);
}
if (stripes.length > 0 & stripeRight(stripes[0]) < offset) {
stripes.shift();
}
if (stripeRight(stripeLast()) - offset < width) {
var p = newStripe(stripeRight(stripeLast()),
random(50, 225),
200);
stripes.push(p);
}
offset += 1;
}
Lol seizure warning honestly.
The idea was to have moving stripes in a pattern, creating a sort of ever-changing wallpaper. I got the moving landscape working alright, but missed how to assign one color to one stipe, so now it’s a psychadellic wallpaper I guess
Kaho Abe (Group project with Ramsey Nasser and Francis Hsueh), Don’t Wake the Bear, 2013
Kaho Abe is an artist based in New York who create games and installation art. She has also been sharing her research findings and knowledge through holding classes and workshops at New York University. Interestingly, she graduated from Parsons New School of Design and was actually a fashion designer before becoming a media artist.
My favorite work of hers is a game that she designed with Ramsey Nasser and Francis Hsueh named “Don’t Wake the Bear.” In this game, players take turn passing around the device to pick items to drop on the bear. The goal is to not wake the bear and get “eaten.” The player who wakes up the bear loses. My favorite part of the game is that the players have to be careful while handling around the device too, as shaking the device also wakes up the bear. I really admire how the game involves both digital and physical interactions. How the game was designed to be for the players to pass around the device involves interaction between the players and could serve as ice breakers at events! The way the game is planned out also encourages strategic thinking and decision making, which levels it up from being just a game.
The project I chose this week is called Kontinumm – an “immersive 3-floor underground interactive multimedia installation” which incorporates lights, projections, and sensors to create a unique experience for the visitor. It was created in 2017 for the 150th anniversary of Canada’s confederation. I am in awe of this project, as it required so much planning, mapping, wiring, and coding that I cannot begin to comprehend how they created such an experience.
Yael Braha was the multimedia director for this project, which meant she directed content, set design, UI and UX, interactivity, lighting, and sounds (so, essentially, she dictated the who experience). Yael studied Graphic Design in the European Institute of Design in Rome and later earned a Master of Fine Arts in Cinema at San Francisco State University. She was a professor at multiple universities before becoming the Multimedia Director of Moment Factory. Her work combines the fields of art, science, technology, and entertainment in order to create immersive experiences. I admire her ability to create complex systems of interactions to create a truly fabricated environment.
/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Assignment-10-a
*/
var sushi = [];
var count = 0;
var riceSize = 70;
function setup() {
createCanvas(480, 180);
//initial collection of sushi
for (var i = 0; i < 5; i += 20){
sushi[i] = makeSushi(width);
}
frameRate(140);
}
function draw() {
count += 1;
background(247, 191, 201); //pink
sushiText();
sushiConveyorBelt();
updateAndDisplaySushi();
removeSushiThatHaveSlippedOutOfView();
addNewSushiConstantly();
}
function sushiText(){
//dark red banner
fill(150, 0, 0);
rect(33, 22, 155, 48)
//bright red banner
fill(239, 33, 33);
rect(41, 28, 140, 35);
//text
fill(255);
textSize(18);
text("おいしい寿司", 57, 52);
}
function updateAndDisplaySushi(){
// Update the sushi's positions, and display them.
for (var i = 0; i < sushi.length; i++){
sushi[i].move();
sushi[i].display();
}
}
function removeSushiThatHaveSlippedOutOfView(){
var sushiToKeep = [];
for (var i = 0; i < sushi.length; i++){
if (sushi[i].x + sushi[i].breadth > -200) {
sushiToKeep.push(sushi[i]);
}
}
sushi = sushiToKeep; //remember surviving sushi
}
//keeps adding sushi to the end
function addNewSushiConstantly() {
if (count > 270) {
sushi.push(makeSushi(width));
count = 0;
}
}
//update sushi position every frame
function sushiMove() {
this.x += this.speed;
}
// draw the sushi
function sushiDisplay() {
var Height = 30;
fill(255);
noStroke();
push();
translate(this.x, height - 40);
//plate for tofu sushi
fill(255, 118, 96);
ellipse(35, -Height/7, 110, 30)
rect(5, 5, 60, 10);
//tofu sushi
fill(255, 118, 96); //plate for tofu sushi
ellipse(35, -Height/7, 110, 30)
rect(5, 5, 60, 10);
fill(255); //white rice
rect(0, -Height, riceSize, 30);
fill(255, 244, 0); //yellow tofu
rect(0, -Height - 20, riceSize, 20);
fill(0); //black seaweed
rect(25, -Height - 20, riceSize/4, 20);
//sashimi sushi
fill(111, 200, 221); //plate for sashimi sushi
ellipse(175, -Height/7, 110, 30);
rect(145, 5, 60, 10);
fill(255); //white rice
rect(140, -Height, riceSize, 30);
fill(255, 91, 0); //red meat
rect(140, -Height - 20, riceSize, 20);
fill(249, 221, 205); //meat texture
var meatLineWidth = riceSize/12;
rect(150, -Height - 20, meatLineWidth, 20);
rect(170, -Height - 20, meatLineWidth, 20);
rect(190, -Height - 20, meatLineWidth, 20);
pop();
}
//sushi info
function makeSushi(birthLocationX) {
var sushi = {x: birthLocationX,
breadth: 60,
speed: -1.0,
move: sushiMove,
display: sushiDisplay}
return sushi;
}
function sushiConveyorBelt(){
stroke(221, 133, 152); //dark pink
strokeWeight(30);
line (0, height - 10, width, height - 10);
}
I was inspired by the conveyor belts in Japanese restaurants that are used to serve sushis. Sushis are one of my favorite food in the world and so I was super excited to create the project. I made two sushis- salmon sashimi sushis and tamale sushis. I also created a sign that says in Japanese “yummy sushi” to give the image more of a Japanese sushi restaurant vibe. Even though I spent a lot of time adjusting the little details, seeing the sushis run on the page in the end makes me very, very, very happy!
var tS1 = 0.0002;
var tD1 = 0.009;
var tS2 = 0.0005;
var tD2 = 0.0008;
var tS3 = 0.0006;
var tD3 = 0.001;
var balloons = [];
var frame = 1;
function setup() {
createCanvas(480, 340);
// draw the balloons
for (var b = 0; b < 20; b++) {
var bx = random(width);
var by = random(0, height / 2 + 30);
balloons[b] = makeBalloons(bx, by);
}
frameRate(10);
}
function draw() {
background(255, 220, 200);
drawSand();
drawWater();
water2();
foam();
updateBalloons();
addNewBalloonsWithSomeRandomProbability();
}
function drawSand() {
beginShape();
stroke(235, 200, 180);
for (var x = 0; x < width; x++) {
var t = (x * tD1) + (millis() * tS1);
var y = map(noise(t), 0, 1, height / 6, height / 3);
line(x, y, x, width);
}
endShape();
}
function drawWater() {
beginShape();
stroke(153, 221, 255, 99);
for(var i = 0; i < width; i++) {
var t = (i * tD2) + (millis() * tS2);
var y = map(noise(t), 0, 1, 20, height);
line(i, y, i, width);
}
endShape();
}
function water2() {
beginShape();
stroke(90, 194, 255, 50);
for(var j = 0; j < width; j++) {
var t = (j * tD3) + (millis() * tS3);
var y = map(noise(t), 0, 1, 40, height);
line(j, y, j, width);
}
endShape();
}
function makeBalloons(originX) {
var balloon = {
xP: originX,
yP: random((height / 2 + 50), height),
speedX: random(-1.5, 0.25),
speedY: random(-0.5, 0.5),
sizes: random(15, 30),
draw: drawballoons,
move: balloonsMove
}
return balloon;
}
function updateBalloons() {
for (var o = 0; o < balloons.length; o++){
balloons[o].draw();
balloons[o].move();
}
}
function drawballoons(x, y){
fill(255, 255, 255, 90);
noStroke();
ellipse(this.xP, this.yP, this.sizes, this.sizes);
}
function balloonsMove() {
this.xP += this.speedX;
this.yP += this.speedY;
if (this.xP < 0 || this.yP > height) {
xPos = width;
this.speedX = random(-2.5, -0.5);
this.speedY = random(-0.25, 1.5);
}
}
function addNewBalloonsWithSomeRandomProbability() {
var newBalloonLikelihood = 0.01;
if (random(0,1) < newBalloonLikelihood) {
balloons.push(makeBalloons(width));
}
}
function foam() {
beginShape();
stroke(255, 255, 255, 90);
for (var f = 0; f < width; f++) {
var t = (f * tD3) + (millis() * tS3);
var Y = map(noise(t), 0, 1, 40, height);
vertex(f, Y - 5);
vertex(f, Y + 5);
}
endShape();
}
This project was fun for me, but also proved to be challenging as I tried to make everything move the way I wanted to (this is primarily because I find it hard to “control” a fairly randomized generative piece).
After making a few quick sketches as to what I wanted the landscape to look like, I ultimately chose this layout. I wanted to make a landscape reminiscent of watching the waves crash on the beach but can be seen in two different ways: if you view it with the blue facing down, it looks like waves with wet sand in the back, but if you view it with the tan facing down, it looks like a mountain range and a sky.
Sketches of possible landscapes
I would like to revisit this idea of a generative landscape, as I didn’t quite get this piece where I wanted it to be and want to explore it more.
“Emerald City”, a project developed by a team of women at Intel, explored the use of embedded technology to benefit women in an urban context.
Adelle Lin is a technological designer with a background in math and architecture. In a collaborative project for Intel with Caroline Foster, Reema Upadhyaya and Natalia Pulido, she served as researcher, UX designer, and Technology Prototyper to create “Emerald City,” an exploration of embedded technology in women’s shoes. While this type of research had previously only been tested on menswear, Lin and her team identified issues that were common for professional women in an urban context.
In addition to helping with tasks like navigation, the technology included features to help women feel safe.
In addition to features that would assist with weather alerts and navigation, these “smart boots” also included technology connected to a crime heat map that could detect unsafe neighborhoods and allow emergency messaging. I believe that considering safety features such as these is essential to why more women are needed in the field of creative technology. Moreover, as a design major myself, research projects such as these allow me to visualize how I might utilize my skills to help other women in a variety of contexts.
Heather Dewey-Hagborg is a self described “transdisciplinary artist and educator”: basically, she’s doing a lot. I was drawn to her because she is interested in using art as research, something I really don’t hear that much about since most of the time people separate these two worlds. She is most well known for “biopolitical art”, where she will use biological research to inform her practice or activist art. Dewey-Haborg is well-known for controversial projects where she uses found human DNA and her own algorithms to create sculptures and figures.
One project of hers that stood out to me is called “DNA Spoofing”. I picked it because I don’t think I’ve seen many people make jokes out of human DNA before, so this was intriguing. She takes a “playful” approach to genetic surveillance by discussing the different ways that humans shed their genetic material in public, and the ways in which is could possibly be harvested and used. She created an entire exhibit (which was shown in a lot of museums across the US and Europe) that includes a video example of how human’s shed DNA, as well as a display of the daily common objects that facilitate this.
I love this work because it sits at the intersection between science and art, particularly biology, which I’ve always been interested in. I also like how she is identifying the ways in which we accidentally volunteer our own genetic information to strangers, something I’ve never really thought about before and makes me a little uncomfortable (I think good art should do that). From a technology standpoint, this project is interesting because it’s talking about something she herself does as an artist/researcher.
The exhibit on display at the Ohio Museum of Contemporary Art, where users can interact with these objects while viewing the video.The actresses in the video, posed in front of the everyday objects they then demonstrate with
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
