Month: September 2017

agusman-LookingOutwards-03: 4D Printing

The emergence of “4D printing”

Artist/Scientist: Skylar Tibbits

TED Talk: “The Emergence of 4D Printing”

When I observe the rapid pace at which technology and hardware is evolving, I have to think of all the technology and hardware that becomes immediately discarded as a result. The materials that we have used to build our homes, cities and products cannot provide us much more than what their static form allows, other than the ways we can use that form for creative reuse. So what will happen when our environment changes faster than we can build the proper tools and technologies?

Skylar Tibbits, Co-Director and founder of the Self-Assembly Lab at MIT, is proposing the manufacture and use of “programmable” materials that adapt to the changing environment. He calls this material phenomenon “Self-Assembly” and defines it as a process by which “disordered parts build an ordered structure through local interaction.” By creating responsive building blocks that are constructed and reconstructed by using small amount of energy and interaction, people can build tools that suit the needs of a changing environment. Skylar and his team have been building these “responsive building blocks” with the aid of 3D printing. He calls this process of printing self-constructing objects “4D printing”, as the 4th dimension is the element of change over time.

dnam-project-03-dynamic-drawing

dnam-Project-03-Dynamic-Drawing

// Doo Won Nam
// 15-104 :: 1 Section B
// dnam@andrew.cmu.edu
// Project-03-Dynamic-Drawing

//basic start - setting the canvas and setting a frame rate to avoid
//too many flickers
//setting the variables for Height so it can change
var rectHeight = 20;
//setting the variable angle to rotate the rectangle
var angle = 0;

function setup() {
  createCanvas(640, 480);
}
//start with a background that changes color based on the position of the mouse
function draw() {
  background(mouseX - 50, mouseY - 20, mouseX + 100);
//making flowers (left and right) that also change color based on the
//position of the mouse, left changes depending on how the mouse is located
//and right one changes depending on left/right movement of the mouse
//the mouse movement gives the two flowers contrary shades
//I make sure to reset the translate at the end of each 'set'
  push();
  translate(120, 200);
  fill(mouseY, mouseY, mouseY);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 40, 100);
    rotate(PI/5);
  }
  pop();
  push();
  translate(500, 200);
  fill(mouseX, mouseX, mouseX);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 40, 100);
    rotate(PI/5);
  }
  pop();
//making a rectangle between two flowers that change colors when the
//the mouse is right on top of the rectangle
  if ((mouseX > 210) & (mouseX < 410) &&
        (mouseY > 300) && (mouseY < 300 + rectHeight)) {
        fill(0);
    } else {
        fill(100, 200, 400, 60);
    }

  noStroke();
  rect(210, 300, 200, rectHeight);
//if mouse is on the left, the rectangle increases towards an upward direction
//if mouse is on the right, the rectangle gets bigger in height downwards
//using a boolean and the middle of the canvas (for X), I am able to
//increase the size depending on the position of the mouse
  if (mouseX > 320) {
    rectHeight += 20;  }
  else {
    rectHeight -= 20;
  }
//these two ifs are to ensure the rectangle resets instead of going way below
//or above the canvas size
  if (rectHeight > 480) {
    rectHeight = 0;
  }
  if (rectHeight < -480) {
    rectHeight = 0;
  }
//rectangle that does not fully follow the movement of the mouse, but slowly
//rotate around the mouse. Moving the mouse will affect it's angle, speed, and
//position.
  push();
  translate(mouseX, mouseY);
  rectMode(CENTER);
  rotate(radians(angle));
  rect(mouseX, mouseY, 20, 20);
  pop();
  angle = angle + .1;
//speeds up / changes angle when mouse is over 200 in the x axis.
  if (mouseX > 200) {
    angle = angle + 1;
  }
}

Making an interactive, dynamic drawing was very difficult for me. One of the aspects that I struggled with the most would be making sure the artwork would change as my mouse moves. I was not sure what to draw with the program, so I decided to create something that resembles a face (as we made faces the last two projects, making a face felt natural). By following the guidelines, I used bright colours to decorate the piece.

JDBROWN – Project 3: Pattern Party

So yeah, I know: this project was all “don’t use random elements.”

And I tried that. But no matter how hard I tried, I couldn’t stop playing around with this piece of code. It’s a dynamic pattern-maker, based on the “rect ()” command and mouse locations.

While this program may seem to be very randomly generated, there is actually a lot of user input being taken into consideration.

I have divided the screen into four quadrants. When the mouse enters each of those quadrants, different things happen. Some of these effects include: box trajectory, size of boxes, color of boxes, and more. Also, the user may click at any time to generate boxes at any location on the canvas. One unfortunate thing is that it looks a lot more interesting on a bigger canvas! It resets when the Y variable for the boxes exceeds the canvas, so that’s why it’s a bit awkward in WordPress.

