I wanted to make something simple and cute that would allow for a bit of an unnaturalness to it too. By putting the smile and adding random circles around it, it creates this uneasiness.

Lrospigl Sketch

//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

var distw = 50; // x spacing
var disth = 50; // y spacing
var circlex = 25; // x start
var circley = 25; // y start
var circle = 10; // number of circles per row
var c = (230, 180, 230);
var angle = 1;

function setup() {
    createCanvas(450,450);
}

function draw() {
    background(250);

    for (var row = 0; row < 9; row++) {
        if (row % 2 ===1){
            circlex +=25; //spacing of odd rows + start
            circle = 8; // number of circles

        }
        else {
            circlex = 25; //start of circles
            circle = 9; //
        }
        for (var col = 0; col < circle; col++) {
            var cx = 0;
            var cy = row * disth;
            lines (cx, cy);
        }

    for (var col = 0; col < circle; col++) {
        var px = circlex + col * distw;
        var py = circley + row * disth;
        smiley (px, py);
        }
    noLoop();
}
}

function lines(cx, cy) {
    push();
    translate (cx, cy);
    strokeWeight (10)
    stroke (100, 100, 200);
    curve (0, 0, 0, 0, 450, 10, 450, 0, 450, 0);
    pop();
}

function smiley(px, py) {
    push();
    stroke (0)
    translate(px, py);
    fill(255, 255, 0);
    ellipse (0, 0, 40, 40);
    fill (0);
    ellipse (-6,-5, 5, 5);
    ellipse (6, -5, 5, 5);
    fill (c);
    arc(0, 3, 20, 20, 0, PI);
    noFill ();
    ellipse (-2, 0, 41, 40);
    ellipse (2, 0, 40, 39);

    pop();
}

As I was looking at 3d computer graphics on Behance (a really cool design portfolio website), I stumbled upon this artist’s page who had a lot of 3d graphics. The video (linked bellow) is very interesting and kind of surreal. He uses proton collision and information from supercomputer simulations to create this visual. He visualizes different events that have to do with these collisions, and inputs that information of the simulation to make a 2d and 3d rendering of them visually.

He also has this project where creates human-body-shapes where the only thing you see are blood vessels that are moving, and rotating to give a sense of dimension and perspective.

Bebot is robot synth. It is an iPhone app that allows you to control the effects and the scale, all while a little robot sings at you. While I really like the app, what interested me more is that it doesn’t have a limiting range. It really is up to the suer and how they take it. For example, this man tested the limits of Bebot to make an interesting and complicated song.

Since it’s a multitouch app, the writer of the code cannot assume how many fingers the user is actually going to use. In the video for example, the user here used up to 4 fingers at a time, something that the author took account for.

Official Apple App store bebot site .

When I started with this project, I didn’t have a clear idea of what I wanted my image to look like. However, I did know I wanted the to be a play in line quantity that the user was able to have control over. I made it so that if you move your mouse to the top left corner of the canvas, you will see the darkest color possible, as well as the highest concentrations of lines. And if you move your mouse to the bottom right corner, you will see the least amount of lines, and the lightest/ least visible color.

sketch

//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

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

function draw () {
  background (240);

var r = mouseX; 
var g = mouseY;
var x1 = width/2;
var y1 = height/2;
var x2 = width/5;
var y2 = height/5;
var spacing = 5;
strokeWeight (0.5);

//line sequence one
stroke (r, g, 150);
//top left quadrant `
  for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  
//top right quadrant
  push ();
  scale (-1, 1);
  translate (-400, 0);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom left quadrant
  push ();
  scale (1, -1);
  translate (0, -300);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom right quadrant
  push ();
  scale (-1, -1);
  translate (-400, -300);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();


//line sequence two
//top left quadrant
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  
//top right quadrant
  push ();
  scale (-1, 1);
  translate (-400, 0);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom left quadrant
  push ();
  scale (1, -1);
  translate (0, -300);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom right quadrant
  push ();
  scale (-1, -1);
  translate (-400, -300);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();

//curves
var c2 = height;
var c3 = width;
var c4 = height;
var spacing2 = map(mouseX, 0, width, 5, 15);

//curves
  noFill();
  stroke (0)
  strokeWeight (0.5);

  for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }

  push ();
  scale (1, -1);
  translate (0, -300)
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();

  push ();
  scale (-1, 1);
  translate (-400, 0);
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();
  
  push ();
  scale (-1, -1);
  translate (-400, -300);
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();

}

