Project 11 Composition – Sara Frankel

sketch

var terrainSpeed = 0.00025; 
var terrainDetail = 0.001; 

function setup() {
    createCanvas(400, 200);
    frameRate(20); 

}

function draw() {
    background('lightblue');

    fill('orange');
    ellipse(width - 35, 35, 50, 50); //draws the sun

    noFill();
    beginShape(); //draws terrain at random of noise
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y);
        stroke('blue');
        line(x, y, x, height); //fills terrain so that it appears blue
    }
    endShape();

    duck(mouseX, y - 10, 20); //draws "duck" in the row with specific different radius
    duck(mouseX - 100, y - 10, 10);
    duck(mouseX - 150, y - 10, 5);
    duck(mouseX - 200, y - 10, 15);

    
}

function duck(dx, dy, radius) {
    var ttl1 = makeTurtle(dx + radius, dy - radius);
    ttl1.penDown(); //puts pen down
    ttl1.setColor('yellow');//color is yellow
    ttl1.setWeight(6);

    ttl1.left(90);//rotates circle so that starting point is to right of the duck

    var increments = radius * 10;//variable that gives way so that each radious of duck is in proportion of other

    for (i = 0; i < increments; i++) {
        d = 1;
        ttl1.forward(d);
        ttl1.left(360/increments);// completes circle     
    }

    ttl1.setColor('orange');//draws nose
    ttl1.forward(radius);
    ttl1.right(120);
    ttl1.forward(radius);
    ttl1.right(120);
    ttl1.forward(radius);
    ttl1.right(120);
    ttl1.forward(radius);

    stroke(0); //draws eye
    strokeWeight(6);
    point(dx, dy - radius - 5);

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

For my project, I went in knowing I wanted to draw ducks floating on water. I did so by using turtle graphics to draw the duck and its beak and using parameters, to change the radius/size of each duck. Imaged is a “Family of Ducks Swimming Together on A Nice Day”. Here is an image of what it might look like.