Here are some photos!

I have posted two versions of this program because I did a lot of stuff with it, and I really enjoyed its versatility. Enjoy!

Vanilla pattern-maker:

Jdbrown – p3

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project #3

// Setting up global variables for size and location of drawn shape

var nothingX = 0;
var nothingY = 0;
var bright = 0;
var nothingA = 0;
var nothingZ = 0;

function setup () {
  createCanvas (640, 480);
  background (255);
  stroke (255);
  fill (0);
}

function draw () {

  // Making function draw more quickly (default = 30), so this doesn't take forever;

  var rate = width / mouseY * 4 + 24;
  frameRate (rate);

  // Giving program a 50% chance of drawing one of each shape (variations on rectangle);

  if (random (1) > 0.5) {
    fill (mouseX/2, mouseY/2, random (255));
    rect (nothingX, nothingY, nothingX + random (30), nothingY + random (5));
    rect (nothingX + 30, nothingY + 50 + random (30), nothingX + random (30), nothingY + random (5));
    rect (nothingX + 60, nothingY + 100 + random (30), nothingX + random (30), nothingY + random (5));
  }
  else {
    rect (nothingX, nothingY + random (30), nothingX + random (50), nothingY);
  }

  // Making the program respond to mouse position,
  // Resets when leaving the frame (horizontally);

  nothingX += 5;
  if (nothingX > width) {
    nothingX = 0;
    nothingY += random (50);
  }

  if (mouseX > width/2) {
    nothingX -= 10;
  } else {nothingX += 5;}

  if (nothingX < 0) {
    nothingX = 640;
    nothingY += random (30);
  }

  if (nothingY > height) {
    background (255);
  }

  /* this piece of code makes the rectangles move up or down depending on mouse position;
  if (mouseY > height/2) {
    nothingY += 5;
  }

  if (mouseY < height/2) {
    nothingY -= 5;
  }
  */

  // Resets when leaving the frame (vertically);

  if (nothingY > height) {
    nothingX = 0;
    nothingY = 0;
  }
}

function mousePressed () {

  // When clicked, the program will relocate the "brush" (location at which DRAW is working)
  // to wherever the click occurred (mouse location at click);
  nothingX = mouseX;
  nothingY = mouseY;
}

Random fun stuff version, for example:

Jdbrown – p3

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project #3

// Setting up global variables for size and location of drawn shape

var nothingX = 0;
var nothingY = 0;
var bright = 0;
var nothingA = 0;
var nothingZ = 0;

function setup () {
  createCanvas (640, 480);
  background (255);
  stroke (255);
  fill (0);
}

function draw () {

  // Making function draw more quickly (default = 30), so this doesn't take forever;

  var rate = width / mouseY * 4 + 24;
  frameRate (rate);

  // Giving program a 50% chance of drawing one of each shape (variations on rectangle);

  if (random (1) > 0.5) {
    fill (mouseX/2, mouseY/2, random (255));
    rect (nothingX, nothingY, nothingX + random (30), nothingY + random (5));
    rect (nothingX + 30, nothingY + 50 + random (30), nothingX + random (30), nothingY + random (5));
    rect (nothingX + 60, nothingY + 100 + random (30), nothingX + random (30), nothingY + random (5));
  }
  else {
    rect (nothingX, nothingY + random (30), nothingX + random (50), nothingY);
  }

  // Making the program respond to mouse position,
  // Resets when leaving the frame (horizontally);

  nothingX += 5;
  if (nothingX > width) {
    nothingX = 0;
    nothingY += random (50);
  }

  if (mouseX > width/2) {
    nothingX -= 10;
  } else {nothingX += 5;}

  if (nothingX < 0) {
    nothingX = 640;
    nothingY += random (30);
  }

  if (nothingY > height) {
    background (255);
  }

  if (mouseY > height/2) {
    nothingY += 5;
  }

  if (mouseY < height/2) {
    nothingY -= 5;
  }

  // Resets when leaving the frame (vertically);

  if (nothingY > height) {
    nothingX = 0;
    nothingY = 0;
  }
}

function mousePressed () {

  // When clicked, the program will relocate the "brush" (location at which DRAW is working)
  // to wherever the click occurred (mouse location at click);
  nothingX = mouseX;
  nothingY = mouseY;
}

Thanks,
Josh

 

ctv-Looking Outwards-03

http://www.materialecology.com/projects/details/gemini

