Project-11-Composition – Page 4 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

enwandu-Project 11- Composition

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

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

mstropka-Project-11-E

sketch

function setup() {
    createCanvas(400, 400);
    background(0);
    strokeJoin(MITER);
    strokeCap(PROJECT);

}

function mousePressed(){

  drawturtles(mouseX, mouseY);

}

function drawturtles() {
  var t1 = makeTurtle(mouseX + 20, mouseY);
  var t2 = makeTurtle(mouseX - 20, mouseY);
  var t3 = makeTurtle(mouseX, mouseY + 20);
  var t4 = makeTurtle(mouseX, mouseY - 20);

  t1.penDown;
  t2.penDown;
  t3.penDown;
  t4.pendown;
  for(var i = 0; i < 480; i++){
    stroke(random(0,255),0,0);
    t1.forward(random(0,40));
    t1.right (random(0, 180));
    t1.forward (random(0,40));

    stroke(random(0,255), random(0,255), random(0,255));
    t2.forward(random(0,40));
    t2.right (random(0, 180));
    t2.forward (random(0,40));

    stroke(random(0,255), random(0,255), random(0,255));
    t3.forward(random(0,40));
    t3.right (random(0, 180));
    t3.forward (random(0,40));

    stroke(random(0,255), random(0,255), random(0,255));
    t3.forward(random(0,40));
    t3.right (random(0, 180));
    t3.forward (random(0,40));


  }
}
function draw() {
  }


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

For this week’s assignment, I made a program in which four turtles are drawn around the mouse when it is clicked. They move forward and right by random increments until they move off of the canvas.

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.

myoungsh-project11-“OFF-PROJECT”

“MOUSE.PRESS”

sketch

var S = 25;
var M = 50;
var L = 200;
var pickColor;
function setup() {
  createCanvas(800,800);
  background(0);
}
function mousePressed() {
  pickColor = floor(random(0, 2));
  drawThing(mouseX, mouseY);
}
function drawThing(x, y) {
  strokeCap(PROJECT);
  T = makeTurtle(x, y); 
  T.setWeight(5);
  T.setColor(color(256, 256, 0));
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.right(90);
  T.forward(L);
  T.penDown();
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.right(90);
  T.forward(L/2+2);
  T.right(90);
  T.forward(L/2+2);
  T.penDown();
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.forward(2);
  T.right(90);
  T.forward(L);
  T.penDown();
  T.right(90);
  T.forward(S/2+2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
}
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;}

Project 11 – Yugyeong Lee

aerubin-Project-11-Composition

For this project, I was inspired by the intricacies of different snowflakes. Each snowflake is made out of a pattern that repeats throughout the design of the snowflake. I first made an initial leg of a snowflake, and afterward I put them into a for loop to make them repeat in a circular pattern to replicate a snowflake.

One of the Snowflake Designs that inspired my project

Attached are two images that inspired two of my snowflake designs. I am very pleased with the final result and I think I made it just in time for Pittsburgh’s first snow!

Another Snowflake Design that inspired my project

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-11-Playing with Turtles

//initial x and y positions of snowflakes
var x1 = 40;
var y1 = 10;
var x2 = 200;
var y2 = 50;
var x3 = 330;
var y3 = 50;
var x4 = 250;
var y4 = 200;

//velocities for snowflakes
var yvel1 = 1;
var yvel2 = .75;
var yvel3 = 1.5;
var yvel4 = .5;

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

