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.
Chloe Varelidi is an indie game designer/developer that designs and builds playful products that empowers humans to be creative, kind, and curious.
One of her projects was the Minicade, and this was a collaboration with Atul Varma for her artist residency at Eyebeam. The Minicade is a website and app where people can collaboratively build mini arcade games with multiple users. Each person can add a link to one or more games to a custom playlist and instantly play them as one massive game, that keeps track of score and increases the difficulty. Its very simple to use and users can either play the games already provided or remix the mini-game with their own code. While the Minicade is mostly used by kids to encourage them to learn the basics of programming, it is fun for everyone to use.
The use of mini-games itself reminds me of mini-games in popular apps like Dumb Ways to Die, and it adds a cool competitive aspect for kids to interact with each other by building games they did themselves.
The Minicade also has a creative external feature looking like an emoji come to lifeA user interacting with the Minicade
To learn more about this project, click the links below:
/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-11
*/
//important variables
var fish = [];
var star = [];
function setup() {
createCanvas(480, 480);
frameRate(20);
//initial collection of fish
for (i = 0; i < 30; i++) {
var fishx = random(width);
var fishy = random(300, height);
fish[i] = makeFish(fishx, fishy);
}
//initial collection of stars
for (i = 0; i < 10; i++) {
var starx = random(width);
var stary = random(0, 100);
star[i] = makeStar(starx, stary);
}
}
function draw() {
//black background
background(0);
//draw mountains, water, bed, fish, stars, and moon
drawMountains();
drawWater();
drawBed();
fishies();
stars();
drawMoon();
}
function drawBed() {
stroke(0); //black outline
fill(255, 254, 242); //bed color
rect((width/2)-30, (height/2)-10, 150, 40); //bed shape
fill(255); //pillow color
ellipse(width/2+105, height/2-14, 30, 10); //pillow shape
fill(255, 243, 222); //head color
ellipse(width/2+100, height/2-25, 20, 20); //head shape
noStroke(); //no outline for neck
ellipse(width/2+83, height/2-20, 20, 5); //neck shape
stroke(0); //black outline
fill(203, 202, 204); //blanket color
ellipse(width/2+30, height/2-10, 120, 40); //blanket shape
}
function drawWater() {
fill(66, 112, 128); //blue water color
rect(0, height/2, width, height); //fill bottom half of canvas
}
function drawFish() {
noStroke(); //no outline
fill(255, 160, 122); //orange fish color
push();
translate(this.x1, this.y1); //locate fish at x1, y1
ellipse(10, 10, 10, 5); //fish body
triangle(10, 10, 5, 5, 5, 15); //fish tail
pop();
}
function makeFish(xlocation, ylocation) {
var makeF = {x1: xlocation,
y1: ylocation,
fishx: random(0, width),
fishy: random(300, height),
speed: -3.0,
move: moveFish,
draw: drawFish}
return makeF;
}
function moveFish() {
this.x1 += this.speed; //speed of fish moving
if (this.x1<=-10) { //restart fish at width after it disappears on left
this.x1 += width;
}
}
function fishies() {
for(i=0; i<fish.length; i++) {
fish[i].move();
fish[i].draw();
}
}
function drawStar() {
noStroke();
fill(255, 251, 0); //yellow color
push();
translate(this.x2, this.y2); //draw stars at x2, y2
ellipse(10, 10, 5, 5); //star shape
pop();
}
function makeStar(xlocation, ylocation) {
var makeS = {x2: xlocation,
y2: ylocation,
starx: random(0, width),
stary: random(0, 100),
speed: -3.0,
move: moveStar,
draw: drawStar}
return makeS;
}
function moveStar() {
this.x2 += this.speed; //speed of stars moving
if (this.x2<=-10) { //restart stars on right if it leaves canvas
this.x2 += width;
}
}
function stars() {
for(i=0; i<star.length; i++) {
star[i].move();
star[i].draw();
}
}
function drawMoon(){
fill(255, 253, 184); //yellow moon color
ellipse(400, 50, 50, 50); //moon shape
}
function drawMountains(){
noStroke();
fill(43, 43, 36); //dark gray mountain color
beginShape();
for (i=0; i<width; i++) {
var mountainSpeed = .0007; //speed of mountains moving
var mountainDetail = 0.02; //smoothness of mountains
var t = (i * mountainDetail) + (millis() * mountainSpeed);
//mountain y coord
var y = map(noise(t), 0, 1.8, height/8, height);
//keep drawing mountain
vertex(i, y);
}
//height constriant of mountains
vertex(width, height);
//restart mountains at left side
vertex(0, height);
endShape();
}
This process took me a long time. I spent a while thinking about what I wanted to draw and I decided on a Parent Trap theme with a bed floating in the ocean. The stars, moon, mountains, and fish are meant to resemble an ocean view at night. I had some difficulty making my own object, but once I got the hang of it, it was pretty fun.
Jenny E. Sabin is an architectural designer whose work is at the forefront of a new direction for 21st century architectural practice. She is principal of Jenny Sabin Studio, an experimental architectural design studio based in Ithaca and Director of the Sabin Design Lab at Cornell AAP, a design research lab with specialization in computational design, data visualization and digital fabrication.
Lumen (2017) night time
Lumen (2017) by Jenny Sabin is a digitally fabricated architectural work that won the 2017 Museum of Modern Art’s PS1 Young Architect’s Program. The structure is a socially and environmentally responsive lightweight knitted fabric that adapts to the densities of bodies, heat, and sunlight. Lumen is composed out of tubular structures and a canopy of cellular components employs recycled textiles, photo-luminescent and solar active yarns that absorb, collect, and deliver light. The structure also incorporates an automatic misting system that activates depending on the proximity of a visitor.
//Jamie Park jiminp@andrew.cmu.edu
//15-104 Section E Project 11
var xCirc = 100;
var yCirc = 120;
var moonX = 270;
var airplaneSound;
var airplanePic;
function preload(){
var airplaneURL = "https://i.imgur.com/4Vw2nUw.png"
airplanePic = loadImage(airplaneURL);
airplaneSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/325845__daveshu88__airplane-inside-ambient-cessna-414-condenser.mp3");
}
function setup(){
createCanvas(450, 450);
frameRate(9.5);
useSound();
}
function soundSetup(){
airplaneSound.setVolume(0.2);
airplaneSound.play();
airplaneSound.loop();
}
function draw(){
background('#1b2c4d');
stars();
moon();
cloud();
canyons();
canyons2();
canyons3();
image(airplanePic, 0, 0);
}
function canyons(){
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
noStroke();
fill('#c96e57');
beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 0.85, 0, height);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
function canyons2(){
var terrainSpeed = 0.0005;
var terrainDetail = 0.0059;
noStroke();
fill('#913e29');
beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 0.65, 0, height - 5);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
function canyons3(){
var terrainSpeed = 0.0005;
var terrainDetail = 0.004;
noStroke();
fill('#703223');
beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 0.5, 0, height);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
function cloud(){
noStroke();
fill('#2f446b');
ellipse(xCirc, yCirc + 20, 40, 40);
ellipse(xCirc + 30, yCirc + 10, 60, 60);
ellipse(xCirc + 60, yCirc, 50, 50);
ellipse(xCirc + 70, yCirc + 15, 70, 60);
ellipse(xCirc + 100, yCirc + 10, 60, 60);
ellipse(xCirc + 130, yCirc + 10, 45, 45);
xCirc = xCirc - 5;
if (xCirc === -100){
xCirc = width;
}
}
function stars(){
starX = random(width);
starY = random(height / 2);
for (var i = 0; i < 50; i++){
strokeWeight(2);
stroke("#e8e8cc");
point(starX, starY);
}
}
function moon(){
noStroke();
fill("#f0e3cc");
ellipse(moonX, 180, 100, 100);
fill("#edd4a8");
ellipse(moonX, 180, 70, 70);
moonX = moonX - 0.15;
if (moonX === 0){
moonX = 400;
}
}
I approached this project by brainstorming transportations with windows and ended up landing upon airplanes. The code I have created is a visual of red canyons beyond an airplane window. The stars sparkle at random points of the canvas, and the cloud and the moon shifts left towards the canvas. I had added airplane noise to the file to hint that this is a point of view from an airplane. I really enjoyed the process of visualizing my ideas and I feel like I am becoming more confident in coding.
For this Looking Outward, I really wanted to look at Amanda Ghassaei design work, specifically her 2017 Origami Simulator. A little about Amanda, she is a graduate of Pomona College and MIT’s media lab. Currently, she is working as a research engineer at Adobe’s Creative Intelligence Lab. With a background in physics and eventually design, she is applying her expertise in the fields of computational design, digital fabrication, and simulation methods
Origami Simulator is a WebGL app that mimics how a certain origami pattern creases and folds. What’s really interesting about this simulator is that contrary to the normal process of making one fold at a time, the simulator attempts to fold creases all at once.
Crease patterns are uploaded into the app as a SVG or FOLD format; from there, the app uses color and opacity to visualize the direction and fold angles of each crease.
The Origami Simulator app also connects to virtual reality and a user is able to interact with the digital forms through that as well.
Overall, I just really appreciate the way Amanda has brought both structure and delight to the seemingly ordinary concept of folding origami.
A rendition of the KitesFight designed by Eva Schindling
A project designed and implemented by a female artist is the KitesFight by Eva Schindling. Schindling focused heavily on the application of technology in the realm of media art. She 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. Schindling’s range of artwork is very wide with architectural Trojan Horse and simple sound projects. Out of such an extensive array of projects, I selected the KitesFight as it seems very similar to the projects that we engage with during this course.
The project features many triangles that interact with one another depending on a number of rule sets. The algorithm changes varying by the volume of the sound inputted. Then, the triangles follow each other, repel each other, and attach with one another. As we have been working on projects where different shapes interact with one another and we also just did the Sonic Art Project, I believe that though further practice. Such complex projects can be feasible.
In 2018, Japanese sound artist Ryoji Ikeda created an audiovisual “Code-Verse”l that took computer graphics and translated them into electronic noises and drones, coining it as “code-verse.” Ikeda created this code-verse project after creating his own type of techno music that was formed from sonic textures from graphics. The code probably was composed of a series of sonic partnership with the direction and speed of the graphics from Code-Verse. I found this project very interesting because it was a balanced intersection of two forms of entertainment– visuals and audio. By conjoining the two mediums, Ikeda created a mesmerizing audiovisual that allowed viewers to feel as if they were placed in a new dimension. Ikeda sought to create a unique art form that escaped from the media-infested society we live in and a form that allowed viewers to feel as if they were interacting and in the actual art environment, and this was manifested in Code-Verse which allowed visitors to feel as if they were in a different dimension from the Big Data world that we live in.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
