Category: Project-11-Composition

jmmedenb-Project 11

jmmedenb-011c

//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Section C 1:30PM
//Assignment 011-C

var turtles = [];
var heart;
function setup() {
    strokeWeight(20);
    var colors =[ color(113, 222, 241),
        color(175, 230, 51), color(183, 140, 255), color(150,20,150)];

    createCanvas(550, 550);


    for(i = 0; i < colors.length; i++){ // creates multiple turtles
        var turt = makeTurtle(325,400);
        turt.setColor(colors[i]);
        turt.penDown
        turtles.push(turt);
    }
}



function draw() {
    background(0);
    fill(0);
    strokeWeight(4);
    
   var heart =makeTurtle(325,100);

   for (b=0; b<width;b++){
    heart.forward(100);
    heart.right(45);
    heart.forward(100);
    heart.right(45)
    heart.forward(100);
    heart.right(50);
    heart.forward(200);

   
   }
   

    for(i = 0; i < turtles.length; i++){
        turtles[i].forward(50);
        turtles[i].left(100);
        turtles[i].forward(50);
        turtles[i].right(50);
        turtles[i].forward(50);
        turtles[i].right(50);
        //if(turtles[i].distanceTo(300, 300) > 300){
            //turtles[i].goto(300, 300);
        //}

        for(m = 0; m < turtles.length; m++){
        turtles[m].forward(25);
        turtles[m].left(50);
        turtles[m].forward(25);
        turtles[m].right(25);

         for(x = 0; x < turtles.length; x++){
        turtles[x].forward(5);
        turtles[x].left(10);
        turtles[x].forward(5);
        turtles[x].right(5);

    
    }
}
}
   
}

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 project, I wanted to experiment with using turtles and colors as well as geometric shapes. I liked creating a more rigid grey geometric shape with movement and color within it.

project 11

sketch

//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a 
//project 11


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

    frameRate(10);
}

