Author: ifv@andrew.cmu.edu

ifv-LookingOutwards-07

Screenshots from Santiago Ortiz’s Personal Knowledge Database

Visualizes all of Ortiz’s internet references that he collected for over 10 years. The number of data points is over 700. There are paths between data that darken when your cursor hovers over them. I liked the is project because I have felt the urge to make an archive for all my digital references/inspirations but was intimidated why the scale of the task. This project was able to take a large amount of data and compress it in a way that made it easier to understand through the various categorizations and interactivity. Since sections of the circle are divided by category Ortiz had to assign each data point a certain value in all those categories so it could be accurately plotted on the shape. Ortiz’s artistic sensibilities showed through in the design created by the paths, especially how they change the image when interacted with.

ifv-Project-07

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Assignment ifv-07-Project
var y;
var x;
var a;
var t;
var nPoints = 100;
function setup() {
  createCanvas(480,480);
}
function draw(){
  background(199, 74, 105);
  strokeWeight(2);
  translate(width / 2, height / 2);
  //center ray circle
  for(var l = 0; l <60; l++){
    drawRay(l)
  }
  //rotate and overlap looping arc
  for(var i = 0; i < 20; i+=1.5){
    stroke(222, 150, 168);

    if(i==0){
      push();
      drawCurve();
      pop();
    } else {
      push();
      rotate(PI/i);
      drawCurve();
      pop();
    }
  }
}
//drawing ray circ function
function drawRay(count) {
  push();
  rotate(radians(count*6));
  var H = hour();
  var rayH = map(H,0,0,140);
  line(0,0,(width/10),mouseY/4);
  pop();
}
//looping arc func
function drawCurve(){
  var x;
   var y;
   push();

   var a = 80.0;
   var b = a / 2.0;
   var h = constrain(mouseY / 2, 0, height);
   var ph = mouseX / 230;

   noFill();
   beginShape();
   for (var i = 0; i < nPoints; i++) {
       var t = map(i, 0, nPoints, 0, TWO_PI);
       x	=	(b*cos(t))/ph+b*cos(3*t)/(ph)
       y	=	(b*sin(t))/ph-b*sin(3*t)/(ph)
       vertex(x, y);
   }
   endShape(CLOSE);
}

I wanted to make a design that blended curved lines and straight lines. The mouse’s X and Y position affect the shape and size of the curved forms and the length and position of the lines in the cluster.

ifv-LookingOutwards-06

pieces from Dodaro’s project Divide+Conquer

Artist: Jen Dodaro

Project: Divide + Conquer

Dodaro used processing to make randomized collages of works from all the artists featured in Stedelijk Museum in Amsterdam. When the user interacts with the piece (by clicking) a new image is generated and projected on the gallery wall. I think the interactivity was good not only for making the viewing experience fun but also for proving the complexity of the program. I admired the posters created by this process because they are visually complex and put an emphasis of aesthetics over legibility. The contrast between the organic marks created through randomness and the utilitarian font is particularly interesting. The artist’s sensibility shows through in how the program collages pieces together and the choice to use pieces from the show.

 

ifv-Project-06-Clock

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-06
function setup() {
  createCanvas(480,480);
  var H = hour();
  var cChange = map(H,0,23,0,50)
  background(31+cChange,30+cChange,72+cChange);
}


function draw() {
  var H = hour();
  var M = minute();
  var S = second();
    //change color in relation to hours
    var cChange = map(H,0,23,0,50)
    background(31+cChange,30+cChange,72+cChange,20);
    var c=color(200+cChange,134+cChange,54+cChange);
    fill(c)

    //SunRays
    for(var i=0; i < 60;i++){
      strokeWeight(3);
      var col = color(c);
      if(minute() == i) {
        col = color(200+cChange,134+cChange,54+cChange,40);
      }
      drawRay(i, color(col));
    }
    //sun center
    noStroke();
    ellipse(width/2,height/3,width/8,height/8);

    //Glare
    push();
    translate(width/2,height/3);
    var secondz = map(S,0,59,0,360);
    rotate(radians(secondz));
    fill(255,255,255,70);
    ellipse(width/3.5,0,15,15);
    ellipse(width/3.7,0,10,10);
    pop();
      //triangle
      fill(255,255,255,40);
      noStroke();
      var hgt =0;
      var sc = map(S,0,59,0,height/7);
      hgt +=sc
      triangle(0,height,width/2,height-hgt,width,height)

}
//Instruction on how draw Ray
function drawRay(count,col) {
  push();
  translate(width/2,height/3);
  rotate(radians(count*6));
  stroke(col);
  var H = hour();
  var rayH = map(H,0,0,140);
  line(0,0,(width/10),height/5);
  pop();
}