function draw() {
    background(148, 164, 183);
    strokeJoin(MITER);
    strokeCap(PROJECT);

    //first snowflake on left
    var turtle = makeTurtle(x1, y1); //initial position of snowflake
    turtle.penDown();
    turtle.setWeight(1);
    turtle.setColor(255);
    var ed1 = 5;
    var ed2 = ed1 * 2;
    var ed3 = ed1 * 3;

    for (var i = 0; i < 6; i++) {
        turtle.right(25);
        turtle.forward(ed3-ed1);
        turtle.left(115);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(40);
        turtle.forward(ed2);
        turtle.right(40);
        turtle.forward(ed1+ed1);
        turtle.right(140);
        turtle.forward(ed2);
        turtle.left(140);
        turtle.forward(ed2-ed1);
        turtle.left(40);
        turtle.forward(ed2-ed1);
        turtle.right(75);
        turtle.forward(ed2+ed1);
        //after tip of snowflake
        turtle.right(105);
        turtle.forward(ed2+ed1);
        turtle.right(75);
        turtle.forward(ed2-ed1);
        turtle.left(35);
        turtle.forward(ed2-ed1);
        turtle.left(140);
        turtle.forward(ed2);
        turtle.right(140);
        turtle.forward(ed1+ed1);
        turtle.right(40);
        turtle.forward(ed2);
        turtle.left(40);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(115);
        turtle.forward(ed3-ed1);
        turtle.right(85);
    }
    turtle.penUp();
    turtle.right(60);
    turtle.forward(ed2);
    for(var n = 0; n < 6; n++) {
        turtle.penDown();
        turtle.left(30);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(120);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.penUp();
        turtle.right(90);
        turtle.forward(20);
        turtle.right(120);
    }

    //second snowflake in middle
    var turtle2 = makeTurtle(x2, y2); //initial position of snowflake
    turtle2.penDown();
    turtle2.setWeight(2);
    turtle2.setColor(255);
    var s1 = 6;
    var s2 = (s1 * 2)-2;
    var s3 = s1 * 5;

    for(a = 0; a < 4; a++) {
        turtle2.forward(s3);
        turtle2.back(s1);
        turtle2.left(50)
        turtle2.forward(s2)
        turtle2.back(s2);
        turtle2.right(110);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.right(120);
        turtle2.forward(s2+s1/3);
        turtle2.left(130);
        //start of inner diamond shape
        turtle2.forward(s2);
        turtle2.right(116);
        turtle2.forward(s2);
        turtle2.right(55);
        turtle2.forward(s3-s2-s1);
        turtle2.back(s3-s2-s1);
        turtle2.back(s3);
        turtle2.forward(s1);
        turtle2.left(130);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.left(100);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.left(130);
        turtle2.forward(s1);
        turtle2.right(130);
        turtle2.forward(s2+s1/2);
        turtle2.back(s2+s1/2);
        turtle2.right(100);
        turtle2.forward(s2+s1/2);
        turtle2.back(s2+s1/2);
        turtle2.right(130);
        turtle2.forward(s2+s2/1.3);
        turtle2.left(120);
        turtle2.forward(s2);
        turtle2.right(110);
        turtle2.forward(s2);
        turtle2.right(55);
        turtle2.forward(s2+s1/.8);
    }

    //third snowflake right
    var turtle3 = makeTurtle(x3, y3); //initial position of snowflake
    turtle3.setWeight(1);
    turtle3.setColor(255);

    var w1 = 5;
    var w2 = w1*2;
    var w3 = w1*7;
    var w4 = w1*3;
    var w5 = w1*4;
    var w6 = w1*8;
    var w7 = w1*6;

    for (m = 0; m < 6; m++) {
        turtle3.penUp();
        turtle3.left(180);
        turtle3.forward(w6);
        turtle3.right(45); //changes closeness of petals
        turtle3.penDown();
        turtle3.forward(w2);
        turtle3.right(90);
        turtle3.forward(w2);
        turtle3.left(110);
        turtle3.forward(w4);
        turtle3.right(65);
        //tip of snowflake
        turtle3.forward(w5);
        turtle3.right(90);
        turtle3.forward(w5);
        turtle3.right(60);
        turtle3.forward(w4);
        turtle3.penUp();
        turtle3.forward(w6);
    }
    //inner diamonds 
    turtle3.left(60);
    turtle3.forward(w1);
    turtle3.right(48);
    for(var q = 0; q < 6; q++) {
        turtle3.penDown();   
        turtle3.forward(w7);
        turtle3.left(50);
        turtle3.forward(w1);
        turtle3.left(90);
        turtle3.forward(w1);
        turtle3.left(53);
        turtle3.forward(w7);
        turtle3.penUp();
        turtle3.forward(w2+w1);
        turtle3.left(120);
        turtle3.forward(w2);
        turtle3.right(11);
    }

    //fourth turtle (smaller version of first snowflake)
    var turtle = makeTurtle(x4, y4); //initial position of snowflake
    turtle.penDown();
    turtle.setWeight(1);
    turtle.setColor(255);
    var ed1 = 4;
    var ed2 = ed1 * 2;
    var ed3 = ed1 * 3;

    for (var i = 0; i < 6; i++) {
        turtle.right(25);
        turtle.forward(ed3-ed1);
        turtle.left(115);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(40);
        turtle.forward(ed2);
        turtle.right(40);
        turtle.forward(ed1+ed1);
        turtle.right(140);
        turtle.forward(ed2);
        turtle.left(140);
        turtle.forward(ed2-ed1);
        turtle.left(40);
        turtle.forward(ed2-ed1);
        turtle.right(75);
        turtle.forward(ed2+ed1);
        //after tip of snowflake
        turtle.right(105);
        turtle.forward(ed2+ed1);
        turtle.right(75);
        turtle.forward(ed2-ed1);
        turtle.left(35);
        turtle.forward(ed2-ed1);
        turtle.left(140);
        turtle.forward(ed2);
        turtle.right(140);
        turtle.forward(ed1+ed1);
        turtle.right(40);
        turtle.forward(ed2);
        turtle.left(40);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(115);
        turtle.forward(ed3-ed1);
        turtle.right(85);
    }
    turtle.penUp();
    turtle.right(65);
    turtle.forward(ed2+2);

    //inner part of snowflake
    for(var n = 0; n < 6; n++) {
        turtle.penDown();
        turtle.left(30);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(120);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.penUp();
        turtle.right(90);
        turtle.forward(15);
        turtle.right(120);
    }

    //make snowflake 1 fall at rate of yvel1
    y1+=yvel1;

    //if snowflake falls beyond canvas, start again at the top
    if (y1>height+40) {
        y1 = 0;
    }

    //make snowflake 2 fall at rate of yvel2
    y2+=yvel2;

    //if snowflake falls beyond canvas, start again at the top
    if (y2>height+40) {
        y2 = 0;
    }

    //make snowflake 3 fall at rate of yvel3
    y3+=yvel3;

    //if snowflake falls beyond canvas, start again at the top
    if (y3>height+40) {
        y3 = 0;
    }

    //make snowflake 4 fall at rate of yvel4
    y4+=yvel4;

    //if snowflake falls beyond canvas, start again at the top
    if (y4>height+40) {
        y4 = 0;
    }

    //make the snow covered ground
    fill(255);
    ellipse(width/2, 400, 500, 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;
}

jooheek-Project11-Composition

eeryan-project-11-turtles

sketch

var t1;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(0);
    //initializes and sets the weight and color of 6 turtles
    t1 = makeTurtle(width / 2, height / 2);
    t1.setColor(color(255, 200, 200));
    t1.setWeight(2); 
    t1.penDown();
    t2 = makeTurtle(width/2, height/2);
    t2.setColor(color(0,0,255));
    t2.setWeight(2);
    t2.penDown();
    t3 = makeTurtle(width/2, height/2);
    t3.setColor(color(255,0,0));
    t3.setWeight(2);
    t3.penDown();
    t4 = makeTurtle(width/2, height/2);
    t4.setColor(color(0,255,0));
    t4.setWeight(1);
    t4.penDown();
    t5 = makeTurtle(width/2, height/2);
    t5.setColor(255);
    t5.setWeight(2);
    t5.penDown();
    t6 = makeTurtle(width/2, height/2);
    t6.setColor(color(255,255,0));
    t6.setWeight(1);
    t6.penDown();
    resetCanvas();
    frameRate(10);
}

