Category: Project-11-Composition

my-sketch.js

//Lan wei
//Section D
//lanw@andrew.cmu.edu
//Project-11

var img;
var repeatTime = 1; // time repeated before the painting is finished
var numEachTime = 10; // number of turtles in each repeat time
var randomYArrays = []; //nested arrays including Y in each repeat time
var randomY = []; //arrays of Y in each repeat time
var bri; //brightness of the pixel

function preload(){
    img = loadImage("https://i.imgur.com/9e7ATQI.jpg?1.jpg");
}

function setup() {
    createCanvas(450, 450);
    img.loadPixels();
    background(0);
    for (var i = 0; i < repeatTime; i ++){
        for (var j = 0; j < numEachTime; j ++){ //add "numEachTime" values in randomY
            randomY.push(random(0, height));
        }
        randomYArrays.push(randomY);
        randomY = [];
    }
    frameRate(1);
}

function draw() {
    for (var i = 0; i < repeatTime; i ++){
        randomY = randomYArrays[i];
        for (var n = 0; n < numEachTime; n ++){
            drawTurtle(-100, randomY[n]);
        }
    }
}

function drawTurtle(tx, ty){
    var ttl = makeTurtle(tx, ty);
    ttl.penDown();

    //step 1
    bri = brightness(img.get(ttl.x, ttl.y)); //brightness of the pixels
    ttl.setColor(map(bri, 0, 100, 255, 70));
    ttl.setWeight(map(bri, 0, 100, 1, 2)); //change light weight according to brightness
    ttl.forward(random(20, 50));

    //step 2
    for(var i = 0; i < 15; i ++){
        var angle = 0;
        while (angle < 30){
            var angleSingleTime = random(0, 20);
            ttl.left(angleSingleTime);
            bri = brightness(img.get(ttl.x, ttl.y)); //brightness of the pixels
            ttl.setColor(map(bri, 0, 100, 255, 70));
            ttl.setWeight(map(bri, 0, 100, 1, 2)); //change light weight according to brightness
            ttl.forward(random(1, 3));
            angle += angleSingleTime;
        }

        //step 3
        while (angle < 90){
            var angleSingleTime = random(0, 20);
            ttl.right(angleSingleTime);
            bri = brightness(img.get(ttl.x, ttl.y)); //brightness of the pixels
            ttl.setColor(map(bri, 0, 100, 255, 70));
            ttl.setWeight(map(bri, 0, 100, 1, 2)); //change light weight according to brightness
            ttl.forward(random(1, 3));
            angle += angleSingleTime;
        }

        //step 4
        while (angle < 120){
            var angleSingleTime = random(0, 20);
            ttl.left(angleSingleTime);
            bri = brightness(img.get(ttl.x, ttl.y)); //brightness of the pixels
            ttl.setColor(map(bri, 0, 100, 255, 70));
            ttl.setWeight(map(bri, 0, 100, 1, 2)); //change light weight according to brightness
            ttl.forward(random(1, 3));
            angle += angleSingleTime;
        }

        //step 5
        bri = brightness(img.get(ttl.x, ttl.y)); //brightness of the pixels
        ttl.setColor(map(bri, 0, 100, 255, 70));
        ttl.setWeight(map(bri, 0, 100, 1, 2)); //change light weight according to brightness
        ttl.forward(random(20, 50));
    }
}

/////////////////////////////////////////////////////////
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 planned to draw abstract ‘Sherlock’ with turtles. The process didn’t go smoothly. I tested different moving modes of the turtles and finally decided to use the one with some randomness but generally moving from the left of the canvas to the right. There are some aspects of the project that don’t reach my expectation (for example the nested loop might have some problems), but the result is good and the effect of old movie is kind of surprising.

Project-11

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project 11 Turtle Freesytle

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

var particles = [];

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

    // Making particles/"rain"
    for (var i = 0; i < np; i++) {
        var p = makeParticle(200, 200,
                             random(-50, 50), random(-50, 50));
        particles.push(p);
    }
    frameRate(10);
}

function draw() { 
    // Gradient green/grass background based on mouse
    var r = map(mouseX, 0, width, 70, 120); 
    var b = map(mouseY, 0, height, 90, 120);
    background(r, 170, b);

    // Center rose on mouse
    var ttl = makeTurtle(mouseX, mouseY);
    ttl.penDown();
    ttl.setColor("pink");
    ttl.setWeight(1);
    ttl.left(frameCount);
    ttl.face(190);

    for (var i = 0; i < 25; i++) {
        ttl.face(225 - i * 100);
        for (var j = 0; j < 6; j++) {
            ttl.forward(3 + i * 2);
            ttl.left(80);
        }
    }
    ttl.penUp();

    /// Left smaller rose 
    var ttl2 = makeTurtle(mouseX - 50, mouseY);
    ttl2.penDown();
    ttl2.setColor(150);
    ttl2.setWeight(1);
    ttl2.left(frameCount);
    ttl2.face(190);

    for (var i = 0; i < 10; i++) {
        ttl2.face(225 - i * 100);
        for (var j = 0; j < 6; j++) {
            ttl2.forward(2 + i * 2);
            ttl2.left(70);
        }
    }
    ttl.penUp();

    /// Right smaller rose 
    var ttl2 = makeTurtle(mouseX + 50, mouseY);
    ttl2.penDown();
    ttl2.setColor(150);
    ttl2.setWeight(1);
    ttl2.left(frameCount);
    ttl2.face(190);

    for (var i = 0; i < 10; i++) {
        ttl2.face(225 - i * 100);
        for (var j = 0; j < 6; j++) {
            ttl2.forward(2 + i * 2);
            ttl2.left(70);
        }
    }
    ttl.penUp();

    // Draw all particles in the array
    if (mouseIsPressed) {
        var newp = makeParticle(mouseX, mouseY,
                                random(-10, 10), random(-10, 0));
        particles.push(newp);
    }

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

}

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 = 100;      // how many particles
var COLORS = ["White", "#86E3F2", "#37A3B5", "#357CA8", "#14608E"];

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    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 < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * springy;
    }
    this.dy = this.dy + gravity; // force of gravity
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    var d = vs * drag;
    d = min(d, 1);

    // Repelling force from center rose
    var rpx = mouseX;
    var rpy = mouseY;
    var d2 = dist(rpx, rpy, this.x, this.y);
    var rpc = 9000;
    var f = rpc / (Math.pow(d2, 2));
    var dirx = (this.x - rpx) / d2;
    var diry = (this.y - rpy) / d2;
    // scale dx and dy to include drag effect
    this.dx *= (1 - d);
    this.dx += dirx * f;
    this.dy *= (1 - d)
    this.dy +=  diry * f;
}

function particleDraw() {
  fill(this.particleColor);
  noStroke();
  ellipse(this.x, this.y, this.particleSize, this.particleSize);
  point(this.x, this.y);
}

function pickColor() {
  return COLORS[int(random(COLORS.length))];
}

function pickSize() {
  return random(5, 30);
}

// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy) {
    p = {x: px,
       y: py,
         dx: pdx, 
         dy: pdy,
         age: 0,
         step: particleStep,
         draw: particleDraw,
         particleColor : pickColor(),
         particleSize : pickSize(),
        }
    return p;
}

I created this project with a flower garden in mind: there are rose-like shapes created using turtle, a green, grass-like background, and many blue, rain-like particles. There is a force around the center rose that repels the rain.