The color of the sun and the background color are affected by the hour. One of the rays changes color according to the minute. The white “flare” circles around the sun in relation to the passing seconds. The triangle and flare leave a ghostly trail because a semi-transparent background is being drawn on top of past iterations. My result was very different from my original idea, I made some compromises for simplicity. I was happy with the changes I met and the result has the same general tone I originally intended when making my sketch.

ifv-LookingOutwards-05

Artist: Thomas Ludwig

Coral Rift: “unprincipled iteration formula with zillions of iterations, producing an ultrafine “net” of torn microsurfaces (in consequence the surface normal computation is approximate at best)” 3 days of rendering required used Allura Renderer, high res here

Kaleidoscopic II: digital image created using a fractal distance estimator and rendered overnight on a gtx 970, high res here

What drew me to Ludwig’s work has the levels of detail and depth in his work, the images he creates appear as though they could exist in a real but unusual space. I was also interested in his tendency to create forms that have the characteristics of an electron microscope image of the structure of an object found in nature. Ludwig experiments with different programs for generating and rendering his images, which are usually created by manipulating 3-dimensional fractals. His artistic sensibilities influence how he decides to render, what parameters he sets for depth perception, motion blur, lighting etc. For many of his pieces the minimum render time is overnight; many works take multiple days to render.

More of his work can be found here

ifv-Project05-Wallpaper

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//ifv-05-Project
function setup() {
    createCanvas(480, 480);
    background(140, 184, 135);
}

function draw() {
//curves
for (var countz = width/50; countz < width; countz += width/5){
for (var x = 0; x < width; x = x + 1) {
    stroke(163, 214, 157);
    fill(163, 214, 157);
    strokeWeight(2);
    point((60 - 50 * 0.5*sin(radians(2*x)))+countz,x);
    point( (60 - 50 * 0.5*cos(radians(2*x)))+countz,x);
  }
}
//line of dots
for(var dotx = 0; dotx < width+10; dotx += 10){
  for(var doty = 0; doty < (4*height)/3; doty += height/3){
    if((dotx/10)%2==0){
      stroke(90, 143, 85);
      fill(90, 143, 85);
      strokeWeight(4);
    } else{
      stroke(163, 214, 157);
      fill(163, 214, 157);
      strokeWeight(2);
    }
    point(dotx,doty);
    point(dotx,doty+height/6);
  }

}
//Flowers
for(var fly =0; fly <height; fly += height/3){

for(var elc =0; elc< width; elc +=width/7){
  var ely = fly+height/10;
  var space = width/14;
  fill(255, 186, 171);
  noStroke();
  triangle((elc-5),ely,(elc),ely-20,(elc+5),ely)


  stroke(83, 131, 78);
  strokeWeight(3);
  noFill();
  triangle((elc-10),ely-8,(elc),ely,(elc-5),ely);
  triangle((elc+10),ely-8,(elc),ely,(elc+5),ely);
  elc += space
}

}
noLoop();
}

This was my initial sketch for the wall paper design, it was inspired by the wallpapers in the database that was linked. I decided to add a more organically shaped space divider with cos and sin loops. I kept the idea to include a representation of a plant just changed what the plant looked like.

ifv-project-04

sketch

function setup() {
    createCanvas(400, 300);
}