lrospigl_project3

var r;
var t;
var a = 100;
var headx;
var discox;
var p;

function setup() {
  createCanvas(640, 480)

}

function draw() {
  var x = mouseX + (width / 2);
  var y = mouseY;

  background(230, x, y);

  strokeWeight(0);
  fill(a, 200, 200);
  ellipse(r, t, 20, 20);
  ellipse(r * 2, t, 20, 20);
  ellipse(r / 2, -t, 20, 20);
  ellipse(r, t / 2, 20, 20);

  if (mouseIsPressed) {
    ellipse(r, t, 50, 50);
    r = random(20, 500);
    t = random(20, 460);
    a = random(1, 250);
  }

  //disco man
    //shirt
  fill(255);
  rect (headx - 15, 360, 130, 100, 20);
  
  //hair
  fill(40);
  arc(headx + 50, 250, 200, 200, PI-QUARTER_PI, TWO_PI+QUARTER_PI, CHORD);
  //neck
  fill(254, 213, 192);
  rect(headx + 35, 300, 30, 80, 20);
  //face
  fill(254, 213, 192)
  rect(headx, 250, 100, 100, 20);
  //glasses
  fill(0)
  arc(headx + 30, 290, 30, 30, TWO_PI, PI, CHORD);
  arc(headx + 70, 290, 30, 30, TWO_PI, PI, CHORD);
  rect (headx + 30, 290, 40, 5);


  fill(0, 102, 153, 51);
  text("click and drag mouse accross canvas", 5, 480);
  
  if (100 < mouseX & mouseX < (width - 100)) {
    headx = mouseX - 50;
  }
  strokeWeight (0.5)
  fill (255, mouseX)
  ellipse (p, 50, discox, discox)
  
  if (100 < mouseX & mouseX < (width/2)) {
    p = mouseX;
    discox = mouseX/3
  }
    if ((width/2) < mouseX & mouseX < (width - 100)) {
    p = mouseX;
    discox = (width - mouseX)/3
  }
}

The project I found is titled GROMPIES. It was created by a group of students that were experimenting with liquid plaster set in stitched lycra moulds. They made the made the model through a virtually generated model, and transferring the textile through sowing by hand and sowing with a machine following the pattern of the embroidery of the lycra. By puling and stretching the fabric in different ways, and by pouring the plaster onto it, they realized these odd forms.

I assume that the algorithms consisted of some random variables that helped achieve these curvilinear forms.

While the group did use a computer generated model, they took a lot of control once they used the patterns and shapes generated by the forms, to actually make the 3d model by hand.

Tumblr site (in Spanish)

Dezeen Article

Creators: Brendon Carlin – USA; Kyle Chou – Taiwan/Usalluis Enrique Monzo – Spain; Carlos Piles – Spain; Faysal Tabbarah – Syria

The project I looked at was Flight Patterns by Aaron Koblin. As I was scrolling through the list of projects, this one stood out to me. There was so much happening I couldn’t look away. Unfortunately, there wasn’t much information on the site to let me know how this project came to be. From what I found on the site, they put in information from the FAA into a program that allowed them to visualize the information. This to me is really interesting, mostly because it resembles the most to what we are taught in design about being able to translate quantitive information visually to communicate a certain aspect of it.

It is also incredible how beautiful the outcome of these numbers and patterns are. By giving a visual aspect of the information, it also gives a better understanding of exactly how much america uses planes in concentrated areas.

sketch

  var eyeSize = 20;
  var faceWidth = 170;
  var faceHeight = 170;
  var eyeColor = 150;
  var shirtColor = 150;
  
function setup() {
  createCanvas(400, 400);
}

