Project Name — Subject to Change:  The Snowman
Project Partner: Jihee Kim (jiheek1 – section D)

For our project we intend to make a vertical “shooter” game (more emphasis on dodging). The plot of the game is a snowman who does not want to die and tries to avoid the snow which will, obviously, make it bigger and eventually cause him to explode… The snowman can dodge the snow that is coming down to hit him, however, he has a special move where he can throw his nose (a carrot) to hit the snow every 10 (also subject to change) seconds. The game will have a gauge that will show the carrot loading back and a counter at the bottom of the canvas that shows the number of snowballs that have hit the snowman. At the end of each level (every 30 seconds), the snow will fall faster… there will be 10 levels. Also, whenever the snowballs hit the snowman, something ominous in the background will happen (i.e. an avalanche goes off in the mountain in the background). After 10 snowballs hit the snowman, the snowman will explode and a game over screen, the level you have reached, and a sign that tells you how to replay the game will show.

sketch

var t1;
var t2;
var t3;
var t4;
var t5;
var t6;

function setup() {
    createCanvas(480,480);
    background(0);
      t1 = makeTurtle(0, 1*height/6);
      t2 = makeTurtle(0, height/2);
      t3 = makeTurtle(0, 5*height/6);
      t4 = makeTurtle(0,height);
      t5 = makeTurtle(0,0);
      t6 = makeTurtle(width, 1*height/2);
      t7 = makeTurtle(0, 2*height/6);
      t8 = makeTurtle(0, 4*height/6);
}

function draw() {
  followingDraw();
}
//the fucntion below creates turtles that constantly turn towards the mouse, creating a snake-like effect
function followingDraw (){
  t1.penDown();
  t1.setColor(255);
  t1.forward(2);
  t1.turnToward(mouseX, mouseY, 10);

  t2.penDown();
  t2.setColor(255);
  t2.forward(2);
  t2.turnToward(mouseX, mouseY, 10);

  t3.penDown();
  t3.setColor(255);
  t3.forward(2);
  t3.turnToward(mouseX, mouseY, 10);

  t4.penDown();
  t4.setColor(255);
  t4.forward(2);
  t4.turnToward(mouseX, mouseY, 10);

  t5.penDown();
  t5.setColor(255);
  t5.forward(2);
  t5.turnToward(mouseX, mouseY, 10);

  t7.penDown();
  t7.setColor(255);
  t7.forward(2);
  t7.turnToward(mouseX, mouseY, 10);

  t8.penDown();
  t8.setColor(255);
  t8.forward(2);
  t8.turnToward(mouseX, mouseY, 10);


//this is the lone red line from the right
  var red = color(255,0,0);
  t6.penDown();
  t6.setColor(red);
  t6.forward(2);
  t6.turnToward(mouseX, mouseY, 10);
}

function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I thought that this project was quite simple, yet a created a very alluring graphic. I honestly just went for this project without any sketches, only knowing that I wanted to create lines that either followed by mouse or ran away from it. However, after reaching this point of the project I didn’t really see a point in adding more, because I thought that would ruin the effect of the simplicity of the project. Finally, although it wasn’t intentional I thought that the circles that are often formed by quickly moving the mouse back and forth created a notion that the “piece” generated by the program was finished, thus becoming an “artwork generator”.

Project: Generating Music with RNN

This project is similar to what I wrote about in Looking Outwards 4. By using the same programming logic as the one I previously wrote about (Reoccurring Neural Networks), a program was able to come up with the final “composed piece” at the end of the video. The program first took many samples of Bach’s pieces. Then, the program analyzed it and created a random “piece” as its first iteration. Through the samples it was provided, it slowly “improved” to match melodies and chords more similar to that of the original samples to create a whole new piece in the style of Bach.

Honestly, I couldn’t really find an interesting computational music project that was not already written about, so I went with this one. There seems to be no artistic mind behind this because it was literally all computer generated without any specific parameters.

However, before I looked into this project, I remembered a YouTuber called Andrew Huang. He creates a lot of music through many audio samples he records and edits/organizes each file into different harmonies and sounds. I found this to be fascinating, however not very computational, as it is basically creating music manually.

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project 10

var planes;
var clouds = [];

function preload() {
	//loading plane image
	var planeImage = "https://i.imgur.com/bQ0w1cU.png"
	planes = loadImage(planeImage);
}

