Kazuyo Sejima is a Japanese architect who founded SANAA. She is a leading exponent of contemporary architecture. She earned a degree from the Japan Women’s University and worked in the studio of Toyo It0. She is known for a clean modernist design by using clean and shiny surfaces and use of squares and cubes. She uses natural light to create a fluid transition between interior and exterior. I admire how she uses traditional elements such as square boxes and how she combine traditional elements and modernistic elements. Her idea is not to initiate a complete rejection to tradition, but rather to challenge the conventional process of design.
One of her famous building, New Art Museum by SANAA is located in Lower Manhattan, NYC. The museum shows how she appreciates simple but strong concept by using traditional shape. Her work shows how contemporary architects do not have to use crazy shapes to make good space. The building shape reflects the surrounding urban box shaped buildings. She stacks the boxes on top of the other but makes variation of them through varying sixe and shifting them, which makes dynamicity and an attracting shape. Different from contemporary artists who uses fancy materials, she uses materials that may look moderate externally. However, her buildings encompasses her unique charisma that attracts people’s attention for buildings sharpness and use of essential elements for construction.
This week, I’ll be looking outward to Puppet Parade, an interactive exhibit produced in part by Emily Gobeille in 2011. Emily is an artist and designer who focuses on building interactive exhibits that encourage play and she’s a co-founder of Design I/O, a creative studio specializing in the creation of interactive installations.
In Puppet Parade, visitors control one of two giant projected puppets by moving their arm as if it were the puppet. By moving the puppet, the puppeteer can eat different colored blocks to change the colors of their puppet or make funny poses. The puppeteer’s arm is tracked using an XBox Kinect, but custom software was developed to distinguish the different parts of the arm.
Custom software tracks different parts of the arm and correlates it to the puppet
What I find inspiring about this project is how the actions of one or two “players” are able to create an entire area of interactivity, expanding the space and amount of people that can partake in an experience.
//Scqrlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 10: Generative Landscape
var sheeps = [];
var sSheeps = [];
function setup() {
createCanvas(480, 480);
// create an initial collection of objects
for (var i = 0; i < 10; i++){
var rx = random(width);
sheeps[i] = makeSheep(rx);
sSheeps[i] = makeSmallSheep(rx);
}
frameRate(10);
}
function draw() {
background(170,215,230);
// changing hillscape
Hill();
// moving sun position
Sun();
// draw existing to new locationlarge sheeps
updateSheeps();
// draw new large sheeps
addNewSheeps();
updateSmallSheeps();
addNewSmallSheeps();
}
function updateSheeps(){
// Update and draw the large sheep positions
for (var i = 0; i < sheeps.length; i++){
sheeps[i].move();
sheeps[i].display();
}
}
function addNewSheeps() {
// With a very tiny probability, add a new building to the end.
var newSheepLikelihood = 0.05;
if (random(0,1) < newSheepLikelihood) {
sheeps.push(makeSheep(width));
}
}
// shift sheeps
function oMove() {
this.x += this.speed;
}
// draw large sheeps
function sheepDisplay() {
push();
translate(this.x+50,height-80+this.scatter);
// legs
stroke(60);
strokeWeight(2);
var loc1 = random (5,7);
line(this.x-10,loc1-10,this.x-10,loc1+12);
line(this.x+10,loc1-10,this.x+10,loc1+12);
//body
strokeWeight(0.5);
fill(255);
stroke(200);
ellipse(this.x, loc1-3, this.fat+20, 20);
fill(150);
//head
ellipse(this.x-18, loc1-6, this.fat-8, 12);
stroke(120);
pop();
}
// object large sheep
function makeSheep(make) {
var sheep = {x: make,
fat: 20,
speed: -1.0,
move: oMove,
scatter: random(5),
display: sheepDisplay}
return sheep;
}
// update location of existing small sheeps
function updateSmallSheeps(){
// Update the small sheep's positions, and draw them.
for (var i = 0; i < sSheeps.length; i++){
sSheeps[i].move();
sSheeps[i].display();
}
}
// generate new small sheeps
function addNewSmallSheeps() {
// add a new small sheep to the end.
var newSheepLikelihood = 0.05;
if (random(0,1) < newSheepLikelihood) {
sSheeps.push(makeSmallSheep(width));
}
}
// draw farer (smaller) sheeps in the field
function smallSheepDisplay() {
push();
translate(this.x+20,height-150+this.scatter);
// legs
stroke(60);
strokeWeight(1);
var loc1 = random (5,6);
line(this.x-5,loc1-5,this.x-5,loc1+6);
line(this.x+5,loc1-5,this.x+5,loc1+6);
//body
strokeWeight(0.5);
fill(255);
stroke(200);
ellipse(this.x, loc1-1.5, this.fat+10, 10);
fill(150);
//head
ellipse(this.x-9, loc1-3, this.fat-4, 6);
stroke(120);
pop();
}
// smalls sheep object
function makeSmallSheep(pop) {
var sSheep = {x: pop,
fat: 10,
speed: -0.5,
move: oMove,
scatter: random(20),
display: smallSheepDisplay}
return sSheep;
}
// function for drawing moving sun
function Sun (){
for (var i = 0; i < width; i++) {
var t = (i * 0.003) + (millis() * 0.0002);
fill(250,200,100);
ellipse(width-t-25,100,50,50);
} noFill();
}
// to creste Landscape
function Hill(){
fill(70,175,100);
noStroke();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * 0.003) + (millis() * 0.00002);
var y = map(noise(t), 0,1, 100, height-100);
vertex(x, y);
vertex(0,height);
vertex(width,height);
}
endShape();
}
I was imagining the view one could get while seating on a train and looking out to the fields in Australia. The larger and smaller sheep suggests their distance to the person. As time passes the sun also moves with the viewer. As I am not familiar with objects, this project is much harder for me as it is working with objects.
A quick sketch I made to visualize how things would look
Demonstration of the application, using the track ‘Singing under the Rainbow’ by World’s End Girlfriend.
Hollow sound sculptures made from ABS.
This project by Eva Schindling is called Liquid Sound Collision, created in 2009. It uses two opposite words as vibration source that feeds into a fluid simulation. The waves created by the sound files run towards each other, collide and interfere with each others patterns. A frozen moment of this event is then translated into a 3D sculpture. The quantifying of seemingly unquantifiable concepts and objects is interesting in this project. It also produces aesthetically pleasing forms that have a whole lot of data involved. Schindling received a MSc. in Art and Technology from Chalmers University in Sweden and a degree in Interaction and Media Design from FH Joanneum in Austria. Currently she works as a creative technologist at Daily tous les jours in Montreal. Her work ranges from embodied evolutionary robotics, algorithmic pattern formation to the visualization of otherwise invisible sound waves.
Photo of Höweler + Yoon office with J. Meejin Yoon standing on the right
As the founder of Höweler + Yoonarge, an internationally recognized architecture firm,Meejin Yoon‘s practice works with a wide range of scales to furniture scale installations to buildings to landscaping projects. With her partner, the two leads their practice to constantly challenge the relationship between architecture, art and landscape. Media is often used to enrich the architectural experience she designs. A lot of experiential installations are made so she can observe and propose new ways for the public to interact with. One example of this is the UNI project that was installed in New York, with aims to create a mobile, and reconfigurable public “reading” space. A series of yellow caps, or “quills” as they are referred to by the architects, doubles as a bench and also protects the books on the wood shelves. Yoon’s personal accomplishments are also notable with as she is a Professor and Head of the Department of Architecture at the Massachusetts Institute of Technology, where she received the Irwin Sizer Award for the Most Significant Improvement to MIT Education. She was also awarded Architectural Review’s New Generation Design Leadership Award.
This wind map is generated based on a nearly real-time data from National Digital Forecast Database. It is revised by one hour. Two creators, Fernanda Viegas and Martin Wattenberg implement entire map only with using HTML and Javascript. With this map, people can immediately read the continuously changing flow, density, and direction of winds over all areas of the United States. Also, it highlights a region with the high-speed wind. They depicted the movement of air simply with the visual motion. I admire their work because it is able to communicate the specific types of information to audiences. People might understand what it tells about without many explanations. Also, the quality of quite simple but elegant visualization with motion and black and white color scheme looks really nice and makes me very intriguing to this work.
I looked at my friend Tiffany’s post about Marpi’s meditative installation art named “The Wave.” The display uses open source shaders by Jaume Sanchez powered by Three.js. It’s a serene, sizeable touchscreen display of waves, made up of soft, curved shapes and strokes. People can interact with the display and guide the movement of the water particles. I wasn’t sure if they really behaved like water particles, but it’s interesting that Marpi calls the shapes water particles; though the shape and behavior doesn’t necessarily follow the behavior of real water, I can bring myself to believe that if we had magical powers to control water with gestures, that it would move in this manner. I agree with Tiffany that it’s a very pleasant and soothing visual to look at. The slow movement and soft curves are comforting and satisfying to watch as they change direction and shape. The video below showing people interacting with “The Wave” was posted a year ago.
var frames = []; // An array to store the images
var characterX; // The X location of the character
var characterY; // The Y location of the character
var targetX; // The X goal, from the user's click
var targetY; // The Y goal, from the user's click
var exampleImgOnly;
//---------------------------------------
function preload(){
// These URLs are for the individual walk cycle images,
// stored in the imgur album http://imgur.com/a/85DTu
var filenames = [];
filenames[0] = "http://i.imgur.com/svA3cqA.png";
filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
filenames[2] = "http://i.imgur.com/IgQDmRK.png";
filenames[3] = "http://i.imgur.com/kmVGuo9.png";
filenames[4] = "http://i.imgur.com/jcMNeGq.png";
filenames[5] = "http://i.imgur.com/ttJGwkt.png";
filenames[6] = "http://i.imgur.com/9tL5TRr.png";
filenames[7] = "http://i.imgur.com/IYn7mIB.png";
// LOAD THE IMAGES INTO THE frames ARRAY,
// USING THE FILENAMES STORED IN THE filenames ARRAY.
for (var i = 0; i < filenames.length; i++){
frames.push(loadImage(filenames[i]));
}
}
//---------------------------------------
function draw() {
background(222);
// MOVE THE CHARACTER TOWARDS THE TARGET.
var dx = targetX - characterX;
var dy = targetY - characterY;
var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
// DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES.
image(frames[frameCount%8], characterX, characterY);
// FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT.
/*if(mouseX < targetX){
image= scale(filesnames, -1,1);
}
image*/
// Don't touch this:
// Draw a spot at the target, colored based on the character's proximity.
drawTargetEllipse (distanceFromCharacterToTarget);
characterX = lerp(characterX,targetX,0.1);
characterY = lerp(characterY,targetY,0.1);
}
//=======================================================
// PROBABLY NO REASON TO CHANGE ANYTHING BELOW THIS LINE.
function setup() {
createCanvas(800, 480);
imageMode(CENTER);
frameRate(12);
// Initialize the character and target positions.
characterX = width / 2;
characterY = height / 2;
targetX = characterX;
targetY = characterY;
}
//---------------------------------------
function drawTargetEllipse(distanceFromCharacterToTarget){
if (distanceFromCharacterToTarget < 80){
fill(0,200,0, 40); // Green if we're nearby
} else {
fill(255,0,0, 40); // Red if we're far away
}
noStroke();
ellipse(targetX, targetY, 160,160);
}
//---------------------------------------
function mousePressed() {
targetX = mouseX;
targetY = mouseY;
}
This is a portrait of my grand-grand-father. The effect of slowly revealing pixels of the portrait brings in the sense of history and senses. I almost want the picture to become three dimensional and see my grand-grand-father in reality.
//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-09
var img;
var small, big;
function preload() {
var myImageURL = "https://i.imgur.com/7sW6Was.jpg";
img = loadImage(myImageURL);
}
function setup() {
createCanvas(500, 400);
small = 4;
big = 30;
imageMode(CENTER);
noStroke();
background(0);
img.loadPixels();
}
function draw() {
var pointCircle = map(mouseX, 0, 250, small, big);
var pointSquare = map(mouseX, 250, width, small, big);
var x = floor(random(img.width));
var y = floor(random(img.height));
var pix = img.get(x, y);
fill(pix, 100);
if(mouseX<240){
ellipse(x, y, pointCircle, pointCircle);
fill(0);
ellipse(x, y, pointCircle-5, pointCircle-5);
} else {
fill(pix, 100);
rect(x, y, pointSquare, pointSquare);
}
}
There were a few versions I messed around with before coming to my final version. I chose to create a portrait of my sister.
Below is an image of the final result which I felt was the most visually interesting.
Below are my other iterations.
The first one on the bottom was personally my favorite, however I felt it wasnt as interesting as the image above.
//Min Young Jeong
//mjeong1@andrew.cmu.edu
//Section A
//Project-09
var underlyingImage;
function preload() {
var myImageURL = "https://i.imgur.com/sDyW7gl.jpg";
underlyingImage = loadImage(myImageURL);
}
function setup() {
createCanvas(500, 500);
background(0);
underlyingImage.loadPixels();
frameRate(10);
}
function draw() {
var px = mouseX;
var py = mouseY;
var ix = constrain(floor(px), 0, width-1);
var iy = constrain(floor(py), 0, height-1);
var theColorAtLocationXY = underlyingImage.get(ix, iy);
noStroke();
fill(theColorAtLocationXY);
rect(px,py,random(5,10),random(5,10));
rect(px+10,py+10,random(5,10),random(5,10));
rect(px-10,py-10,random(5,10),random(5,10));
}
For this project I created a pixelated portrait that the user can control. Each set of rectangles are created on the position of mouse X and mouse Y. The viewer can control the number of rectangles and the position of rectangles that are drawn.
![[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)