function draw() {

  background(127, 155, 245);

  //hair
  strokeWeight(0);
  fill (138,109,90);
  rect (width/2 - (faceWidth/2) - 10, 
  height/2 - (faceHeight / 2) - 10, 
  faceWidth + 20, 
  faceHeight + 40, 30);
  
  //hairShadow
  strokeWeight(0);
  fill (121,96,79);
  rect (width/2 - (faceWidth/2), height/2 - (faceHeight / 2) - 10, 
  faceWidth, faceHeight + 40, 15);
  
  //neck
  strokeWeight(0);
  fill(239, 205, 182);
  rect (width/2 - 10, 200, 20, 200, 10);

  //neckshadow
  strokeWeight(0);
  fill(211, 179, 158);
  rect (width/2 - 10, 150 + (faceHeight / 3), 20, 100, 10);
  
  //head
  strokeWeight(0);
  fill(239, 205, 182);
  rect (width/2 - (faceWidth/2), height/2 - (faceHeight / 2), 
  faceWidth, faceHeight, 30);
  
  var eyeXpos = (width / 2 - faceWidth * 0.25);
  var eyeYpos = (width / 2 + faceWidth * 0.25);

  //eyes
  strokeWeight(1);
  arc(eyeXpos, height / 2, eyeSize, eyeSize, 0, 2*HALF_PI);
  arc(eyeYpos, height / 2, eyeSize, eyeSize, 0, 2*HALF_PI);

  //shirt
  strokeWeight(0);
  fill(76, shirtColor, 91);
  rect (width/2 - (faceWidth*1.2 / 2), 340,
  (faceWidth * 1.2), 80, 10);
  
  //smile
  
  fill (246,180,211); 
  arc(200, 200 + (faceHeight / 4), 
  (faceWidth/3), faceHeight/4, 0, 2*HALF_PI);
  
  //teeth
  fill (255,255,255);
  arc(200, 200 + (faceHeight / 4), 
  (faceWidth/3), faceHeight/10, 0, 2*HALF_PI);
  
  //eyebrows
  noFill ();
  strokeWeight(0.2);
  bezier(eyeXpos - 17, height / 2 - 10, 
  eyeXpos + 10, height / 2 - 20,
  eyeXpos + 10, height / 2 - 12,
  eyeXpos + 15, height / 2 - 10);
  
  bezier(eyeYpos - 17, height / 2 - 10, 
  eyeYpos + 10, height / 2 - 20,
  eyeYpos + 10, height / 2 - 12,
  eyeYpos + 15, height / 2 - 10);
  
  //bangs
  strokeWeight(0);
  fill (138,109,90)
  rect (width/2 - (faceWidth/2) + 2, 
  height/2 - (faceHeight / 2) - 10,
  faceWidth - 4, 
  faceHeight - (faceHeight/1.6), 10);
  
}

function mousePressed() {
  faceWidth = random(100, 200);
  faceHeight = random(100, 250);
  eyeSize = random(15, 30);
  shirtColor = random(0,150);
}

Laura R Portrait

//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Assignment-01
function setup() {
  createCanvas(600,600)
  background (125,155,245);
}

function draw() {
  background (125,155,245);
  //hair
  strokeWeight(0)
  fill (110,72,39)
  rect(140,140,320,400,70);
  
  strokeWeight(0)
  fill (110,72,39)
  rect(140,190,320,350,20);
  
  strokeWeight(0)
  fill (95,60,39)
  rect(180,190,240,350);
  
  //shirt
  strokeWeight(0)
  fill (0,0,0)
  rect(130,500,340,280,70);
  
  //neck
  strokeWeight(0)
  fill (254,213,192)
  rect(257,300,90,230,40);
  
  strokeWeight(0)
  fill (224,192,176)
  rect(257,300,90,170,50);
  
  //face
  strokeWeight(0)
  fill (254,213,192)
  rect(160,160,280,280,70);
  
  //eyes
  strokeWeight(0)
  fill (109,120,72)
  rect(230,240,20,35,10);
  
  strokeWeight(0)
  fill (109,120,72)
  rect(350,240,20,35,10);
  
  //nose
  fill (224,192,176)
  triangle(285, 320, 320, 320, 303, 305)
  /*
  //inner eyes
  strokeWeight(0)
  fill (0,0,0)
  rect(235,245,10,10,10);
  
  strokeWeight(0)
  fill (0,0,0)
  rect(355,245,10,10,10);
  */  
  
  //mouth
  fill (246,180,211) 
  //arc(300, 360, 70, 70, 0, HALF_PI+HALF_PI);
  arc(mouseX, mouseY, 70, 70, 0, HALF_PI+HALF_PI);
  
}