Category: Section D

enwandu-Project 11- Composition

sketch

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Assignment-11: Freestyle Turtles

// Global Variables
var d = 150;
var x = 50;
var y = 300;

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

function setup(){
    createCanvas(400, 400);
    background(0);

    var t1 = makeTurtle(x, y);
    var t2 = makeTurtle(x, y);
    var t3 = makeTurtle(x, y);
    var t4 = makeTurtle(x, y);
    var t5 = makeTurtle(x, y);
    
// Controls the color and lineweight of the meanders
     t1.setColor(255);
     t1.setWeight(2);
     t2.setColor(255);
     t2.setWeight(2);
     t3.setColor(255);
     t3.setWeight(2);
     t4.setColor(255);
     t4.setWeight(2);
     t5.setColor(255);
     t5.setWeight(2);

     // Drwas the different meanders
     // meander1(t1);
     // meander2(t2);
     meander3(t3);
     meander4(t4);
     meander5(t5);
}

// Creates path of first stage
function meander1(t1){
    t1.left(60);
    t1.forward(d);
    t1.right(60);
    t1.forward(d);
    t1.right(60);
    t1.forward(d);
}
// Creates path of second stage
function meander2(t2){
    t2.forward(d/2);
    t2.left(60);
    t2.forward(d/2);
    t2.left(60);
    t2.forward(d/2);
    t2.right(60);
    t2.forward(d/2);
    t2.right(60);
    t2.forward(d/2);
    t2.right(60);
    t2.forward(d/2);
    t2.right(60);
    t2.forward(d/2);
    t2.left(60);
    t2.forward(d/2);
    t2.left(60);
    t2.forward(d/2);
}
// Creates path of third stage
function meander3(t3){
        t3.left(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4)
        t3.left(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.left(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
        t3.right(60);
        t3.forward(d/4);
}
// Creates path of fourth stage
function meander4(t4){
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8)
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.right(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
    t4.left(60);
    t4.forward(d/8);
}
// Creates path of fifth stage
function meander5(t5){
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16)
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.left(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
    t5.right(60);
    t5.forward(d/16);
}

I was inspired the Sierpinski Triangle, and the result of my code is meant to be an abstracted version, with a similar idea. I wanted to challenge myself, so I was originally looking into ideas of recursion to draw the Sierpinski Triangle, along with the turtle graphics, but unfortunately after a while it went beyond what I was capable of. I chose to keep going with the idea, and abstract it, in the hope that sometime in the future I will learn (which I did), and possibly rework the code some day to make what I originally set out to. However, I think this is still a pretty interesting graphic. I commented out the first two meanders.

Sierpinski’s Triangle

dnoh-sectionD-project11-composition

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

creyes1-Project-11-Composition

creyes1 Project-11 (Turtle Composition)

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-11 (Turtle Free Style)

var turtleV; //Vertical grid
var turtleH; //Horizontal grid

var vertOffset = 40;
var horOffset = 5;

var rectHeight = 0;

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

function draw() {

    //Background white
    noStroke();
    fill(255);
    rect(0, 0, width, height);

    //Blue sun
    noStroke();
    fill(211, 255, 250);
    ellipse(width/2, height/2, 200, 200);

    //Turtle Grid, changes color when close to cursor
    //vertical
    turtleV = makeTurtle(0, 0);
    turtleV.penDown();
    while (turtleV.x < width) {
        turtleV.vertical();
    }
    turtleV.penUp();

    //Horizontal
    turtleH = makeTurtle(0, 0);
    turtleH.penDown();
    while(turtleH.y < height) {
        turtleH.horizontal();
    }
    turtleH.penUp();

    //Curtain, slowly falls after loading
    noStroke();
    fill(229, 249, 247);
    rect(0, rectHeight, width, height);
    fill(192, 216, 214);
    rect(0, rectHeight, width, 50);
    fill(192, 216, 214);
    rect(0, rectHeight + 70, width, 10);
    rectHeight += 5;
}

//Vertical Turtle Grid, changes color when close to cursor
//From RGB(92, 93, 141) to RGB(153, 161, 166);
function verticalWave() {
    this.right(90);
    for (var i = 0; i < 479; i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 92, 153),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 93, 161),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 141, 166)];
        this.forward(1);
    }

    this.left(90);

    for (var i = 0; i < vertOffset+(i/10); i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 92, 153),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 93, 161),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 141, 166)];
        this.forward(1);
    }

    this.left(90);

    for (var i = 0; i < 479; i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 92, 153),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 93, 161),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 141, 166)];
        this.forward(1);
    }

    this.right(90);

    for (var i = 0; i < vertOffset+(i/10); i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 92, 153),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 93, 161),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 141, 166)];
        this.forward(1);
    }


}