Neri Oxman’s work at Mediated Matter lab has fascinated me for years. This piece specifically intrigues me, a product designer. Computational design comes into play with many aspects of this form. One fascinating algorithm used in this project is a pressure-point mapper. The researchers used a computer vision (and other) programs to map the back of the human body. The orange and yellow bulges in this piece are 3d printed from materials of different squishinesses. The algorithm mapped a squishier material to pressure points on the body. I love this piece because an algorithm also determines the amount of each material to print. Her other work also is within the realm of 3d printed. One project is 3d printed bacteria within a 3d printed algorithmically-generated ecosystem.

sntong-Project-03-Dynamic-Drawing

sketch

//Scarlet Tong
//Sectiom A
//sntong@andrew.cmu.edu
//Project-03-Dynamic-Drawing

var column = 64;
var loc = 30;
var dim = 30;
var R = 254;
var G = 254;
var B = 254;
var angle = 0;
var angleVar = 40;
var dir = 8;
var colorGo = false;

function setup(){
  createCanvas(640,480);
  background(150);

}

function draw(){
  background (0);
  var w = 0;
  var h = 0;

  // basic grid of square
  push();
  translate(width/2,height/2);
  angleMode(DEGREES);
  noStroke();
  rectMode(CENTER);
  fill(254);
  rect(w, h, dim,dim);//center rect
  rotate(angle);
  fill(R,G,B);//color pair 1
  rect(w-loc,h-loc,dim,dim);//rect a1
  rect(w+loc,h+loc,dim,dim);//rect a8
  //color pair 2
  fill(R+loc,G,B);
  rect(w,h-loc,dim,dim);//rect a2
  rect(w-loc,h,dim,dim);//rect A4
  //color pair 3
  fill(R,G+loc,B);
  rect(w+loc,h-loc,dim,dim);//rect a3
  rect(w-loc,h+loc,dim,dim);//rect a6
  //color pair 4
  fill(R,G,B+loc);
  rect(w+loc,h,dim,dim);//rect A5
  rect(w,h+loc,dim,dim);//rect a7
  pop();

  stepOne();
  stepTwo();
  // this resets the value for angle to make sure the squares rotate when
  //the mouse is going back and forth the canvas
  if (mouseX < column*2 || mouseX > column*9) {
    angle = 0;
  }

  stepThree();
  //this to make sur the random color generation does not continue
  if (mouseX < column) {
    colorGo = false;
  }

}

function stepOne(){
  if (mouseX >= column & mouseX <= column+column/2 && mouseX <= column*3) {
    //Translation of the sqaures away from the center
    loc = max(50);
    loc += mouseX-70;
    //scale each square larger
    dim += mouseX-140;
    dim = max(50);
  }
}

//rotation of outter squares
function stepTwo (){
  //rotating the outside squares if mouseX is between a certain range
  if (mouseX > column*4 & mouseX < column*9 && angle < 90) {
    angle += angleVar*dir;
    R = random(0,254);
    G = random(0,254);
    B = random(0,254);
  } if (angle >= 90  & colorGo == false) {//to stop rotation exceeding 90 degrees
    angle = 90;
    colorGo = true;
  } else {
    angleVar = 0.2*dir;
  }
}
//Collsping and combining the squares to make large square
function stepThree(){
  if(mouseX > column*7 & mouseX < width){
    loc += mouseX-400;
    loc = min(50);
  }
}

I had fun trying to create a simple sequence of motion starting from the idea of generating a part to whole. A large square splits into smaller modules, and there is a variety of color and rotation that makes them all different from the “original” module that is located in the middle. I had to plan out the steps by using hand sketch diagrams.

ikrsek-Section C-Project-03-Dynamic Drawing

“Broken Telly”

(Note:If you expand your browser to fit your computer screen, you should be able to see the whole program)

sketch

//Isadora Krsek 
//Section C
//IKrsek@andrew.cmu.edu
//Project 03: Dynamic Drawings 
//Title: "Broken Telly"
   
//global variables
    var rotX = (453); //center of rotation for red ball (x-coordinate)
    var rotY = (390); //center of rotation for red ball (y-coordinate)
    var row = (50);
    var turnOffX = 1;
    var turnOffY = 1;
    var RB; //stands for "red-bit" as in the metal dial's indicator 
    var antLength = (166);
    var antX; 
    var antY; 
    var antX2;
    var antY2;
    var angle1;
    var angle2;
    var Bri;
    var ThiccThin;
    var Ang; 
    var Spacing; 
    var staticX = (0);
    var staticY = (0);
    var staticX2 = (0); 
    var staticY2 = (0);
    var staticX3 = (0); 
    var staticY3 = (0);
    var staticX4 = (0); 
    var staticY4 = (0);
    var staticX5 = (0); 
    var staticY5 = (0);
    var staticX6 = (0); 
    var staticY6 = (0);
    var last = -1; 
    var current; 
    
    
