Chris Carlson is a sound artist and software developer. He holds a M.A. from Stanford University’s Center for Computer Research in Music and Acoustics and a B.S. in Physics from James Madison University. His award winning application he developed, the Borderlands Granular, is new visually and tacitly interactive for people to develop music using “grains”. The video below is a short demo showing how users can manipulate music and visual icons that is related to the sound that is being emitted. In one of his recent performance, Body Drift , Carlson partners with Jakob Marsico to an immersive audiovisual performance.
// noise() function.
var angleSpeed = 0.0005;
var angle = 0.005;
function setup() {
createCanvas(480, 150);
frameRate(20);
background(0);
}
function draw() {
// light sources shining on the living things
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * angle) + (millis() * angleSpeed);
var y = map(noise(t), 0,1, 0, height);
vertex(x, y);
}
for (var x = 0; x < width; x++) {
fill(255,240,0);
var t = (x * angle) + (millis() * angleSpeed);
var y = map(noise(t), 1,4, 1, height);
vertex(x, y);
}
for (var x = 0; x < width; x++) {
var t = (x * angle) + (millis() * angleSpeed);
var y = map(noise(t), -3,10, -3, height);
vertex(x, y);
}
endShape();
//living things
for (var i = 0; i < 100; i++) {
ellipse(random(width), random(height), 0.5);
}
}
Here, the scenario is to have light sources projected on flock of living creature in a dark night. The light source moves randomly spotting the flock. I was interested in playing with the combination of movements and randomness of small scale objects and pieces of geometric shapes. The final sketch seems fairly success from what I imagined it to be.
Lauren McCarthy is an artist focus on social and techonolgy. Kyle McDonald is an artist focus on code. MKG is a creative agency specialize in branding.
Social Soul was an immersive digital experience created for Delta Airlines at TED 2014 and was inspired by the question “how does it feel to be inside someone else’s social media stream?”. It’s an space and media projection experience of one’s twitter streams in 360 degree surrounding mirror, monitor, and sound space.
I am intrigued by the unexpected approach on presenting social media physically larger than human scale. People use social media so often daily on their phones and computers, which are always on screens that are smaller than human scale. The scale difference makes people feel the autonomy over social media. Standing in the Social Soul space, I imagining myself feeling overwhelmed. It gives people the sense of they have no control of the endlessly replicants of informations and time. The experience is a metaphor of how powerful social media can be. The mirror is the physical metaphor of replicating information infinitely.
I looked at a project by Kimchi and Chips, a Seoul-based art studio founded by Mimi Son and Elliot Woods. Their projects play with material and immaterial modes of existence, and combine the disciplines of code, form, material, concept, and mechanism.
Mimi Son was born in Seoul and currently lives and works there. She has taken on the roles of designer, curator, professor, storyteller, and artistic director in various countries and institutions. She has a master’s degree in Digital Media Art and Design at MiddleSex University and Interaction Design at CIID. She is currently the Adjunct Professor at Ehwa Women’s University in Seoul, and works at Kimchi and Chips at the same time.
I found their project Litescape intriguing because it attempts to make a 3D representation of something we usually cannot experience in visual depth- sounds. By using a 3D projection system based on the original Wiremap project by Albert Hwang, Litescape allows motion graphics and visual information to take physical, visible form, occupying the same real world measurable space as its audience. I think it does a good job of immersing its audience into the unique environment of sounds, light, color, and depth. It’s really interesting to me that they tried to quantify, or rather, give physical attributes to a thing so naturally abstract, such as sound. Sound is something we constantly experience, and I think this installation accentuates just how much vividness and depth sounds are capable of, by illustrating them in a different, colorful, visual way.
//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-10
var gemboy;
var terrainSpeed = 0.0075;
var terrainDetail = 0.06;
var gemY;
//preload image of spaceship
function preload(){
gemboy = loadImage("https://i.imgur.com/OBAJ0Kb.png");
}
function setup() {
createCanvas(480, 400);
frameRate(10);
}
function draw() {
background(0);
//background layer 1 farthest layer back
//uses noise to create randomized terrain
push();
beginShape();
fill(1, 100, 167, 100);
noStroke();
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail/20) + (millis() * terrainSpeed/20);
var y = map(noise(t), 0, 1, height/10, height);
vertex(x, y);
}
vertex(width, height);
endShape();
pop();
//bg layer 2
push();
beginShape();
fill(1, 83, 130);
noStroke();
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail/5) + (millis() * terrainSpeed/2);
var y = map(noise(t), 0, 1, height/5, height);
vertex(x, y);
}
vertex(width, height);
endShape();
pop();
//bg layer 3
push();
beginShape();
fill(250, 230, 162);
noStroke();
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail/50) + (millis() * terrainSpeed/2);
var y = map(noise(t), 0, 1, height/2, height);
vertex(x, y);
}
vertex(width, height);
endShape();
pop();
image(gemboy, 100, 60, 280, 300);
//closest layer
push();
beginShape();
fill(25, 176, 186);
noStroke();
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail*1.5) + (millis() * terrainSpeed*20);
var y = map(noise(t), 0, 1, height-200, height*1.2);
vertex(x, y);
}
vertex(width, height);
endShape();
pop();
//calling stars to be drawn
makeStar();
}
//function to create star object with randomized opacity
//and randomized size
function makeStar() {
var starX = random(5, width);
var starY = random(5, 200);
var starW = random(2, 5);
noStroke();
fill(255, random(10, 255));
ellipse(starX, starY, starW, starW);
}
I wanted to create a cave landscape of a character in a gem spaceship. This was a very frustrating project for me as manipulating the different terrains and their speeds, heights, etc. was confusing. I did, however, have fun creating the drawing of the spaceship and choosing the colors. The object that I chose to include in my landscape was randomized stars. I wish I had more time so I could really create a more complex landscape with more objects, that I was happy with.
When I thought about the term “generative landscape,” I was immediately taken back to a trip I took with my family to Las Vegas, and the vast, beautiful landscapes we’d seen as we drove through the desert. The mountains were large and far away, and the clouds were passing through the mountains. I thought I might do something like that for this project. I also wanted to have trees in the landscape. I also wanted to have sparkling stars, and that transformed into snowflakes. As I played with the trees, I ended up having them “shiver” in the cold, and also jump as if they were dancing. I got very playful as I thought it would be fun to have a more fantasy-like winter landscape. I think it’s funny that I depicted trees, dancing and alive, in a season where they are the least lively- and that dancing makes them seem as if they are enjoying the snow like humans do.
//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project 10
var trees = [];
var Y_AXIS = 1;
var X_AXIS = 2;
var b1, b2, c1, c2;
function setup() {
createCanvas(400, 400);
//create an initial collection of clouds
for (var i = 0; i < 6; i++) {
var randomTreeX = random(width);
trees[i] = makeTree(randomTreeX);
}
frameRate(10);
}
function draw() {
background(52, 71, 106); //220, 160, 150 light peachy pink
noStroke();
mountains();
displayHorizon();
updateAndDisplayTrees();
removeTreesThatHaveSlippedOutOfView();
addNewTreesWithSomeRandomProbability();
//makeSparkles(); //calling sparkle-making function //i called makeSparkles()
//again in displayTrees() because that made more snowflakes appear..
//i'm not sure why they don't appear as frequently when called from setup().
}
function mountains() {
fill(120, 205, 205); //aqua mountain
ellipse(240, 280, 500, 370);
fill(0, 255, 255, 90);//leftmost mountain
ellipse(-50, 380, 500, 500);
fill(150, 180, 230); //lavender blue mountain
ellipse(400, 380, 450, 250);
}
function updateAndDisplayTrees() {
//update the tree's positions and display them
for (var i = 0; i < trees.length; i++) {
trees[i].move();
trees[i].display();
}
}
function removeTreesThatHaveSlippedOutOfView() {
var treesToKeep = []; //copying the clouds i want to keep into a new array
for (var i = 0; i < trees.length; i++) {
if (trees[i].x + trees[i].breadth > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep; //keeping track of remaining clouds
}
function addNewTreesWithSomeRandomProbability() {
var newTreeLikelihood = 0.005;
if (random(0,1) < newTreeLikelihood) {
trees.push(makeTree(width));
}
}
function treeMove() {
this.x += this.speed;
}
function treeDisplay() {
var treeHeight = 30*round(random(2, 8));
var treeTopWidth = random(55, 80);
fill(255, 90);
stroke(0);
push();
translate(this.x, height - 40);
noStroke();
ellipse(20, -treeHeight, treeTopWidth, treeHeight); //treetops
stroke(151, 152, 157);
strokeWeight(7);
line(20, -treeHeight, 20, treeHeight + 20); //tree trunks
pop();
makeSparkles(); //calling it here because it makes snowflakes more frequent, than when setup() calls it
}
function makeSparkles() {
var sparkleX = random(5, width); //sparkles
var sparkleY = random(5, height-40);
var sparkleWidth = random(5, 20);
noStroke();
fill(255, 90); //transparent snowflakes
ellipse(sparkleX, sparkleY, sparkleWidth, sparkleWidth);
fill(255); //opaque snowflakes with different randomness
ellipse(random(5, width), random(5, height-40), sparkleWidth-3, sparkleWidth-3);
}
function makeTree(birthLocationX) {
var shiveringTree = {x: birthLocationX,
breadth: 50,
speed: -1.0,
//nFloors: round(random(2, 8)),
move: treeMove,
display: treeDisplay}
return shiveringTree;
}
function displayHorizon() {
stroke(0);
//line(0, height - 40, width, height - 40);
noStroke();
// fill(255, 90); //100, 160, 160
// rect(0, height-40, 500, height-40); //ground
fill(255); //100, 160, 160
rect(0, height-80, 500, height-40);
}
mountain and clouds sketchAs I was trying to decide if I should change from a pinkish color scheme to a bluish one, I used this image as inspiration.A screenshot of the winter scene.
var angle = 0; //initial angle
var trees = [];
var bwTrees = 0;
var hillSpeed;
function setup() {
createCanvas(480, 320);
frameRate(10);
hillSpeed = random(0.0001, 0.0005);
for (var i = 0; i < 10; i++){ //display 10 trees at the beginning
var rx = random(width);
trees[i] = makeTree(rx);
}
}
function draw() {
background(202, 244, 235);
drawHill();
drawTree();
addTree();
}
function drawHill() {
beginShape();
stroke(252, 242, 40);
for (var x = 0; x < width; x++) {
var y = 90 + sin(angle) * 30; //used sin graph shape
line(width - x, y, width - x, height);
angle = angle + PI/121; //increment of angle
}
endShape();
stroke(255, 210, 200);
beginShape();
for (var x = 0; x < width; x++) {
var t = x * 0.003 + (millis() * hillSpeed);
var y = map(noise(t), 0, 0.8, 0, height);
line(x, y, x, height);
}
endShape();
beginShape();
stroke(24, 44, 160);
for (var x = 0; x < width; x++) {
var y = 240 + sin(angle) * 30; //used sin graph shape
line(width - x, y, width - x, height);
angle = angle + PI/240; //increment of angle
}
endShape();
}
function drawTree() {
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function makeTree(x) {
var tree = {
birth: x,
size: random(20, 60),
speed: -2.0,
move: TreeMove,
display: TreeDisplay,
height: random(30, 60),
color: [255, 62, 54]
}
return tree;
}
function TreeMove() {
this.birth += this.speed;
}
function TreeDisplay() {
var treeHeight = 50;
fill(this.color);
noStroke();
push();
translate(this.birth, height - this.height);
ellipse(0, 0, this.size, this.size);
stroke(255);
strokeWeight(2);
line(0, 0, 0, this.height);
line(0, this.size/5, this.size/6, this.size/20);
if (this.size > 30) {
line(0, this.size/3, -this.size/6, this.size/6);
}
pop();
}
function addTree() {
var newTree = 0.85; //percentage
if (random(0,1) > newTree) {
bwTrees = bwTrees + 1;
if (bwTrees == 4) { // it controls distance between. Two trees are not too close to each other
trees.push(makeTree(width)); //add a tree
bwTrees = 0; //reset
}
}
}
This landscape consists of 3 layers of hills and trees. For 3 layers of hills, Perlin noise and sin graph were utilized as disciplines to depict the shape of hills. Trees are executed with a javascript object and have random sizes and heights. I added more branch based on the size of the tree. It is really fun to keep watching how it continuously changes and create different landscape be each second. Here is one of the nice screenshots below. Also, for color combination, I try not to use typical green colors of hill and tree. I rather explore more experimental colors for this landscape. I think people can clearly see that they are hill/mountain and trees even if it is not with the typical green colors.
/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-10
*/
var buildings = [];
var bgroundpic = ["http://i.imgur.com/CSDbcLh.jpg"];
var peopleLinks = [
"https://i.imgur.com/skan1Dj.png",
"https://i.imgur.com/0U2pZMm.png",
"https://i.imgur.com/ImJcxpz.png",
"https://i.imgur.com/Rn3TxL7.png",
"https://i.imgur.com/Ei7SzTG.png",
"https://i.imgur.com/GTNpulP.png",
"https://i.imgur.com/nn3qkQ7.png",
"https://i.imgur.com/ue5JB8v.png",
"https://i.imgur.com/mCbm0jb.png",
"https://i.imgur.com/ZumluD7.png",
"https://i.imgur.com/LuoUZNc.png",
"https://i.imgur.com/Jv4Nw6g.png"];
var peoplepics = [];
//--------------------------------
function preload() {
bground = loadImage(bgroundpic[0]);
//preload photos from links
for (i=0; i<peopleLinks.length; i++) {
peoplepics.push(loadImage(peopleLinks[i]));
}
}
//--------------------------------
function setup() {
createCanvas(400, 400);
//randomize people order
// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
frameRate(10);
}
//--------------------------------
function draw() {
background(0);
image(bground,0, 0, width,height-height/7);
updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();
addNewBuildingsWithSomeRandomProbability();
//draw escalator platform
fill(color(243,245,241));
noStroke();
rect(50,370,300,10);
//draw railings
strokeWeight(6);
stroke(color(112,168,166));
noFill();
rect(30, 326, 340, 55, 40, 365, 30, 355);
noStroke();
}
//--------------------------------
function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}
//--------------------------------
function removeBuildingsThatHaveSlippedOutOfView(){
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}
//--------------------------------
function addNewBuildingsWithSomeRandomProbability() {
// With a very tiny probability, add a new building to the end.
var newBuildingLikelihood = 0.007;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}
//--------------------------------
// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}
//--------------------------------
// draw the building and some windows
function buildingDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(255);
stroke(0);
push();
translate(this.x, height - 40);
image(peoplepics[this.type],0, -bHeight+24, this.breadth,bHeight);
pop();
}
//--------------------------------
//define type as random to randomize people in flow
function makeBuilding(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 90,
speed: -3.0,
nFloors: 8,
type: floor(random(12)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}
For this project, I wanted to recreate the scene of a moving sidewalk and passengers at an airport — through the use of a simple background, a silhouette of the sidewalk and found images of people. This was one of the first inspirations I had from seeing the reference material of the slow-paced horizontal movement. I went with a simple color palette with cooler hues to create consistency between the black, shades of blue in contrast with the color variety of people. I thought the most difficult part of implementation was shuffling the images randomly and getting them to display correctly in sync with motion.
This week, I’ve looked at the work of Claudia Hart. Hart is an artist who creates computational art through a feminist standpoint. She looks at digital technology and media, and shows that new media technology is not a “rupture, but a reflection of very conventional ways of thinking”.
Tech culture is still a space dominated by men, and interestingly cites David Noble, who says that “high tech ethos is actually emerging from medieval Christian monasteries and describes it still being driven by an unconscious millennial desire to recreate the world afresh, without women and outside of nature.”
The Doll’s House Process work
These images are from Hart’s project called The Dolls House. It uses the philosophical concept of rebirth and renewal, and used math to create hyptonic images. You can see more here.
For this looking outwards, I am looking at the work of Mimi Son who is the creator of interactive artworks with novel displays. Mimi Son was born in Seoul where currently she lives and works. She completed her master degree on Digital Media Art and Design at Middlesex University and Interaction Design at CIID. She is currently the Adjunct Professor at Ewha Womans University in Seoul
Being a student of architecture I am really interested in a lot of her work because she uses a lot of programs that we are taught in class to create something so beautiful and sculptural. She uses her blog Kimchi and Chips to present her work and to show the viewer a constant updates of her different experiments int he virtual world.
In this project, a small potted tree is augmented with video projection, creating volumetric light patterns using itʼs own leaves as voxels. This technique allows a tree to have a visceral conversation with human visitors, and to become a new type of aesthetic object. The tree that can display digital media’ is a provocation against a current asymptote of outdoor digital media that champions media facades, we instead suggest interventions in reaction to existing unscripted entities within the environment such as trees.
The projection triggers photosynthesis effects which affect tree growth, suggesting the possibility of 3D printing a tree, and of visitors feeding the tree through interaction with it.
What is made even more interesting is the fact that Son has made the structured light projection coding and technique available online for free.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
