This is an installation done by Mimi Son from KIMCHI and CHIPS, which is an art studio Seoul. The installation is called Light Barrier Third Edition, and it is presented in Asian Cultural Centre at Gwangju Korea in 2016.
In this edition of installation, 8 architectural video projectors are split into 630 sub -projectors using the structure on concave mirrors, and each mirror’s backing structure is computationally generated so that they collaborate as a single image in the air. A total of about 16,000,000 pixels are calibrated and so that the light beams can be merge in the haze to create an image in the air. In addition to the visual elements, 42 audios are added to create a sound field.
The installation attempts to exploit the ambiguity and non-conformities between materials and non-materials, reality and illusion, existence and absence. It focused on the theme of birth, death, and rebirth. The entire installation is inspired by impressionism paintings that the images arise from the canvas and became a drawing in the air.
I found this project to be interesting because it combined the idea of traditional impressionism art with computational technology to create a cohesive project. The project is not only visually pleasing but also takes visitor’s experiences into account.
This week, I’m focusing on Tina Frank, an Austrian designer, artist, and professor at the University of Art and Design Linz, where she heads the department of Visual Communication at the Institute for Media. Frank collaborates with musicians to create installations and audio visual performances, though more recently, her design work has shifted more towards data visualization for scientific projects. In addition, Frank is interested in teaching digital publications, and experiments in synesthesia.
” What If,” an immersive image sound installation by Tina Frank & Alexandra Murray-Leslie at the Klanglichtfestival in 2019
The project that I chose to look at is called “What if,” created by Tina Frank and Alexandra Murray-Leslie as a part of the Klanglichtfestival in 2019. “What if” is an immersive image sound installation meant to challenge how we think about and approach society and the world, through the use of color, forms, sounds, and images. This work is made up of three scenes, “Growing,” “Fantasy,” and “Future Dreams,” which, as stated on Frank’s website, address questions such as “What does our environment look like if it were only inhabited by mosses and ferns? How would our everyday life be if detached from patriarchal structures? What if feminists ruled the world?”
“What if” within the venue, Künstlerhaus – Halle für Kunst und Medien, Graz
I found this project particularly interesting because it uses critical design in order to question our current ideologies, values, and assumptions, and to provide glimpses into different possible futures or scenarios. Although the installation and the visuals appear very abstract at first, the different layers of overlapping audio, voice, music, images, and flashes of light immerse and draw you into these different worlds, creating a deeper meaning within the work and serving as a critique on society and how we approach topics like the environment, women, and feminism.
Filtered Transparencies is an interactive installation created for the Paseo Arts Festival by architect and media artist Filipa Valente. I decided to write about Valente’s work because she runs a platform called limiLAB for experimentation in the fields of architecture, user experience design, and animation, which is interesting to me because of my interest in UI/UX. With this piece in particular, Valente really focused on making her audience ponder about their relationship to the space around them by immersing them into a light-generated hologram-like environment. I thought it was really interesting that she used a mix of art and technology to create a commentary on how people perceive reality, how they fit into their own generated world, and how that perception is so easily manipulated.
Filtered Transparencies, Filipa Valente, 2014.
The installation is created in a 3-dimensional space, with multiple payers of projections adding to the complexity of the piece. Each element (different shapes or lines formed by the projections) also seems to receive influence from the viewer’s movements, so that no two viewers ever have the same experience. I think the algorithm behind this work probably involves something similar in concept to our text rain assignment, where objects created by code are interacting with input from a camera.
/*
Emma Nicklas-Morris
Section B
enicklas
Project-11
Generative Landscape
*/
var waterSpeed = 0.0002;
var waterDetail = 0.002;
var c2, c5; // gradient colors
var yPos = []; // water y position
var tubers = [];
var r1 = 50;
function setup() {
createCanvas(450, 300);
frameRate(10);
// colors for water gradient
c2 = color("#8cbaba");
c5 = color("#005364");
}
function draw() {
setGradient(c2, c5);
// draw water
water();
// the sun
noStroke();
fill("#FFE484");
ellipse(width - r1, r1, r1+10, r1+10);
fill("#FFCC33");
ellipse(width - r1, r1, r1, r1);
updateAndDisplayTuber();
removeTubers();
addTuber();
}
function water() {
noFill();
beginShape();
stroke("skyblue");
// draw the water that varies in height
for (var x = 0; x < width; x++) {
var t = (x * waterDetail) + (millis() * waterSpeed);
var y = map(noise(t), 0,1, height/2, 3/4*height);
line(x, y, x, -300); // illusion that the bottom water is changing height
// only keep y positions that are on the screen
if (yPos.length > width) {
yPos.shift();
}
yPos.push(y);
}
endShape();
}
function addTuber() {
var probability = 0.08;
// randomly make a new tuber as long as there are no more than
// 5 tubers on screen at once
if ((random(0,1) < probability) & (tubers.length < 5)){
var yT = yPos[width];
var t = makeTuber(width, yT - 15);
// set the color of the tube
var r = random(255);
var g = random(255);
var b = random(255);
var c = color(r, g, b);
t.setColor(c);
tubers.push(t); // add tuber into list
}
}
function removeTubers() {
for (var j = 0; j < tubers.length; j++) {
// if the tuber goes off the screen, remove from list
if (tubers[j].x + 50 < 0) {
tubers.splice(j, 1);
}
}
}
function makeTuber(x1, y1) {
var tuber = {x: x1, y: y1, hSize: 17, bWidth: 10, bH: 25,
color: color(128), move: moveTuber,
drawT: drawTuber, setColor: setTubeColor
}
return tuber;
}
// draw and update position of tuber
function updateAndDisplayTuber() {
for (var i = 0; i < tubers.length; i++) {
tubers[i].drawT();
tubers[i].move();
}
}
function moveTuber() {
this.x -= 12.0;
}
function drawTuber() {
noStroke();
fill(0);
// head
ellipse(this.x, this.y, this.hSize, this.hSize);
// torso
push();
translate(this.x + this.bWidth, this.y + this.bWidth);
rotate(radians(30));
ellipse(0, 1, this.bH + 5, this.bWidth);
pop();
// thighs (legs)
push();
translate(this.x + 3 * this.bWidth, this.y + this.bWidth);
rotate(radians(-20));
ellipse(0, 5, this.bH, this.bWidth);
pop();
// calves (legs)
push();
translate(this.x + 2 * this.bH, this.y + 2 * this.bWidth);
rotate(radians(40));
ellipse(0, 0, this.bH, this.bWidth);
pop();
// tube
fill(this.color);
ellipse(this.x + 20, this.y + 20, this.bH * 2, 1.5 * this.bWidth);
}
function setTubeColor(c) {
this.color = c;
}
// color gradient for the water
function setGradient(c1, c2) {
noFill();
for (var z = height/2; z < height; z++) {
var inter = map(z, height/2, height, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, z, width, z);
}
}
I struggled a lot to get my object of Tubers to work and move with my water. There were a lot of “moving” parts to figure out and I had trouble when I tried to add lots of different elements at once. So once I slowed down and tried to get small parts, one at a time, I began to make more progress. I really like how my water looks. It was fun to experiment with gradients this project. Enjoy tubing 🙂
// Nadia Susanto
// nsusanto@andrew.cmu.edu
// Section B
// Project-11-Generative Landscape
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var boats = [];
var clouds = [];
function setup() {
createCanvas(480, 480);
//initalizing boats
for (var i = 0; i < 3; i++){
var bx = random(width);
boats[i] = makeBoats(bx);
}
//initalizing clouds
for (var x = 0; x < 5; x++) {
var cx = random(width);
clouds[x] = makeClouds(cx);
}
frameRate(20);
}
function draw() {
//pinkish sky
background(254, 165, 159);
//show mountains and waves
makeMountains();
makeWaves();
//show boats
addNewBoats();
updateAndDisplayBoats();
removeBoatsOutofView();
//show clouds
addNewClouds();
updateAndDisplayClouds();
removeCloudsOutofView();
}
function updateAndDisplayClouds() {
//constantly calling the clouds
for (var x = 0; x < clouds.length; x++){
clouds[x].move();
clouds[x].draw();
}
}
function removeCloudsOutofView() {
var cloudsKeep = [];
for (var x = 0; x < clouds.length; x++) {
if (clouds[x].x > 0) {
cloudsKeep.push(clouds[x]);
}
}
clouds = cloudsKeep; //remember the clouds
}
function addNewClouds() {
var cloudProb = 0.01;
//if random number less than probability then a new cloud is shown
if (random(0, 1) < cloudProb) {
clouds.push(makeClouds(width));
}
}
function cloudsMove() {
//move the clouds from right to left
this.x -= this.speed;
}
function drawClouds() {
//draw the white clouds
fill("white");
ellipse(this.x, this.y, this.width, 10);
}
function makeClouds(cloudX) {
//creating object for cloud
var cloud = {x: cloudX,
y: random(10, 100),
width: random(50, 100),
speed: 0.50,
move: cloudsMove,
draw: drawClouds}
return cloud;
}
function updateAndDisplayBoats() {
//constantly calling the boats
for (var i = 0; i < boats.length; i++){
boats[i].move();
boats[i].draw();
}
}
function removeBoatsOutofView() {
var boatsKeep = [];
for (var i = 0; i < boats.length; i++) {
if (boats[i].x > 0) {
boatsKeep.push(boats[i]);
}
}
boats = boatsKeep; //remember the boats
}
function addNewBoats() {
//if random number less than probability then a new boat is shown
var boatProb = 0.005;
if (random(0, 1) < boatProb) {
boats.push(makeBoats(width));
}
}
function boatsMove() {
//move the boats from right to left
this.x -= this.speed;
}
function drawBoats() {
//random color for boats
fill(this.colorR, this.colorG, this.colorB);
//base of boat
arc(this.x, 350, 75, 50, 0, PI, CHORD);
//pole holding the sail
ellipse(this.x, 330, 10, 80);
//sail of boat
triangle(this.x, 290, this.x, 330, this.x + 15, 310);
}
function makeBoats(boatX) {
//creating object for boat
var boat = {x: boatX,
colorR: random(0, 255),
colorG: random(0, 100),
colorB: random(0, 200),
speed: 1,
move: boatsMove,
draw: drawBoats}
return boat;
}
//adopted the terrain starter code to make mountains in background
function makeMountains() {
noStroke();
fill(35, 144, 79);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail*3) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, height/4, height/2);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}
//adopted the terrain starter code to make ocean waves
function makeWaves() {
noStroke();
fill(1, 108, 194);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail/3) + (millis() * terrainSpeed/2);
var y = map(noise(t), 0, 1, height/2, height);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}
For this project I went back to a time when I was in Banff, Canada. I would canoe or ride in a boat on the lake with the mountains behind me. I created moving mountains and moving ocean waves with boats of random colors popping in and out. It was tough at first to figure out how to code the objects, but it was a fun project and I am happy with the final product.
For this week’s looking outwards, I decided to focus on LIA, an Austrian software and net artist. Her primary working medium is code, which consists of translating a concept into a formal written structure that then can be used to create a “machine” that generates real-time multimedia outputs. Her works can be regarded as a conversation between the human and the machine.
I chose to focus on one of her projects called Fluctus, which is a generative application that was displayed by Dong Gallery Taipei. Most of LIA’s works is not about creating an object, and her computational art exists beyond the material flow of things. Her works are enacted to give rise to objects: the art are temporarily and fleetingly created, they are brought to the canvas just to quickly disappear, leaving nothing but impressions in the memory of the viewer. Art is flow, process, concept, but more so an event. Art is brought alive through computation.
What I admire about LIA’s Fluctus is that the work often seem to display organic traits, and the unfolding of forms leaves behind traces that builds up morphological processes of its computational core, while expressing its wholeness. The abstract and alien forms created are mesmerizing, the patterns almost seem ornamental. One would be intrigued by this artwork while passing by it on the streets, and stand for a while beside it to study its movements and developments throughout time.
// Ankitha Vasudev
// Section B
// ankithav@andrew.cmu.edu
// Project-11
// global variables
var birds = []; // bird objects
var terrainSpeed1 = 0.0005; // back mountains speed
var terrainDetail1 = 0.015; // back mountains detail
var terrainSpeed2 = 0.001; // front mountains speed
var terrainDetail2 = 0.008; // front mountains detail
function setup() {
createCanvas(450, 400);
// create an initial collection of birds
for (var i = 0; i<10; i++) {
var rx = random(width);
birds[i] = makeBirds(rx);
}
frameRate(10);
}
function draw() {
background(80);
// window arc frame
fill(230);
arc(width/2, 400, width*2, 750, PI, 0);
// landscape elements
sun();
backMountains();
carWindowandRoad();
frontMountains();
mountainreflection();
// displaying birds
updateAndDisplayBirds();
removeOldBirds();
addNewBirds();
// vertical window frame line
stroke(0);
strokeWeight(7);
line(75, 50, 75, height);
}
function carWindowandRoad() {
// window frame
stroke(0);
strokeWeight(7);
noFill();
arc(width/2, 400, width*2, 750, PI, 0);
// water
noStroke();
fill(230);
rect(0, 340, width, 100);
// road
stroke(255);
strokeWeight(2);
fill(100);
rect(-10, 380, width+20, 70);
// bottom window frame
noStroke();
fill(0);
rect(0, 393, width, height);
}
function backMountains() {
// large mountains in the back
stroke(215);
beginShape();
for(var x=0; x<=width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0, 1, 100, 350);
line(x, y, x, 380);
}
endShape();
}
function frontMountains() {
// smaller mountains in the front
stroke(150);
beginShape();
for(var x=0; x<=width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
var y = map(noise(t), 0, 2, 300, 200);
line(x, y, x, 340);
}
endShape();
}
function mountainreflection() {
// reflection of small mountains in the water
stroke(200);
beginShape();
for(var x=0; x<=width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
var y = map(noise(t), 0, 5, 120, 250);
line(x, y+220, x, 340);
}
endShape();
}
function sun() {
//sun
noStroke();
fill(238);
ellipse(370,100, 60);
fill(247);
ellipse(370, 100, 55);
fill(255);
ellipse(370, 100, 50);
}
function updateAndDisplayBirds() {
// display and move birds
for (var i=0; i<birds.length; i++) {
birds[i].move();
birds[i].display();
}
}
function removeOldBirds() {
// remove old birds off canvas
var birdsToKeep = [];
for (var i=0; i<birds.length; i++) {
if (birds[i].x + birds[i].breadth > 0) {
birdsToKeep.push(birds[i]);
}
}
birds = birdsToKeep;
}
function addNewBirds() {
// add new birds with a probability of 0.05
var newBirds = 0.05;
if (random(0,1) < newBirds) {
birds.push(makeBirds(width));
}
}
function moveBirds() {
this.x += this.speed;
}
function displayBirds() {
// code to draw each bird
noFill();
stroke(this.col);
strokeWeight(0.8);
arc(this.x, this.y, this.width, this.height, PI, TWO_PI);
arc(this.x+this.width, this.y, this.width, this.height, PI, TWO_PI);
}
function makeBirds(birthLocationX) {
// randomization of birds
var birdy = {x: birthLocationX,
y: random(140, 230),
col: random(30,100),
breadth: 50,
speed: random(-3,-6),
width: random(3,8),
height: random(2,4),
move: moveBirds,
display: displayBirds
}
return birdy;
}
For this project I created a generative landscape of a view out a car window. I wanted to create a strong sense of foreground vs background and did this by including many elements: mountains in the back and front, water with the mountain reflections and a thin strip of the road. I used birds as my objects and randomized the width, height and color. I also used this project as an opportunity to play with a monotone color scheme (since all my previous project use a lot of color). Overall, it was fun and I’m much more confident about using objects.
Project 1: The Map is divided into rectangular tiles that represent publicly traded companies. The area of a rectangle corresponds to the market capitalization of the company, and the color tells you how the stock price has changed since the previous market close. Unlike a traditional treemap, the Map of the Market introduced a new algorithm designed to create tiles that were close to square.
Project 2: Based on Google News data and state-of-the-art translation technology, the site identifies and displays which subjects are disproportionately covered in the news in each country. Users can explore the relative coverage of any particular subject across the globe. They also can see a view that emphasizes exactly the news that is not being published widely in their own country.
Comparisons: I admire the projects because both of them represent data in a visual and artistic form. However, the data they took is different, which results in different analysis and forms of expressions. They might overlook the progression of data over time and reasons behind layouts of the data.
//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-10-sonic sketch
var img;
var dog;
function preload() {
//load "pets" image from imgur
img = loadImage("https://i.imgur.com/iqyeVWW.png");
//load sound tracks
// dog = loadSound("dog.wav");
// cat = loadSound("cat.wav");
// bird = loadSound("bird.wav");
// fish = loadSound("fish.wav");
dog = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dog.wav");
cat = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cat.wav");
bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bird-1.wav");
fish = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fish.wav");
}
function setup() {
createCanvas(466, 350);
}
function draw(){
background(100);
//scale the image according to canvas size
image(img, 1, 1,
img.width * 0.4, img.height * 0.4);
}
function mousePressed(){
//play "dog" track when clicking on upper left area
if(mouseX < 233 & mouseY < 175){
dog.play();
}
//play "cat" track when clicking on upper right area
if(mouseX > 233 & mouseY < 175){
cat.play();
}
//play "bird" track when clicking on lower left area
if(mouseX < 233 & mouseY > 175){
bird.play();
}
//play "fish" track when clicking on lower right area
if(mouseX > 233 & mouseY > 175){
fish.play();
}
}
I used 4 sound tracks for this project and created a “pet zoo.” The tracks contain dog barks, cat meows, fish bubbling and bird singing. You can play different sound tracks by clicking on different section of the image. I had fun creating this project because it enables me to insert sounds into post and make it interesting.
Molmol documents stories through media, moving images, robotics, kinetics and interactive sculptures. Molmol received an M.P.S at the Interactive Telecommunications Program, NYU and a B.A. at Communication Arts in Taiwan. She also spent a year interviewing an isolated leprosy community in Taiwan. She recently has been focusing on producing media work to create social impacts. For example, she create a film on homelessness, youth, and social justice called Treasure Hill.
Looking at her Treasure Hill film, I really admire that she is creating interesting films not just for art, but for a cause. I really admire this because her films touch important topics that are difficult for people to talk about. Because of this, it can bring more awareness to these issues.
Molmol’s projects do not involve the creation of a custom software.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