function setup() {
    createCanvas (640, 480);
    background(51,52,44);
    RB = new RedBit(rotX, rotY, 16); // (x,y,diameter) --> x,y represent the center of rotation
    antX = width/2-30;//origin point of left antennae's x
    antY = height/2-55;//origin point of left antennae's y
    antX2 = width/2-30;//origin point of right antennae's x
    antY2 = height/2-55;//origin point of right antennae's y
}

function tvFrame() {
    stroke(135,77,32); //the color of wood edge
    strokeWeight(16);
    line(600,400,600,0); //vertical right wood line
    line(0,0,600,0); //horizontal top wood line
    line(0,0,0,400); //vertical left wood line
    line(0,400,600,400); //horizontal bottom wood line
  //beggining of white OUTER plastic part ...  subtract each x/y value by 14
    strokeCap(PROJECT);
    stroke(236,221,188);
    strokeWeight(12);
    line(586,386,586,14); //vertical right white plastic line 
    line(14,14,586,14); //horizontal top white line
    line(14,14,14,386); //vertical left white line
    line(14,386,586,386); //horizontal bottom white line
  //beggining of black plastic part (no stroke) ... subtract each x/y value by 
    stroke(7,7,7);
    strokeWeight(150);
    line(505,225,505,95); // right side black big panel
    strokeWeight(22);
    line(31,31,564,31); // top black plastic line
    strokeWeight(20);
    line(31,31,31,290); // vertical left black plastic line
  //big plastic white part alternating with black (below)
    stroke(178,163,134);
    strokeWeight(80);
    line(60,340,540,340);
  //control panel
    stroke(208,207,187); 
    strokeWeight(4); // metal panel frame
    fill(166,162,150); // metal panel color
    rect(455,30,100,330); // metal panel 
    //sound holes 
    noStroke();
    fill(60);
    rect(468,row+10,75,5);
    rect(468,row+20,75,5);
    rect(468,row+30,75,5);
    rect(468,row+40,75,5);
    rect(468,row+50,75,5);
    rect(468,row+60,75,5);
    rect(468,row+70,75,5);
    rect(468,row+80,75,5);
    rect(468,row+90,75,5);
    rect(468,row+100,75,5);
    rect(468,row+110,75,5);
    rect(468,row+120,75,5);
    rect(468,row+130,75,5);
    rect(468,row+140,75,5);
    rect(468,row+150,75,5);
    rect(468,row+160,75,5);
    rect(468,row+170,75,5);
    rect(468,row+180,75,5);
    rect(468,row+190,75,5);
    rect(468,row+200,75,5);
    //back to the rest of the dial 
    stroke(208,207,187);
    fill(199,197,193); // metal dial color
    strokeWeight(3);
    ellipse(504,300,50,50); // metal dial
    rect(492,336,25,10); // small metal button 
  //beginning of inner white plastic part 
    noFill();
    stroke(200,188,166);
    strokeWeight(20);
    rect(51,51,370,264);
  //round rect frame for TV should have no fill but should have frame (add stroke back) 
    strokeWeight(10);
    stroke(0);
    rect(66,60,340,244,2);
}

//for left antennae movement 
function dragAntLeft(i, xin, yin) {
    if (mouseX<width/2-60 & mouseY<150 && mouseX>100){
        dx = mouseX - antX;
        dy = mouseY - antY;
        angle1 = atan2(dy, dx); //controls how the antennae moves 
      }
    ant(antX, antY, angle1); //the left antennae is born 
}

//for right antennae movement
function dragAntRight(iz, xin, yin) {
    if (mouseX>width/2+10 & mouseY<150 && mouseX<460){
        dx2 = mouseX - antX2;
        dy2 = mouseY - antY2;
        angle2 = atan2(dy2, dx2); //controls how the antennae moves 
          
        
      }
    ant2(antX2, antY2, angle2); //the left antennae is born 
    
}

//for left antennae configuration
function ant(x, y, a) {
    push();
    translate(x, y);
    rotate(a);
    line(0, 0, antLength, 0); // first two numbers are the starting point, lenght , and 
    pop();
}

//for right antennae configuration
function ant2(x, y, b) {
    push();
    translate(x, y);
    rotate(b);
    line(0, 0, antLength, 0); // first two numbers are the starting point, lenght , and 
    pop();
}