function draw() {
  background(255,235,0);
     for (var i = 0; i < 70; i ++) {
       drawCurvedLines(i);
       //triangles made of lines
       line(210,200,i*3,300);
       line(210,200,150+i*3,0);
       line(210,200,400,150+i*3);
       line(i*3,0,i*3+2,);
       line(110,100,0,i*3);
       line(110,100,i*3,0);
     }

 }
function drawCurvedLines(count) {
 push();
 translate(200,200);
 rotate(radians(count*1));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(200,200);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()

 push();
 translate(100,100);
 rotate(radians(count*1));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(100,100);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(100,100);
 rotate(radians(count*2+2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();
 push();
 translate(130,50);
 rotate(radians(count*2+2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*3));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*4));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*5));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*6));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

}

I just played around with curved and straight lines to create an abstract piece that has depth.

ifv-Looking-Outwards-04

“Great Animal Orchestra”

by Bernie Krause and United Visual Artists.

 

Krause takes recorded audio of natural elements and creatures to create soundscapes that are not only interesting to listen to but are also visually compelling. Krause uses the information within the audio to generate a spectrogram which is projected on the walls of a fully immersive space. This visual component is not only meant to draw in the observer, it also teaches the visual cues of certain types of sound created by different creatures. I admire the focus Krause brings to parts of nature most people overlook, in his TedTalk regarding his work he talks about his discovery that even the smallest insects, such as ants, have their own unique soundscape. His attention to detail shows in the execution and thought behind the creation and presentation of this work.

 

Bernie Krause talking about his work with soundscapes in his TedTalk

ifv-Looking-Outwards-03

MIT’s Self-Folding Origami Technology

Creators create designs digitally that when printed and inflated with air they self-fold into origami forms.

After reading the prompt this project immediately came to mind. I admire the gesture of taking a step towards creating technology that can completely assemble itself. This technology could be used not only for artistic purposes but also for practical functions, the video above addresses this by saying these principles could be applied to the design of airbags. The materials and designs used consciously imitate the aesthetics and traditions of origami. As the program for designing is developed I hope there becomes a way to make more randomized forms which can still have a significant transformation. After doing some more research I found this video which shows that the project has taken a a turn for practicality and autonomy.

ifv-Project-03

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-03
function setup() {
    createCanvas(480, 640);
}

function draw() {
  background(189,246,255);
//background color change
  if (mouseX >= 180 & mouseX <= 280) {
    background(211,255,255);
  }
  var centerX = constrain(mouseX,100,380);
  var centerY = constrain(mouseY,180,460);
//multi-layed rotating square which follows the cursor as its pressed
  if(mouseIsPressed) {
    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 700, 700);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 600, 600);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 500, 500);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 400, 400);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 300, 300);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 200, 200);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 100, 100);
    pop();
  }
//white dots that change size according to mouseX
  fill(255);
  stroke(255);
  strokeWeight(mouseX/10);
  point(centerX + 50, centerY);
  point(centerX - 50, centerY);
  point(centerX + 100, centerY);
  point(centerX - 100, centerY);
  point(centerX + 150, centerY);
  point(centerX - 150, centerY);
  point(centerX + 200, centerY);
  point(centerX - 200, centerY);
//Color and shape-changing Triangle
  fill(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  stroke(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  strokeWeight(3);
  triangle(100,0,centerX,centerY-70,380,0);
  triangle(100,640,centerX,centerY+70,380,640);

//lines orig from each corner and connect at cursor
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  strokeWeight(6);
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  line(0,0,centerX,centerY);
  line(0,640,centerX,centerY);
  line(480,0,centerX,centerY);
  line(480,640,centerX,centerY);
//Centercircle
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  ellipseMode(CENTER);
  ellipse(centerX,centerY,50,50);

}

MouseX and MouseY are used to change the position of the center circle and the intersection of the four lines along with their color. These coordinates also affect the shape of the two triangles and the color of their stroke and fill. The white dots also follow these points and the stroke weight changes in thickness based on mouseX. When the Mouse is pressed multiple overlapped rotating squares appear. The position in which the mouse X&Y can effect the above elements is restrained. Transparency of certain elements is also affected. The background color lightens when the mouse is near the middle x-coordinates.