function setup(){
  createCanvas(360,480);
  //create clouds inital
  for (var i = 0; i < 45; i++){
    var rd = random(width);
    clouds[i] = makeClouds(rd);
  }
  frameRate(30);
}

function draw(){
  var a = color(53,47,73);
  var b = color(113, 85, 52);
  backGradient(0, width, a, b);

  makeSun();
  updateCloud();
  removeCloud();
  addCloud();

  image(planes, 0, 0);
}

//creates a gradient color
function backGradient (y, x, a, b) {
    for (var i = y; i <= height; i++) {
      var mid = map(i, y, y+x, 0, 1);
      var c = lerpColor(a, b, mid);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+x, i);
	}
}

//creates a blinking sun
function makeSun() {
  for (var i = 0; i < 10; i++) {
    var number = random(7,10); //makes the opacity vary
    var transparency = 60 - number*i;
    fill (220, 200, 120, transparency);
    ellipse(width/2, height/2+60, 150+20*i, 150+20*i);
  }
	//the actual sun center circle
  noStroke();
  fill(220, 200, 120);
  ellipse(width/2, height/2+60,150,150);
}

//updates the clouds so they move and show
function updateCloud(){
  for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

//gets rid of clouds that pass the screen
function removeCloud(){
  var cloudsKeep = [];
  for (var i = 0; i < clouds.length; i++){
    if (clouds[i].x + clouds[i].breadth > 0){
      cloudsKeep.push(clouds[i]);
    }
  }
  clouds = cloudsKeep;
}

//adds clouds at a random interval, replacing the ones that are removed
function addCloud(){
  var newCloudPercent = 0.2;
  if (random(0,1) < newCloudPercent){
    var cloudX = width;
    var cloudY = random(height/1.2);
    clouds.push(makeClouds(width));
  }
}

//adds velocity to the clouds, making them move
function cloudMove(){
  this.x += this.speed;
}

//this is the things that make the cloud
function displayCloud(){
  var cloudHeight = 5;
  var cHeight = this.nCloud*cloudHeight;

  noStroke();
  fill(255, this.opaque);
  push();
  translate(this.x, height/1.15);
  ellipse(0, -cHeight, this.breadth, cHeight/1.5);
  pop();
  push();
  translate(this.x, height/1.15+40);
  ellipse(30, -cHeight, this.breadth, cHeight);
  pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
	var cloud = {x: cloudX,
				y: cloudY,
				breadth: random(50, 100),
				speed: -random(1, 3),
				nCloud: round(random(10,23)),
				opaque: random(80, 90),
				move: cloudMove,
				display: displayCloud}
	return cloud;
}

I started with a simple idea that an airplane was passing through in the skies. At first I imagined birds passing by, but quickly realized that birds don’t really exist that high up in the air. Therefore, I stuck with simple clouds that changed opacity and a sun that blinked in the sky. I created this sketch:

on illustrator and used that as the overlay that would envelope the moving clouds and blinking sun.

Chole Varellidi

Project: Minicade

This project seems to be a very simple project in general. However, the innovative idea, as well as the beauty in the graphics hooked me on. The idea behind is project was to create a website that allows people to make a playlist of simple coded minigames. Chole Varellidi is an artist and programmer who has worked with Mozilla and is currently working at littleBits. She graduated with a B. Architecture and a Masters in Fine Arts. I feel more so inclined to this person because I am in architecture and desire to work in something like Varellidi–graphics with a bit of technology.

Student: Ryu Kondrup
Looking Outwards 2

As a student in architecture, I do find this project (Alex Dragulescu) very intriguing. It fascinates me how spatial qualities can be so easily generated through computation. However, although the image on Ryu’s post is very picturesque and beautiful, it seems, in my opinion, that half of the mass is not spatial. Nonetheless, I find the project very interesting.

It is very interesting how so many different shapes could be created through, quoted from Ryu, “bothersome digital flotsam”, also known as spam mail.

(edited to change sketch size)

click to change direction pixels come from.

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project-09

//global variables
var squares = [];
var direction;
var side;


function preload(){
    var picurl = "https://i.imgur.com/ABZ50uF.jpg";
    pic = loadImage(picurl);
}

function setup(){
    createCanvas(400,400);
    pic.loadPixels();
    background(0);
    direction = 30; //setting up initial values of the variables to start
    side = 0;
}



function drawsquares() {
    var ix = constrain(floor(this.x), 0, width-1);
    var iy = constrain(floor(this.y), 0, height-1);
    var colourXY = pic.get(this.x, this.y);//gets fill colour from image

    fill(colourXY);//fills with pixel colour
    noStroke();
    rect(this.x, this.y, this.size, this.size);
}


function movesquares() {//function to make the squares roll
    this.x += this.dx*0.1;
}

function portrait(px, py, pdx) {
    s = {x: px,
         y: py,
         dx: pdx,
         squares: drawsquares,
         speed: movesquares,
         size : random(1,3)//randomizes the size of each individual square
        }
    return s;
}
function draw(){
    noStroke();
    newlines = []; //empty array to hold lines
    for (var i=0; i<squares.length; i++){
        var s = squares[i];
        s.speed();//returns function speed
        s.squares();//returns function squares
        newlines.push(s);
    }
    squares = newlines;
}

function mousePressed(){//changes the side and the direction of the lines each time mouse is pressed
    direction = -1*direction;
    if (side == 0){
        side = 400;
    }
    else if (side == 400){
        side = 0;
    }

}
function mouseMoved() {
    var newsquare = portrait(side, mouseY, random(direction));
    squares.push(newsquare);
}

The initial idea for this sketch was to create a portrait that slowly appeared from the sides. However, to integrate the mouse, I made the pixels appear where mouseY is and made clicking change whether the pixels appeared from the right or left.

This is not the complete portrait, however this shows the code’s aesthetics better.

Person: Kyle McDonald

Kyle McDonald terms himself as an “artist working with code”. He, I believe, is based on Los Angeles, California and studied computer science and art.

Honestly, I didn’t find his presentation to be too great, both content and presentation wise. First of all, he did not even have a presentation ready, rather he had folders with images and videos he showed to the audience through the Macbook’s preview function. But I guess, as he emphasized in the beginning of his speech, this was a more “informal presentation”. However, after looking through a couple of his projects, I was captured by his creativity and coding sense.

For example, he had an installation/project in Korea and Japan where he connected the two countries through facial recognition. I found it intriguing that he, someone who had experimented with facial swapping since at least 2011, was able to develop his knowledge within this field enough to categorize and match people so fluidly through merely positioning and expressions.

Much like this installation he had projects that made a computer force a person to draw themselves in contour (blind) where the program and machine moved the hand of the person based on what facial features and shape the machine was able to grasp.

Project: Ross Spiral Curriculum

By: Moebio Labs

When I first saw this diagram/informational system I did not understand whatsoever what it stood for. However, the moment I saw it, the form and colors just caught my eye. This beautiful diagram demonstrates basically a curriculum that weaves different subjects and assignments into a spiral that is organized from K to 12th grade. I suppose that the creator of this diagram put classes into a certain category, then organized them into specific age levels, then put them into a spiral.

Seeing that this was put into a 3D diagram made it far more impressive as it became an interactive map, rather than simply a diagram.

sketch

var nPoints = 100;

function setup() {
    createCanvas(480, 480);
    background(255);
}

function draw() {
  angleMode(DEGREES);
  var r = map(mouseX, 0, width, 0, 360); //rotate using x axis
  var m = map(mouseY, 0, height, 0, 360); //rotate using y axis

  background(255);
  push();
  translate(width/2, height/2); //move Epicycloid to center
  rotate(r);
  rotate(-m);
  drawEpicycloid(); //draws the function below
  pop();

}

function drawEpicycloid() {
  var a = 50; //set sizes of curves
  var b = 50;
  var aa = map(a,0,50,50,mouseX-350);
  var bb = map(b,0,50,50,mouseY-350);

  fill(220,180,165); //add butt color

  beginShape();
  for (var i = 0; i < nPoints; i++) {
    angleMode(RADIANS);
    var t = map(i,0,nPoints,0,TWO_PI); //map the points to a circular area

    x = (aa+bb)*cos(t)-bb*cos((t*(aa+bb))/bb);
    y = (aa+bb)*sin(t)-bb*sin((t*(aa+bb))/bb);
    vertex(x,y);
  endShape(CLOSE);
  }
}

I started with a basic code that let me create the simplest Epicycloid, which is basically in the form of a butt. I, therefore, took that notion and turned the shape’s color to skin tone. However, I added parameters that allowed me to change the rotation and overall shape of the Epicycloid using mouseX and mouseY. All in all, due to the randomness of the mouseX and mouseY alterations, I loved how I could stop anywhere along the square and it would procure a different shape.