//other controls that change image 
function TVonoff (){
//tv power off black screen
    fill(51,52,44);
    noStroke();
    push();
    rectMode(CENTER);
    rect(width/2-60,290,turnOffX,turnOffY);//the size that it increases to when hovering over area that the metal button is in 
//the rect will increase to size (width/2-60,290,300,210)
    pop();
    if (dist(mouseX,mouseY,450,414)<8){
      turnOffX = 300;
      turnOffY = 210;
    }    else if(dist(mouseX,mouseY,450,425)>10){ //when mouse not near, TV powered ON 
           turnOffX = 1;
           turnOffY = 1;
          }
}

//specifics for the red circle/dial thigny
function RedBit(tx, ty, ts) {
    this.x = tx; //x-value of point you want ball to rotate around
    this.y = ty; //y-value of point you want ball to rotate around
    this.size = ts; //balls's diameter
    this.angle = 0; 
    this.update = function (mx, my) {
      this.angle = atan2(my - this.y, mx - this.x);
    }
    this.display = function () {
      push();
      translate(this.x, this.y);
      rotate(this.angle);
      fill(255, 0, 0);
      ellipse(this.size/1.4, 0, this.size / 2, this.size / 2); //control the diamete that the circle travels by dividing this.size by something
      pop();
    }
}

//mapping values for controls stuff
function Mapping(){
    //mapping strokeweight
    if (mouseX>width/2+10 & mouseY<150 && mouseX<460){
    ThiccThin = map(mouseX,300,510,2,20);
    }
    //mapping angle of static
    if(mouseX>width/2+10 & mouseY<150 && mouseX<460 && mouseY>30){
    Ang = map(mouseY,20,150,.01,.05);
    }
    //mapping position of static (space between)
    if (mouseX<width/2-60 & mouseY<150 && mouseX>100){
    Spacing = map(mouseX,100,260,200,400);
    }
    //mapping color brightness to dial 
    if(dist(mouseX,mouseY,453,390)<25){
    Bri= map(mouseY,375,423,0,180);
    }
}

