Month: November 2016

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

sketch-sihan

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 11: Project turtle

var gravity = 0.3;   // downward acceleration
var springy = 0.7; // how much velocity is retained after bounce
var drag = 0.0001;    // drag causes particles to slow down
var np = 50;      // how many particles
var turtleColor = [];

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    stroke(this.dr, this.dg, this.db);
    strokeWeight(this.dw);
  
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx * springy;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx * springy;
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy * springy;
    } else if (this.y < 80) { // bounce off top
        this.y = 80 - (this.y - 80);//-this.y;
        this.dy = -this.dy * springy;
    }
    this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dy and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    // d goes up with velocity squared but can never be
    // so high that the velocity reverses, so limit d to 1
    d = min(d, 1);
    // scale dx and dy to include drag effect
    this.dx *= (1 - d);
    this.dy *= (1 - d);

}

function particleDraw() {
    point(this.x, this.y);
}


// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy, pr, pg, pb, pw) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy, 
         dr: pr, dg: pg, db: pb,
         dw: pw,
         age: 0,
         step: particleStep,
         draw: particleDraw
        }
    return p;
}

var particles = [];


function setup() {
    createCanvas(500, 500);
    frameRate(8);
    turtleSlope = new makeTurtle(0, 0);

}


function draw() {
  background(184, 197, 245);

  //draw the chains
	for (i = 0; i < 25; i++) {
    turtleSlope.penUp();
    turtleSlope.right(30);
    turtleSlope.setColor(255);
    tSlope(20*i, 70); //1
    turtleSlope.setColor(0);
    tSlope(width/2, height/2-20); //2
    turtleColor[i] = color(random(100, 255), random(100, 255), random(100, 255));
    turtleSlope.setColor(turtleColor[i]);
    tSlope(100*i, 370); //3
    fill(0); 
	}

    if (mouseIsPressed) {
        var newp = makeParticle(mouseX, mouseY,
                                random(-10, 10), random(-10, 0), 
                                255, 255, 255,
                                random(10, 30));
        particles.push(newp);
    }

    newParticles = [];
    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.step();
        p.draw();
        if (p.age < 200) {
            newParticles.push(p);
        }
    }
    
    particles = newParticles;

}

function tSlope(lx, ly){
	turtleSlope.goto(lx, ly);
  turtleSlope.setWeight(4);
  turtleSlope.right(90);
  turtleSlope.forward(random(7));//the amount of fluctuation
  
  turtleSlope.penDown();
  turtleSlope.left(60);
  turtleSlope.forward(10);
  turtleSlope.right(60);
  turtleSlope.forward(10);
  turtleSlope.right(30);
  turtleSlope.forward(17.3);
  turtleSlope.right(120);
  turtleSlope.forward(17.3);
  turtleSlope.right(30);
  turtleSlope.forward(10);
  turtleSlope.right(60);
  turtleSlope.forward(10);
  turtleSlope.right(30);
	turtleSlope.penUp();

}

//========== 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 turtleSetColor(c) {
    this.color = c;
}
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
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, 
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  };
    return turtle;
}

I’ve wanted to experiment with how turtle moves so I did so with this project. The turnout is not exactly ideal and I will continue practicing with turtles.

I also experimented with the particles because I think their movements are fascinating.

For this project I’m interested in the dynamic shapes that the turtle graphic is able to produced. I selected a spiral base shape and users can click on the canvas to generate the geometry in different sizes.

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//11-Project



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

}

function mousePressed(){
    alpha += 50;
    //randomly select the number of rotates the basic geometry will go
    var numRotate = random(30,60);
    //randomly choose the initial strokeWeight for turtle
    var strokeWei = random(0.2,1);
    //base the size of the graph on the number of rotation
    var size = map(numRotate,30,60,80,200);
    //base the initial gradient of stroke on the position of x
    var color = round(map(mouseX, 0, width, 150,200));

    //create a turtle at the position where the mouse is pressed
    var turtle1 = makeTurtle(mouseX,mouseY,color,strokeWei);

    //set the decrement unit for color and stroke weight
    var intervStro = turtle1.weight/numRotate;
    var intervCol = turtle1.color/numRotate;

    //generate the spiral
    for (var counts = 0; counts < numRotate; counts++){
        turtle1.penDown();
        turtle1.color -= intervCol;
        turtle1.weight -= intervStro;
        //draw square
        for (var j = 0; j<4; j++){
            turtle1.forward(size-counts*2);
            turtle1.right(90);
        }
        turtle1.left(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, tColor,tStroke) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: tColor,
                  weight: tStroke,
                  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 is one of the image I created.

sketch

//Lydia Jin
//Section D
//jialuj@andrew.cmu.edu
//Project 11
var myTurtle1;
var flag=false;
function setup(){
    createCanvas(600,600);
    background('black');
    //create 5 turtles that does different things
    myTurtle1=new makeTurtle();
    noLoop();
    }
function draw(){

    strokeJoin(MITER);

    myTurtle1.setColor('silver');
    myTurtle1.setWeight(2);
    //draw stars
    for (i=0;i<50;i++){
      ellipse(random(width),random(height),3,5);
    }
}
//draws constellation when mouse pressed
function mousePressed(){
  noStroke();
  fill('silver');
  var x=mouseX;
  var y=mouseY;
  ellipse(x,y,8,8);
  stroke(0);
  if (flag==false){
      myTurtle1.penDown();
      myTurtle1.goto(x,y);  
  } else{
    //resets the pen
    flag=false;
    myTurtle1.penUp();
    myTurtle1.goto(x,y);
  }
  
        
}
//resets the status when key is pressed
function keyPressed(){
    if (flag==false){
      flag = true;
    } 
}

//////////////////////////////////////////////////////////////////////////////////////////////
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 canvas represents a night sky in the universe. The user can create constellations using the turtle by clicking the mouse and connecting the dots. Once you finish one drawing, you can press any key and start on a new constellation. Below are two finished drawings:

sketch

/*Liu Xiangqi Section A xiangqil@andrew.cmu.edu Assignment-10-A*/
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);
   
    
}

function draw() {
     background(0);

    var turtle5 = makeTurtle(mouseX, 200);
    turtle5.penDown();
    turtle5.setColor(255);
    turtle5.setWeight(6);
    turtle5.penDown();
    
        turtle5.face(-90);
        turtle5.forward(200-mouseY);
        turtle5.face(0);
        turtle5.forward(35);
        turtle5.face(90);
        turtle5.forward(25);
        turtle5.face(180);
        turtle5.forward(15);
        turtle5.face(-90);
        turtle5.forward(10);
        turtle5.face(0);
        turtle5.forward(7);
        turtle5.face(-90);
        turtle5.forward(7);
        turtle5.face(180);
        turtle5.forward(18);
        turtle5.face(90);
        turtle5.forward(200-mouseY-8);
        turtle5.face(0);
        turtle5.forward(40);
        
    
}