Author: dversace@andrew.cmu.edu

Project 05 – Wallpaper

sketch

// Deklin Versace Section E
var patX = 120;
var patY = 120;

function setup() {
    createCanvas(900, 900);
    background(238, 195, 246);
    var xSpace = -30;
    var ySpace = 110;
    noStroke();

    for (var y = 0; y < 7; y++) {
      if (y % 2 === 0) {
        for (var x = 0; x < 12; x++) {
            var sety = ySpace + y * patY;
            var setx = xSpace + x * patX;
            drawHead1(setx, sety, random(1, 90));
        }
      } else {
          for (var x = 0; x < 11; x++) {
            var sety = ySpace + y * patY;
            var setx = xSpace + x * patX;
            drawHead1(setx + patX / 2, sety, random(1, 90));
          }
      }
    }
    noLoop();
}

function drawHead1(centerX, centerY, rotation) {
  fill(173, 60, 70);
  ellipseMode(CENTER);
  ellipse(centerX, centerY, patX, patY);
  ellipse(centerX, centerY - patY / 2, patX / 5, patY / 5);
  ellipse(centerX - patX / 7, centerY - patY / 2, patX / 6, patY / 6);
  ellipse(centerX + patX / 7, centerY - patY / 2, patX / 6, patY / 6);
  fill(89, 22, 22);
  triangle(centerX, centerY + patY / 3, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  fill(117, 40, 53);
  triangle(centerX, centerY - patY / 4, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  triangle(centerX, centerY + patY / 5, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  fill("white");
  ellipse(centerX - patX / 5, centerY - patY / 6, patX / 5, patY / 5);
  ellipse(centerX + patX / 5, centerY - patY / 6, patX / 5, patY / 5);
  fill("black");
  ellipse(centerX + patX / 5, centerY - patY / 6, patX / 8, patY / 8);
  ellipse(centerX - patX / 5, centerY - patY / 6, patX / 8, patY / 8);
}

Looking Outwards – 05

In my sophomore year of high school, I was introduced to the program SketchUp, a tool used for rending 3d environments in a 2d view. The program was built for the use of architecture and design, in fact, when I first learned of it my assignment was to build a playground using the 3d shapes found in SketchUp. It allows the user to create both basic and complex shapes on multiple axes. Initially published by Trimble Inc, SketchUp has a variety of different versions for different audiences, with the most extensive being used with actual design projects. The one I am more familiar with, is the free version, which still boasts an impressive number of tools suitable for creating complex 3d spaces.

Looking Outwards – 04

A rather unconventional way of generating sound digitally I have seen many times throughout the past through years is actually the composition of music through the use of a level creation engine in the game Super Mario Maker released in 2015. After many programmers discovered how certain objects functioned, they learned to manipulate them to create music. A specific item that can be placed in a level called a note block makes a different sound when each different object type in the game makes contact with it, and as the screen follows the main character, the blocks are generated, making music. Based on where vertically the block is placed, the pitch will change, and the tone is based on what is placed above it. This has been used to create compositions up to a minute long.

https://www.youtube.com/watch?v=j20wi8-Wlq4

Project 4 – String Art


sketch

var x1;
var x2;
var y1;
var y2;
var x1ss;
var y1ss;
var x3;
var x4;
var y3;
var y4;
var y2ss;
var x5;
var y5;

function setup() {
  createCanvas(300, 400);
  background (0);
  x1 = 0;
  y1 = 0;
  x1ss = 10;
  y1ss = 50;
  x2 = x1 + x1ss;
  y2 = y1 + y1ss;
  x3 = 0;
  y3 = 400;
  x1ss = 10;
  y1ss = 50;
  x4 = x1 + x1ss;
  y4 = y1 + y1ss;
}
function draw() {
  noFill();
  stroke(255);
  strokeWeight(1);
  line(x1, y1, x2, y2);
  x1ss = x1ss * 1.35;
  y1ss = y1ss * 1.3;
  x2 = x1 + x1ss;
  y2 = y1 + y1ss;
  y2ss = -y1ss;

  stroke("red");
  strokeWeight(1);
  line(x3, y3, x4, y4);
  x4 = x3 + x1ss;
  y4 = y3 + y2ss;

  stroke("pink");
  strokeWeight(1);
  line(x2 - x1, y2 - y1, y2- y1, x2 - x1);

  stroke("grey")
  line(300 - x2, 400 - x2, x4 / 3, y4 / 3);
}

Project 03 – Dynamic Drawing


sketch

// Deklin Versace Section E
var eyeX = 700;
var eyeY = 250;
var diameter = 75;
var r = 100;
var g = 50;
var b = 50;
var handY = 500;
var handX = 375;

function setup() {
    createCanvas(900, 900);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

function draw() {
  background(r, g, b);
  noStroke();
  fill(r - 60, g - 60, b - 60);
  quad(width / 2 - 150, eyeY, width / 2 + 150, eyeY, 485, 900, 415, 900);
  fill(r - 60, g - 60 ,b - 60);
  ellipseMode(CENTER);
  ellipse(width / 2, eyeY, eyeX + abs(700 - eyeX), abs(450 - eyeX / 3));
  headH = abs(450 - eyeX / 3);
  headW = eyeX + abs(700 - eyeX);
  fill(240);
  ellipse(eyeX, eyeY, diameter, diameter);
  ellipse(width - eyeX, eyeY, diameter, diameter);
  if(mouseX > 650 || mouseX < 250 || (mouseX > 400 & mouseX < 500)){
    eyeX = eyeX;
  }   else{
      eyeX = mouseX;
  }

  fill(r - 100, g - 100, b - 100);
  bezier((width / 2) - (headW / 5), eyeY + 50, (width / 2) - (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + 50);


  strokeWeight(60);
  stroke(r - 50, g - 50, b - 50);
  line(width / 2 - 100, 420, width / 2 - 250, 420 + ((handY - 420) / 2));
  line(width / 2 + 100, 420, width / 2 + 250, 420 + ((handY - 420) / 2));
  stroke(r - 40, g - 40, b - 40);
  line(width / 2 - 250, 420 + ((handY - 420) / 2), handX, handY);
  line(width / 2 + 250, 420 + ((handY - 420) / 2), 900 - handX, handY);
  if(mouseX > 100 & mouseX < 410)
  handX = mouseX;
  else{
  handX = handX;
  }
  if(mouseY < 700){
    handY = mouseY;
  } else{
  handY = 700;
}
}
function mousePressed() {
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
}

Looking Outwards – 03

A piece of digital fabrication that interests me is the FIBERBOTS program at MIT. Given that I am new to the world of coding and have had little exposure to it prior to this year, my view of its possibilities were more limited to the digital scale. As this semester first challenged what I thought code was possible of doing in the 2D scale, reading about FIBERBOTS. What this tool is capable of is shocking to me, and seeing the artful, yet practical forms they are designed to create opens me up to possibilities and functions in programming that I had never applied to art or design before.

Assignment – 02 – Visual Harmonies


sketch


function setup() {
    createCanvas(600, 300);
    background(200, 150, 100);
    noStroke(0);
    var one = 50;
    var two = 2 * one;
    var three = 3 * one;
    var four = 4 * one;
    fill(250);
    ellipse(200 - (one / 2), 50 + (one / 2), one, one);
    fill(0);
    rect(200, 50 + one, one, three);
    fill(100);
    rect( 200, 50, three, one);
    fill(250);
    ellipse(200 + two, 50 + (2.5 * one), two, three);
    fill(200);
    rect( 200 + three, 50, two, two);
    fill(50);
    rect( 200 + three, 50 + two, two, two);
    fill(250);
    triangle( 200 + four + one, 50, 200 + four + one, 50 + four, 200 + two + four, 50 + two);
}

Project – 02 – Variable Face

sketch


function setup () {
  createCanvas(600, 600);
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
}
function draw() {
  background(255 - r, 255 - g, 255 - b);
  fill(r, g, b);
  noStroke(0);
  ellipse(300, 300, headW, headH);
  ellipse(cheekLX, cheekY, headW / 2, headH / 2);
  ellipse(cheekRX, cheekY, headW / 2, headH / 2);

  fill(240);
  ellipse(eyeLX, eyeY, headW / 5, headH / 5);
  ellipse(eyeRX, eyeY, headW / 5, headH / 5);
  fill(230 - r, 230 - b, 230 - g);
  ellipse(eyeLX + (headW / 40), eyeY + (headH / 40), 30, 30);
  ellipse(eyeRX - (headW / 40), eyeY + (headH / 40), 30, 30);
  fill(r - 100, g - 100, b - 100);
  bezier(cheekLX, cheekY, cheekLX + headW / 4, cheekY + headH / 4, cheekRX - headW / 4, cheekY + headH / 4, cheekRX, cheekY);

  fill(r - 30, g - 30, b - 30);
  ellipse(300, 300, noseW, noseH);
  ellipse(300 - (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
  ellipse(300 + (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
}

function mousePressed() {
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
}

Looking Outwards – 02

One piece of generative art that has always amazed me is the game by Mossmouth studios titled Spelunky. Initially a browser game, it was defined by its dungeon structure program, which built a large 4 by 4 for room for each level, building a cohesive and constantly different game as you play through its 16+ levels. The game itself is an excellent work of programming and code design, but its most impressive feature is how the game knows how it creates a path within its trap filled, maze like dungeon algorithm to create a fun, non confusing experience for the player that allows them to explore and move forward in their own way. The code is variable enough to create a new experience each time you play, but not too confusing where the player feels lost. The algorithm plays such a huge role in the experience, but it is overshadowed by the unique visuals and immersive music.

https://store.steampowered.com/app/239350/Spelunky/