//The Tv static     
  function drawStatic(){
  noFill();
  //row 0 of static shit 
  beginShape();
  vertex(150,200);
  vertex(160,180);
  vertex(170,200);
  vertex(180,180);
  vertex(190,200);
  vertex(200,180);
  vertex(210,200);
  vertex(220,180);
  vertex(230,200);
  vertex(240,180);
  vertex(250,200);
  vertex(260,180);
  vertex(270,200);
  vertex(280,180);
  vertex(290,200);
  vertex(300,180);
  vertex(310,200);
  vertex(320,180);
  vertex(330,200);
  vertex(340,180);
  vertex(350,200);
  vertex(360,180);
  vertex(370,200);
  vertex(380,180);
  vertex(390,200);
  vertex(400,180);
  vertex(410,200);
  vertex(420,180);
  vertex(430,200);
  vertex(440,180);
  vertex(450,200);
  vertex(460,180);
  vertex(470,200);
  vertex(480,180);
  vertex(490,200);
  vertex(500,180);
  vertex(510,200);
  vertex(520,180);
  vertex(530,200);
  vertex(540,180);
  vertex(550,200);
  vertex(560,180);
  vertex(570,200);
  vertex(580,180);
  vertex(590,200);
  vertex(600,180);
  endShape();
  //row 1 of static shit 
  beginShape();
  vertex(150,240);
  vertex(160,220);
  vertex(170,240);
  vertex(180,220);
  vertex(190,240);
  vertex(200,220);
  vertex(210,240);
  vertex(220,220);
  vertex(230,240);
  vertex(240,220);
  vertex(250,240);
  vertex(260,220);
  vertex(270,240);
  vertex(280,220);
  vertex(290,240);
  vertex(300,220);
  vertex(310,240);
  vertex(320,220);
  vertex(330,240);
  vertex(340,220);
  vertex(350,240);
  vertex(360,220);
  vertex(370,240);
  vertex(380,220);
  vertex(390,240);
  vertex(400,220);
  vertex(410,240);
  vertex(420,220);
  vertex(430,240);
  vertex(440,220);
  vertex(450,240);
  vertex(460,220);
  vertex(470,240);
  vertex(480,220);
  vertex(490,240);
  vertex(500,220);
  vertex(510,240);
  vertex(520,220);
  vertex(530,240);
  vertex(540,220);
  vertex(550,240);
  vertex(560,220);
  vertex(570,240);
  vertex(580,220);
  vertex(590,240);
  vertex(600,220);
  endShape();
  //row 2 of static shit 
  beginShape();
  vertex(150,280);
  vertex(160,260);
  vertex(170,280);
  vertex(180,260);
  vertex(190,280);
  vertex(200,260);
  vertex(210,280);
  vertex(220,260);
  vertex(230,280);
  vertex(240,260);
  vertex(250,280);
  vertex(260,260);
  vertex(270,280);
  vertex(280,260);
  vertex(290,280);
  vertex(300,260);
  vertex(310,280);
  vertex(320,260);
  vertex(330,280);
  vertex(340,260);
  vertex(350,280);
  vertex(360,260);
  vertex(370,280);
  vertex(380,260);
  vertex(390,280);
  vertex(400,260);
  vertex(410,280);
  vertex(420,260);
  vertex(430,280);
  vertex(440,260);
  vertex(450,280);
  vertex(460,260);
  vertex(470,280);
  vertex(480,260);
  vertex(490,280);
  vertex(500,260);
  vertex(510,280);
  vertex(520,260);
  vertex(530,280);
  vertex(540,260);
  vertex(550,280);
  vertex(560,260);
  vertex(570,280);
  vertex(580,260);
  vertex(590,280);
  vertex(600,260);  
  endShape();
  //row 3 of static shit 
  beginShape();
  vertex(150,320);
  vertex(160,300);
  vertex(170,320);
  vertex(180,300);
  vertex(190,320);
  vertex(200,300);
  vertex(210,320);
  vertex(220,300);
  vertex(230,320);
  vertex(240,300);
  vertex(250,320);
  vertex(260,300);
  vertex(270,320);
  vertex(280,300);
  vertex(290,320);
  vertex(300,300);
  vertex(310,320);
  vertex(320,300);
  vertex(330,320);
  vertex(340,300);
  vertex(350,320);
  vertex(360,300);
  vertex(370,320);
  vertex(380,300);
  vertex(390,320);
  vertex(400,300);
  vertex(410,320);
  vertex(420,300);
  vertex(430,320);
  vertex(440,300);
  vertex(450,320);
  vertex(460,300);
  vertex(470,320);
  vertex(480,300);
  vertex(490,320);
  vertex(500,300);
  vertex(510,320);
  vertex(520,300);
  vertex(530,320);
  vertex(540,300);
  vertex(550,320);
  vertex(560,300);
  vertex(570,320);
  vertex(580,300);
  vertex(590,320);
  vertex(600,300);
  endShape();
  //row 4 of static shit 
  beginShape();
  vertex(150,360);
  vertex(160,340);
  vertex(170,360);
  vertex(180,340);
  vertex(190,360);
  vertex(200,340);
  vertex(210,360);
  vertex(220,340);
  vertex(230,360);
  vertex(240,340);
  vertex(250,360);
  vertex(260,340);
  vertex(270,360);
  vertex(280,340);
  vertex(290,360);
  vertex(300,340);
  vertex(310,360);
  vertex(320,340);
  vertex(330,360);
  vertex(340,340);
  vertex(350,360);
  vertex(360,340);
  vertex(370,360);
  vertex(380,340);
  vertex(390,360);
  vertex(400,340);
  vertex(410,360);
  vertex(420,340);
  vertex(430,360);
  vertex(440,340);
  vertex(450,360);
  vertex(460,340);
  vertex(470,360);
  vertex(480,340);
  vertex(490,360);
  vertex(500,340);
  vertex(510,360);
  vertex(520,340);
  vertex(530,360);
  vertex(540,340);
  vertex(550,360);
  vertex(560,340);
  vertex(570,360);
  vertex(580,340);
  vertex(590,360);
  vertex(600,340);
  endShape();
  //row 5 of static shit 
  beginShape();
  vertex(150,400);
  vertex(160,380);
  vertex(170,400);
  vertex(180,380);
  vertex(190,400);
  vertex(200,380);
  vertex(210,400);
  vertex(220,380);
  vertex(230,400);
  vertex(240,380);
  vertex(250,400);
  vertex(260,380);
  vertex(270,400);
  vertex(280,380);
  vertex(290,400);
  vertex(300,380);
  vertex(310,400);
  vertex(320,380);
  vertex(330,400);
  vertex(340,380);
  vertex(350,400);
  vertex(360,380);
  vertex(370,400);
  vertex(380,380);
  vertex(390,400);
  vertex(400,380);
  vertex(410,400);
  vertex(420,380);
  vertex(430,400);
  vertex(440,380);
  vertex(450,400);
  vertex(460,380);
  vertex(470,400);
  vertex(480,380);
  vertex(490,400);
  vertex(500,380);
  vertex(510,400);
  vertex(520,380);
  vertex(530,400);
  vertex(540,380);
  vertex(550,400);
  vertex(560,380);
  vertex(570,400);
  vertex(580,380);
  vertex(590,400);
  vertex(600,380);
  endShape();
  }