function draw() {
    var s = second(); // makes a time based variable
    var step = (frameCount - startFrame)/30.0;//creates a varying amount to move forward
    var angle1 = -100/s;//creates different angles based on the second (time)
    var angle2 = 50/s;
    var angle3 = -100/(s * 2);
    var angle4 = 200/(s * 2);
    var angle5 = -180/(s * 3);
    var angle6 = 400/(s * 3);
    t1.forward(step);
    t1.left(angle1);
    t2.forward(step);
    t2.left(angle2);
    t3.forward(step);
    t3.left(angle3);
    t4.forward(step);
    t4.left(angle4);
    t5.forward(step);
    t5.left(angle5);
    t6.forward(step);
    t6.left(angle6);
}

function resetCanvas() {
    background(0);
    startFrame = frameCount;
}


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 originally started this by modifying my abstract clock project from week 6, because I had wanted to make an element like this but hadn’t known how to. Because the angle of the turtle is determined by a time based variable, as opposed to a for loop, the composition will generate differently based on what time you load it, which I found interesting. The screenshots below are the same code generated at different times.

dnam-project11

sketch

var circPositions = [33, 66, 132, 198, 264, 330]; //5 dots in the middle

function setup() {
  createCanvas(400, 400);
  background(0);
  frameRate(10); //reduce lag, choose frequency of updates
}

function draw() {
  fill(mouseX, mouseY, mouseY) //color interacts with mouse position
  for(var i = 1; i < 6; i++) { //create the dots
    ellipse(circPositions[i], 200, 10, 10);
  }
  for(var b = 1; b < 100; b++){ //create turtle lines / marks with loop
    var turtle = makeTurtle(circPositions[b], random(0, 400)); //set variable for turtle
     turtle.penDown();
     turtle.setColor(mouseX); //shade depending on the mouse position
     turtle.setWeight(0.1 * mouseY / 10); //changes weight depending on mouse position
     turtle.right(random(1, 360)); //mark changes depending on a random factor
     turtle.forward(3); //small mark
     
  if (mouseIsPressed === true) { //when mouse is pressed, make large web like lines
  makeTurtle(circPositions[b], 100);
  turtle.penUp();
  turtle.right(90);
  turtle.setWeight(1);
  turtle.penDown();
  turtle.forward(100);
}
     
  if (keyIsPressed === true){ //clear and reset canvas
       background(0);
}
}




// turtle graphics ----------------------------------------------
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 wanted to create something like a spider web using the turtle tool we were given. I allowed for two different types of art to be created. The results differ depending on the user and their mouse movements.