//Vertical Turtle Grid, changes color when close to cursor
//From RGB(168, 198, 159) to RGB(204, 226, 163);
function horizontalWave() {
    for (var i = 0; i < 479; i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 168, 204),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 198, 226),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 159, 163)];
        this.forward(1);
    }
    this.right(90);
    for (var i = 0; i < horOffset+(i/10); i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 168, 204),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 198, 226),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 159, 163)];
        this.forward(1);
    }

    this.right(90);
    for (var i = 0; i < 479; i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 168, 204),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 198, 226),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 159, 163)];
        this.forward(1);
    }
    this.left(90);
    for (var i = 0; i < horOffset+(i/10); i++) {
        this.color = [map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 168, 204),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 198, 226),
                      map(dist(mouseX, mouseY, this.x, this.y), 0, 125, 159, 163)];
        this.forward(1);
    }
    this.left(90);
}


//Turtle Graphics Functions-----------------------------------------------------
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,
                  vertical: verticalWave,
                  horizontal: horizontalWave};
    return turtle;
}

I’m not as pleased with this project as I am with my previous ones, as I found myself constantly limited to the framerate – a lot of my ideas (turtle overlay sampling the color of each pixel of an image, varying thickness based on an underlying image by pixel, a much tighter grid than the one you see now) either caused the frame rate to tank, or got the program hung up in loading. Even so, I do like the idea I put forth here, and as I learn how to make more efficient code, potentially revisit this and make it what I had hoped it would turn out to be. Making this iteration wound up to be a lot of trial-and-error to more fully understand what was causing my previous iterations of this project to fail, so it definitely forced me to be more aware of the code that I was writing, and to consider what I was demanding out of the program.

NatalieKS-LookingOutwards-11

This is a video of a performance using The Reactable in Turin, Italy, 2009.

—

The Reactable is an electronic instrument created in 2003 by a research team in Pompeu Fabra University in Barcelona, Spain. The system has an interactive interface, where players can place and move objects. These objects, when placed on the interface and connected to other objects, play different sounds. The instrument utilizes the various sound waves and synthesizers connected to the objects to display the sounds on the interface. By moving and reconnecting different objects together, players can create unique compositions of various sounds. While I’m not sure specifically what algorithms the researchers used, I understand they utilized samples and soundbites and programmed physical objects to be able to interact with and produce those sounds.

This product is especially cool because it is a new instrument. You can use it to create songs or sound effects, and the multi-purpose aspects of it make it really accessible and fun. I love how it is first-and-foremost designed to entertain, and how user-focused it is. Not only does it feature an interesting set of sounds and controls, it utilizes those sounds to create a visual composition upon the interface.

Fun Fact: Icelandic musician Björk incorporated this instrument into her world tour performances in 2008-2009.

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.

jennyzha – project 11

sketch

// Jenny Zhang
// jennyzha@andrew.cmu.edu
// Section D 
// Project 11

function setup() {
    createCanvas(480, 380);
    background(165,236,250);

//making the hilly background

    noStroke();
    fill(0,255,0);
    ellipse(300,380,650,650);

    noStroke();
    fill(0,200,0);
    ellipse(100,380,550,550);

    noStroke();
    fill(178, 255,102);
    ellipse(400,380,850,350);
}