function draw() {
  background(245);  
  Mapping();
    
    push();
    strokeWeight(1+ThiccThin);
    stroke(Bri+40)
    translate(200-Spacing,0)
    rotate(Ang);
    drawStatic()
    pop();
  
//blocks to cover movement of the static behind TV 
    fill(245)
    push();
    noStroke();
    rectMode(CORNER);
    rect(0,170,140,280);
    rect(520,180,200,280);
    rect(0,140,width,50)
    pop();
    
//antennae shit (movement & base)
    fill(10);
    noStroke();
    ellipse(width/2-30,height/2-55,100,70); //antennae base
    strokeWeight(4.2);
    stroke(10);
  //left antennae
    dragAntLeft(0, mouseX, mouseY);
    for( var i=0; i<antX.length-1; i++) {
    dragAntLeft(i+1, antX[i], antY[i]);
    }
  //right antennae
     dragAntRight(0, mouseX, mouseY);
    for( var iz=0; iz<antX2.length-1; iz++) {
    dragAntRight(iz+1, antX2[iz], antY2[iz]);
    }
    
//turns tv on and off 
  TVonoff();
    
//TV frame/illustration 
    push();
    translate(100,180); 
    scale(0.7,0.7); //scaling down the size of the TV so that antennae can fit on screen 
    tvFrame();
    pop();
  
//the red dial will only spin if the mouse gets close to it
    noStroke();
    if(dist(mouseX,mouseY,453,390)<25){
    RB.update(mouseX, mouseY);
    }
    RB.display();
    fill(255,0,0);
    ellipse(164,185,1,1);
  
}

*the left and right antennae do not appear until they are in vicinity of the mouse
The left antennae controls the position of the static, and moving it appears to animate it
the right antennae controls both the rotation and the thickness of the static
The little red-studded dial controls the brightness/color
and the button below the dial controls the size of a minuscule black square in the middle of the screen which gets large when you hover over it, simulating the tv turning off.

(Explanation coming soon)

ctv-project-02

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Assignment-03-A

var wid = 640;
var hgt = 480;
var colo = 0;

function setup() {
    createCanvas(wid, hgt);
}
 
function draw() {
    //rota variable must be defined 
    //in the draw loop, so it updates every frame
    var rota = mouseX/200;
    background(170, 190, 200);
    fill(colo);
    
    //starts a shape to apply features (eye)
    push(); 
    translate(width/3, height/3); //place on canvas
    rotate(rota);
    rect(-26, -26, 52, 52); //square
    rect(0, -26, 52, 52); //makes it a rectangle
    pop(); // ends shape features
    
    //starts a shape to apply features (eye)
    push(); 
    translate(width/3*2, height/3);
    rotate(rota);
    rect(-26, -26, 52, 52);
    rect(0, -26, 52, 52);
    pop();
    
    //starts a shape to apply features (mouth)
    push(); 
    translate(width/2, height/3*2);
    //changes openness of mouth based on mouseY
    arc(0, 50, 90, mouseY, 0, PI, OPEN);
    pop(); 
    
    //starts nose with features
    push();
    translate(mouseX, mouseY);
    //draws nose
    beginShape();
    curveVertex(0, 0);
    curveVertex(10, 10);
    curveVertex(40, 40);
    curveVertex(80, 80);
    curveVertex(100, 120);
    curveVertex(80, 140);
    curveVertex(40, 130);
    curveVertex(10, 100);
    curveVertex(0, 0);
    
    // change direction of nose, based on cursor
    if (mouseX <= width/2) { 
        scale(-.75, .75);

    } else { //scales down nose shape
        scale(.75,.75);
    }
    endShape(); 
    pop();
}

//if you click, it changes black to white!
function mousePressed(){
    if(colo == 0){
        colo = 255;
    noStroke();
    } else {
        colo = 0;
    }
}

 

This project was fun because it was cool to play with the shapes while programming each line. I wish I had spent more time on it, but I spent wayyyy too much time trying to figure out coordinates for the nose. The nose still looks horrible, so I just need to spend more time using curveVertex() for drawing.

Sarah Kim – Dynamic Drawing

sketch