function draw() {

    for (var i=0;i<30;i++) {
        strokeWeight(15);
        stroke(220-i);
        line(0,i*15,width,i*15);
    }//background color

    push();
    var turtle = makeTurtle(0, 45);
    turtle.penDown();
    turtle.setColor(255);
    turtle.setWeight(3);
    strokeJoin(MITER);
     strokeCap(PROJECT);
    var i = 0;
    while ( i < width) {
        i++;
        turtle.left(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(30);
        turtle.right(90);
        turtle.forward(20);
        turtle.right(90);
        turtle.forward(10);
        turtle.right(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(20);
        turtle.left(90);
        turtle.forward(30);
        turtle.left(90);
        turtle.forward(40);

    }
    noLoop();
    turtle.penUp();
    pop();//upper frame

    push();
    var turtle = makeTurtle(0, height-5);
    turtle.penDown();
    turtle.setColor(255);
    turtle.setWeight(3);
    strokeJoin(MITER);
     strokeCap(PROJECT);
    var i = 0;
    while ( i < width) {
        i++;
        turtle.left(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(40);
        turtle.right(90);
        turtle.forward(30);
        turtle.right(90);
        turtle.forward(20);
        turtle.right(90);
        turtle.forward(10);
        turtle.right(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(10);
        turtle.left(90);
        turtle.forward(20);
        turtle.left(90);
        turtle.forward(30);
        turtle.left(90);
        turtle.forward(40);

    }
    noLoop();
    turtle.penUp();
    pop();//bottom frame
    
    
}

function mousePressed()  {
    var turtle = makeTurtle(mouseX, mouseY);
    turtle.penDown();
    turtle.setColor(255);
    for (var i = 0; i < 20; i++) {
        turtle.forward(50);
        turtle.right(137.5);
        turtle.forward(50); 
    }
    turtlePenUp();
    //make random turtles

}



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 project I tried to use turtle to create some abstract graphic that could interact with mouse motion. I use the turtle to make frames and another turtle to follow the mouse movement. whenever the mouse is pressed, a new turtle is drawn.

%e5%be%ae%e4%bf%a1%e6%88%aa%e5%9b%be_20161112235419

Turtle Composition

This is a doodle of mine that I have doodled in the corners of my notebooks and sketchbooks since my freshman year of high school. I was very excited to be able to doodle it in code!

data-width=’600′ data-height=’400′ index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

data-width=’600′ data-height=’400′ sketch

//Arula Ratnakar
//Section C
//Turtle Composition
//aratnaka@andrew.cmu.edu




function setup() {
	createCanvas(600, 400);
    background(255);
    var turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setColor(0);
    turtle.setWeight (4)
    	turtle.left(90)
    	turtle.forward(145)
    	turtle.right(135)
    	turtle.forward(16)
    	turtle.right(135)
    	turtle.forward(100)
    	turtle.right(90)
    	turtle.forward(16)
    	turtle.right(90)
    	turtle.forward(16)
    	turtle.right(90)
    	turtle.forward(75)
    	turtle.right(135)
    	turtle.forward(16)
    	turtle.right(135)
    	turtle.forward(150)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(100)
    	turtle.left(135)
    	turtle.forward(16)
    	turtle.left(135)
    	turtle.forward(11.313708499)
    	turtle.forward(63.686291501)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(20)
    	turtle.forward(120)

    turtle.penUp()


   
    
}

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

AndrewWang-Project-11

sketch

var myTurtles = [];
var img;
function preload(){
    img = loadImage("https://i.imgur.com/eQWbexS.png");
}
function setup() {
    createCanvas(600, 400);
    var turtle = new makeTurtle(width/2, height/2);
    turtle.setColor("yellow");
    turtle.setWeight(4);
    myTurtles.push(turtle);
    strokeJoin(MITER);
    strokeCap(PROJECT);
   
}
function mousePressed(){
    //creates new turtle on mouse click
    var ranColor = random(0,255);
    px = random(0,width);
    py = random(0,height);
    turtle = new makeTurtle(px,py);
    turtle.setColor('yellow');
    turtle.setWeight(4);
    myTurtles.push(turtle);
}

function draw() {
    //draws image
    background(255);
    image(img, 0, 0, 600, 400);
    //draws firefly 
    for(i=0; i<myTurtles.length; i++){
        myTurtles[i].penDown();
        drawTurtles(myTurtles[i]);
        myTurtles[i].penUp();
    }
}

function drawTurtles(turtle){
    //draws a firefly
    angle = random(-90,90);
    distance = random(0,3);
    turtle.right(angle);
    turtle.forward(distance);
}
////////

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 replicate the effect of fireflies using the turtles. I made them move randomly and change direction randomly in order to do this over a dark relevant background.

project-11

For this project I decided I wanted to play around with how turtles worked and what they could look like, so I didn’t start out with anything specific in mind. I ended up with someone that looks almost like electricity – it reminded me of a plasma globe!

The screenshots of it don’t look very cool, you really have to view it in motion.

This does not look cool.
This does not look cool.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 11
*
*/

var turtles = [];
function setup() {
    var colors =[color(250, 45, 125), color(113, 222, 241),
        color(175, 230, 51), color(183, 140, 255), color(255), color(253, 162, 35)];

    createCanvas(600, 600);

    for(i = 0; i < colors.length; i++){ // creates multiple turtles
        var turt = makeTurtle(width/2,height/2);
        turt.setColor(colors[i]);
        turt.penDown
        turtles.push(turt);
    }
}

function draw() {
    background(0);
    fill(0);
    ellipse(300, 300, 300, 300);

    for(i = 0; i < turtles.length; i++){
        turtles[i].forward(random(50));
        turtles[i].left(random(100));
        turtles[i].forward(random(50));
        turtles[i].right(random(50));
        if(turtles[i].distanceTo(300, 300) > 300){
            turtles[i].goto(300, 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;}

Shannon Case Project 11

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//Project 11



function setup() {
    createCanvas(600, 600);
    background('#230133');
}


function draw() {
    background('#230133');

    var rot = map(mouseY, 0, width, 130, 137.507764);

    var turtle = makeTurtle(width/2, height/2); //center turtle
    var turtle2 = makeTurtle(width/2, height/2);
    var turtle3 = makeTurtle(width/2, height/2);

if (mouseX < 200){
        turtle.penDown();
        turtle.setColor('#7100a5'); //purple turtle
    for (var i = 0; i < 300; i++) { //draw many turtles

        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        //draw the hexagons
        turtle.penUp(); //stop drawing

        turtle.forward(i); //move out by incriment
        turtle.left(rot); //move around the golden angle

        turtle.penDown(); //draw again
        }
    }

else if ( mouseX > 200 & mouseX < 400){     
    turtle2.penDown();
    turtle2.setColor('#d09de8');
    for (var i = 0; i < 400; i++) { //draw many turtles

        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        //draw the hexagons
        turtle2.penUp(); //stop drawing

        turtle2.forward(i); //move out by incriment
        turtle2.left(rot); //move around the golden angle

        turtle2.penDown(); //draw again
        }
    }

else if ( mouseX > 400 & mouseX < 600){ 
    turtle3.penDown();
    turtle3.setColor('#e4dce8');
    for (var i = 0; i < 500; i++) { //draw many turtles

        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        //draw the hexagons
        turtle3.penUp(); //stop drawing

        turtle3.forward(i); //move out by incriment
        turtle3.left(rot); //move around the golden angle

        turtle3.penDown(); //draw again
        }
    }

}


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 project I chose to work with the golden ratio turtle graphic that we did for the last assignment. I thought it would be cool to map this to the mouse Y positions to create different spirals. I then made three different turtles so that as you move across the mouse X positions you can play with varied sizes of turtle spirals. screen-shot-2016-11-12-at-8-47-25-pmscreen-shot-2016-11-12-at-8-47-59-pm

Project 11 Freestyle – Sofia Syjuco

sketch

//Sofia Syjuco
//section A
//smsyjuco@andrew.cmu.edu
// Assignment - 11- c

var turtle1;// create a turtle

function setup(){
    createCanvas(700,400);// create a canvas
    turtle1 = makeTurtle(width/2,height/2);// make the first turtle
}
function draw(){
  
    background(235,100,210,10); // fill the background with white
    turtle1.penDown();// start drawing
    turtle1.setColor(255); //set the color to white
    turtle1.setWeight(5);// weight to 6
    

    turtle1.turnToward(mouseX, mouseY, 30);// turn the turtle towards the mouse
    turtle1.forward(1);// move the turtle forward
}

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

week-11-screenshot

I spent a long time tinkering with the turtle trying to figure out exactly how to turn it towards the mouse, and it was such a relief to discover it was actually pretty simple! From there it was just tweaking certain numbers and values, and trying to get an interesting result.

owen fox project 11

 

turtle

//Owen Fox
//olf@andrew.cmu.edu
//Section C
//Project Week 11

var progress = 0;

//color values
var r = 0;
var g = 0;
var b = 0;
//constant
var c = 50;
//where the gradient stops and the color UI begins
var ylimit = 90;

function setup() {
    createCanvas(400,400);
    background("white");
}


function draw() {

   //draws a turtle square at every 3 by 3 pixels
    for (var x = 0; x < width/3; x ++) {
        for (var y = 0; y < width/3; y ++) {
            if (y < ylimit) {
            turtleSquare(r - x,g - x,b,x*3,y*3);
            }
        }
    }

    //prints colot values as text
    textAlign(CENTER);
    textSize(14);
    fill("white");
    text("red:" + r, c, height- c);
    text("green:" + g, width/2, height- c);
    text("blue:" + b, width - c, height- c);

}

function mouseClicked() {
    //whenever a user clicks on the three text graphics created in draw, they will change the value of the color by + 10
    if ((mouseX > c/2) & (mouseX < c + c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
        background("white");
        r += 10;
    }
    if ((mouseX > width/2 - c/2) & (mouseX < width/2 + c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
        background("white");
        g += 10;
    }
    if ((mouseX > width - c - c/2) & (mouseX < width - c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
        background("white");
        b += 10;
    }
}

function turtleSquare(r,g,b,x,y) {
    //uses turtle graphics to draw a 3 by 3 square
    var turtle = makeTurtle(x,y);
    turtle.setColor(color(r,g,b))
    turtle.setWeight(3);
    turtle.penDown();
    turtle.forward(3);
    turtle.right(90);
    turtle.forward(3);
    turtle.right(90);
    turtle.forward(3);
    turtle.right(90);
    turtle.forward(3);
    turtle.penUp();
}



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

uses small turtle squares to create a user generated gradient.

clicking on the color labels changes their value.

gradient-2gradient-1

Hannah K-Project 11

sketch-60.js

var turtle1;
var turtle2;
var turtle3;
var turtle4;
var turtle5;
var turtle6;
var turtle7;
var turtle8;
var turtle9;

function setup() {
    createCanvas(500, 500);
    turtle1 = makeTurtle(120, 60);
    turtle2 = makeTurtle(110, 230);
    turtle3 = makeTurtle(120, 350);
    turtle4 = makeTurtle(250, 75);
    turtle5 = makeTurtle(260, 210);
    turtle6 = makeTurtle(250, 375);
    turtle7 = makeTurtle(400, 60);
    turtle8 = makeTurtle(390, 230);
    turtle9 = makeTurtle(400, 350);
}


function draw() {

    // Draw the frame
    fill(255, mouseX, mouseY);
    rect(0, 0, width-1, height-1);

    // Creating turtle 1 / 9
    turtle1.penDown();
    turtle1.setColor(0); 
    for (var i = 0; i < 500; i++) {
        turtle1.forward(10);
        turtle1.right(50);
        turtle1.forward(40);
        if (i % 10 === 0) {
          turtle1.forward(15);
        }
    }

    // Creating turtle 2 / 9
    turtle2.penDown();
    turtle2.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle2.forward(10);
        turtle2.right(65);
        turtle2.forward(40);
        if (i % 10 === 0) {
          turtle2.forward(15);
        }
    }

    // Creating turtle 3 / 9
    turtle3.penDown();
    turtle3.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle3.forward(10);
        turtle3.right(50);
        turtle3.forward(40);
        if (i % 10 === 0) {
          turtle3.forward(15);
        }
    }

    // Creating turtle 4 / 9
    turtle4.penDown();
    turtle4.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle4.forward(10);
        turtle4.right(65);
        turtle4.forward(40);
        if (i % 10 === 0) {
          turtle4.forward(15);
        }
    }

    // Creating turtle 5 / 9
    turtle5.penDown();
    turtle5.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle5.forward(10);
        turtle5.right(50);
        turtle5.forward(40);
        if (i % 10 === 0) {
          turtle5.forward(15);
        }
    }

    // Creating turtle 6 / 9
    turtle6.penDown();
    turtle6.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle6.forward(10);
        turtle6.right(65);
        turtle6.forward(40);
        if (i % 10 === 0) {
          turtle6.forward(15);
        }
    }

    // Creating turtle 7 / 9
    turtle7.penDown();
    turtle7.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle7.forward(10);
        turtle7.right(50);
        turtle7.forward(40);
        if (i % 10 === 0) {
          turtle7.forward(15);
        }
    }

    // Creating turtle 8 / 9
    turtle8.penDown();
    turtle8.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle8.forward(10);
        turtle8.right(65);
        turtle8.forward(40);
        if (i % 10 === 0) {
          turtle8.forward(15);
        }
    }


    // Creating turtle 9 / 9
    turtle9.penDown();
    turtle9.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle9.forward(10);
        turtle9.right(50);
        turtle9.forward(40);
        if (i % 10 === 0) {
          turtle9.forward(15);
        }
    }

}


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

This week for my project, I decided to make several repeating turtles with a changing background. It kind of reminds me of the pattern we had to create for a project in a past week. It was fun revisiting the use of turtles, and I enjoyed making turtles that looked totally different from the meanders we created for the assignment last week. I think the changing background adds a cool visual effect, and it was something I came up with during the course of making this project. I did not really start this project with an exact plan, like I usually do, but I enjoyed it nonetheless and feel much more comfortable using turtles now.

Project 11

screen-shot-2016-11-11-at-11-41-42-pmscreen-shot-2016-11-11-at-11-41-50-pm

I really enjoyed this project.  I liked being able to add in the color changing functions because it added variety and made the turtle design a bit more engaging. sketch

var turtle;
var startFrame;

var r = 235;
var g = 200;
var b = 200;
var x = 300;
var y = 300;

function setup() {
    createCanvas(600, 600);
    background(0);
    x = mouseX;
    y = mouseY;
    turtle = makeTurtle(430,100);
    turtle.setColor(color(r,g,b));
    stroke(r,g,b);
    fill(r,g,b);
    turtle.setWeight(1); 
    turtle.penDown();
    frameRate(10);
}

function draw(){

    for (var i = 0; i < 100; i++) {
        if(i %2){
        r = r - random(0,.08);
        g = g - random(.03,.06);
        b = b - random(.01,.2);
    }
        turtle.setColor(color(r,g,b));
        turtle.forward(90);
        turtle.right(80.5);
        turtle.forward(60);
        if (i % 50 === 0) {
            turtle.forward(200);
        }
    }         
}

function mousePressed(){
    background(0);
    r = random(0,255);
    b = random(0,255);
    g = random(0,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;}