function mousePressed(){
    
    var flower = makeFlower(mouseX,mouseY); //creates flowers wherever you click 
    flower.setColor(color(random(220,255),random(50,255),random(50,100))); //sets random colors ranging from red to orange to yellow
    flower.setWeight(1) //sets the weight for the lines of the flowers
    var size = random(1,15); //setting random sizes for the flowers
   
    for(var i = 0; i < 1000; i++) {
        flower.penDown();
        flower.forward(size);
        flower.right(30);
        flower.forward(size);
        flower.right(30);
        flower.forward(size);
        flower.right(30);
        flower.forward(size);
        flower.right(30);
        flower.forward(size);
        flower.right(30);
        flower.forward(size);
        flower.penUp();
        flower.right(100);
        flower. right(30);
        flower.setWeight(1);    
    }
}

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 makeFlower(tx,ty){
  var turtle={x:tx,y:ty,angle:0.0,penIsDown:true,color:color(0),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 created a hilly spring terrain, where the user’s clicks create flowers wherever they click. With each click, the color is varied randomly between colors of red to yellow, as are the sizes. I kept the stroke weight consistent since when varied, if it is too thick the large flowers look too blurry and when too thin you can’t see them as well.

aboyle-Project-11-Composition

aboyle composition

//Anna Boyle
//Section D
//aboyle@andrew.cmu.edu
//Project 11


var turtle;
var red=0;
var green=0;
var blue=0;
var lineWeight=6;

function setup() {
    createCanvas(480, 400);
    background(255)
    turtle = makeTurtle(0,height/2)
//creates borders to make it more ms paint-ish
    strokeWeight(2);
    line(width, 0, width, height);
    line(0, 0, 0, height);
    line(0, 0, width, 0);
    line(0, height, width, height)
//creates text
    textSize(10);
    text("M.S. Paint: Turtle Edition", 10, 20)
  }

//draws the line
function draw() {
    drawLine();
}

//function to draw the line
function drawLine(){
  //variable colors
    turtle.setColor(color(red, green, blue));
  //variable line weight
    turtle.setWeight(lineWeight);
  //makes the turtle constantly move toward the mouse
    turtle.forward(2);
    turtle.turnToward(mouseX, mouseY, 8);
}

function keyPressed(){
//press enter to restart turtle
   if (keyCode === ENTER){
      turtle = makeTurtle(mouseX,mouseY)
      drawLine();
//press up to make line thicker
    } if (keyCode === UP_ARROW){
      lineWeight++
      drawLine();
//press down to make line thinner
    } if (keyCode==DOWN_ARROW){
      lineWeight=lineWeight-1;
      drawLine();
    }
}

//type the first letter of a color to turn the line that color
//or in the case of black, the second letter

function keyTyped(){
    if (key === 'b'){
      blue = 255;
      red = 0;
      green = 0;
      drawLine();
    } if (key === 'r'){
      red = 255;
      blue = 0;
      green = 0;
      drawLine();
    } if (key === 'g'){
      green = 255;
      red = 0;
      blue = 0;
      drawLine();
    } if (key === 'y'){
      red = 255;
      green = 255;
      blue = 0;
    } if (key === 'p'){
      red = 145;
      green = 0;
      blue = 255;
    } if (key === 'o'){
      red=255;
      green=145;
      blue=0;
    } if (key=== 'l'){
      red = 0;
      green = 0;
      blue = 0;
    } if (key === 'w'){
      red=255;
      green=255;
      blue=255;
    }
}

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

When thinking of an idea for this project, I thought about other drawing tools that I’ve used in the past. Eventually I got the idea to make this project visually emulate at least some aspects of MS Paint. In my final code, the turtle draws a line that constantly follows the mouse. You can make the line thicker and thinner, change the color, or restart the turtle with a different starting point. I added borders and text to drive home the visual similarities. When playing around with it, I couldn’t help but remember scribbling on MS Paint, so I think this one was a success. You can see screenshots of some scribbles I created below.

Playing around with color:

Playing around with restart:

Playing around with thickness:

All of the above:

Project-11-Composition-Chickoff

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project-11

function setup() {

    createCanvas(480, 480);
    background(200, 99, 88);

    textSize(15);
    fill(217, 255, 255);
    text("Click the Canvas!", 10, 20);
   
    r = random(255);

      //lilac "spider legs"
      var t1 = makeTurtle(width/2, height/2);

      t1.setColor(color(179, 178, 134, 3));
      t1.setWeight(10);

    for (var p = 0; p < 100; p++) {

        t1.forward(p*3);
        t1.penDown();
        t1.right(147);
        t1.penUp();
        t1.penDown();

    //creates more dense "spider legs"
    for (var i = 0; i < width; i++) {

        t1.forward(6);
        t1.left(120);
        t1.right(90);
        t1.forward(90);
    }

    //creates less dense/sparser "spider legs"
    //(these are the circular shapes, which are not angular)
    for (var i = 0; i < width; i++) {

        t1.forward(6);
        t1.left(5);
        t1.right(9);
        t1.forward(6);
    }

        t1.penUp();

  } 
   
}

function mousePressed() {

    r = random(109);
    //dark red clouds
    var t2 = makeTurtle(mouseX, mouseY);

    t2.setColor(color(r, 0, 0, 35));
    t2.setWeight(30);

      for (var i = 0; i < 30; i++) {
          
          t2.forward(10);
          t2.forward(23);
          t2.right(random(1, 180));
          t2.forward(20);
          t2.right(78);

      }
      
      //light blue lines
      var t3 = makeTurtle(mouseX, mouseY);

      t3.setColor(color(191, 230, 255, 20));
      t3.setWeight(2);

    for (var p = 0; p < 100; p++) {

        t3.right(random(14, 26));
        t3.forward(.5);
        t3.right(random(3, 40));
        t3.forward(200);

    }
}

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

When I began this project, I aimed to enjoy myself because the concept of Turtle Graphics is inherently fun. I knew that I wanted the program to be interactive, so I integrated the mousePressed function so that every time the user clicked, they would create these cloud/berry-shaped turtles. To make things more interesting, I added a randomness factor to the color and shape so that the canvas would never be uniform and the user would still have fun seeing what new turtles they create.

LookingOutwards-11-Chickoff

In this week’s Looking Outwards post, I’d like to focus on two examples of sound art and computational music, mainly focusing on a specific artist first (whose project fits into the sound art option more than the computational music option). This artist is named Cevdet Erik, a Turkish artist and musician.

A particular work of his, SSS – Shore Scene Soundtrack / SSS – Sahil Sahnesi Sesi, is a sound installation in which the participant moves and slides their hands along a carpet in massage-like movements which cause the sound of the ocean to play. Typically putting his works in site-specific locations, Erik uses his knowledge from his studies of architecture and sound design and explores themes such as rhythm, time, and space in his work.

Still from SSS – Shore Scene Soundtrack / SSS – Sahil Sahnesi Sesi

What I really love about this sound installation is that it is based on user experience. Sound doesn’t just happen to you—you’re the source. I find that this project of Erik’s helps people feel more in touch with their bodies as fluid organisms rather than something that just helps them get around.

Lastly, I wanted to mention that I found out about this Artificial Intelligence named Aiva that was created to compose soundtracks for films, video games, tv shows, and commercials. Aiva was taught to compose classical music specifically. It was fascinating to many that the pieces created were still emotionally touching, and surprised audiences that an entity that is not human is capable of doing so: https://newatlas.com/creative-artificial-intelligence-computer-algorithmic-music/35764/

Looking Outwards 11

I chose to look at a film called ODDSAC made by the band Animal Collective in 2010. In the video above, I skipped to the part where the digital art shows up and where I most enjoyed it. The play between the visuals and the sound really caught my attention because I can’t tell whether the sound is informing and driving the visual, or vice versa. When reading about the film, Animal Collective talks about how some of the music involved in the film was inspired by the art made by the director, Danny Perez, which I think is reflected in segment I highlight from the movie. The back and forth between what inspired what.