// the height of the moon&lines stay constant.
//the lines and day and night should change colors.
var start = 20;
var angle = 0;
var y = 100;
var night = (0, 0, 0);
var r = 25; // colors for the background.
var g = 25;
var b = 112;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(r,g,b);
    noStroke();
    //largest ring
    fill(255);
    ellipse(pmouseX, y, 700, 700);
    fill(night);
    ellipse(pmouseX, y, 698, 697);
    //pink ring
    fill("pink");
    ellipse(pmouseX, y, 310, 310);
    fill(night);
    ellipse(pmouseX, y, 303, 303);
    //smaller white ring
    fill(255);
    ellipse(pmouseX, y, 300, 300);
    fill(night);
    ellipse(pmouseX, y, 299, 299);
    //blue ring
    fill("skyblue");
    ellipse(pmouseX, y, 150, 150);
    fill(night);
    ellipse(pmouseX, y, 149, 149);
    //moon
    fill(255,250,205);
    ellipse(pmouseX, y, 50, 50);
    fill(night);
    arc(pmouseX+30, y-10, 50,50,0,PI+QUARTER_PI, PIE);
    //mountains at night. some change colors randomly.
    fill(pmouseX, pmouseY, 255);
    triangle(120, 300, 0, 480, 240, 480);
    fill(pmouseX, pmouseY, 210);
    triangle(520, 480, 620, 205, 700, 500);
    fill("blue");
    triangle(400, 480, 520, 210, 640, 480);
    fill("skyblue");
    triangle(520, 210, 520, 480, 640, 480);
    fill("white");
    triangle(140, 480, 250, 225, 500, 480);
    fill("lavender");
    triangle(250, 225, 250, 480, 500, 480);
    //bug in left
    push();
    translate(300,250);
    rotate(radians(angle+90));
    fill("yellow")
    ellipse(-start, start, 3, 3);
    pop();
    angle = angle + 1;
    start = start + .05;
    //bug in the middle
    push();
    translate(100,100);
    rotate(radians(angle));
    fill("white")
    ellipse(start, -start, 5, 5);
    pop();
    angle = angle + 1;
    start = start + .05;
    //bug on the right
    push();
    translate(500,80);
    rotate(radians(angle));
    fill("yellow")
    ellipse(start, start, 5, 5);
    pop();
    angle = angle + 0.2;
    start = start + .0003;
    //bugs with changing colors with mouse movement.
    push();
    translate(320,200);
    rotate(radians(angle));
    fill(pmouseX, pmouseY, 213);
    ellipse(-start, start, 5, 5);
    pop();
    angle = angle + 0.2;
    start = start + .001;

    push();
    translate(600,76);
    rotate(radians(angle));
    fill(pmouseX, pmouseY, 143);
    ellipse(start, -start, 5, 5);
    pop();
    angle = angle + 0.2;
    start = start + .00001;
    // as mouse moves to the right, night changes to day.
    if (pmouseX >= night+320) {
     night = night + 5;
    }
    if (pmouseX < night+320) {
     night = night - 2;
    }
    //background changes color along with the movement of the moon.
    if (pmouseX >= 320) {
     r = 230;
    }
    if (pmouseX >= 320) {
     g = 230;
    }
    if (pmouseX >= 320) {
     b= 250;
   }
    if (pmouseX < 320) {
     r = 25;
   }
   if (pmouseX < 320) {
    g = 25;
   }
   if (pmouseX < 320) {
    b = 112;
  }

}

I used color transitions and the spiral rotation that we learned this week to create the image. The moon is created with an arc and ellipse.

rkarp1 – LookingOutwards-03 – Frequencies

“Frequencies” (2017) is a computational digital fabrication by convivial studio.

In “Frequencies,” a triptych of 3-D, map-like reliefs were made by CNC machines using Perlin Noise algorithm frequencies. The reliefs were meant to imitate rocky and fluid patterns, to match those often found on relief maps. According to convivial studio’s description of the project, “The generative application [used to make “Frequencies”] allows an infinite number of outcomes,” and so convivial studio sought to show a range of patterns across the triptych.

Here’s a video that details the creation of “Frequencies.”

I was intrigued by “Frequencies” for a number of reasons. For one, I’m in the early stages of a project about map-making (specifically with regards to redistricting), and I was curious to investigate map-making from a very different angle. In addition, I had just read about Perlin Noise in one of the required readings for our class, and I don’t know if I fully understand it but I am intrigued by it. I also love the combination of huge machines making very delicate-seeming art. I had to look up what a CNC machine is (read about it here) and I am looking forward to going down the rabbithole of other CNC machined artworks.

convivial studio used openFrameworks with add-ons including ofxMtlMapping2D, ofxFlowTools, ofxAutoReloadedShader for the generative 3D and projection software. They used artCam to generate the code needed for the CNC machine. A more detailed description is available here.

As seen in the video, a projection layer is added on top of the reliefs that, according to convival studio, “aims to challenge the perception of relief.” Personally, I found myself more interested in the reliefs themselves and the means by which they were made, but they do make for some striking images.

An image of “Frequencies” with its projection layer

convival studio, based in London, describes itself as working “at the intersection of art, design and technology. Merging the digital with the physical, convivial creates emotionally engaging experiences with an element of wonder.” I certainly felt wonder watching the creation of “Frameworks.” I hope you do, too!