## dnoh-sectionD-project12-projectproposal

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.

## dnoh-sectionD-project11-composition

``````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 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”.

## dnoh-sectionD-lookingoutwards11

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.

## dnoh-sectionD-project10-landscape

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

var planes;
var clouds = [];

var planeImage = "https://i.imgur.com/bQ0w1cU.png"
}

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);

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

image(planes, 0, 0);
}

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);
}
}

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
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);
pop();
push();
translate(this.x, height/1.15+40);
pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
var cloud = {x: cloudX,
y: cloudY,
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.

## dnoh-sectionD-lookingoutwards10

Chole Varellidi

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.

## dnoh-sectionD-lookingoutwards-09

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.

## dnoh-sectionD-project8-portrait

(edited to change sketch size)

click to change direction pixels come from.

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

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

var picurl = "https://i.imgur.com/ABZ50uF.jpg";
}

function setup(){
createCanvas(400,400);
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.

## dnoh-sectionD-lookingoutwards08

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.

## dnoh-sectionD-lookingoutwards-07

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.

## dnoh-sectionD-project7-curves

``````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);

beginShape();
for (var i = 0; i < nPoints; i++) {