Category: Section C

Project-11

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-11

// global variables
var maze;
var character = [];
var brightnessThreshold = 10; // low threshold bc working with black background

// color variables
var redR = 255;
var redG = 96;
var redB = 95;

var pinkR = 255;
var pinkG = 184;
var pinkB = 255;

var cyanR = 2;
var cyanG = 255;
var cyanB = 255;

var orangeR = 255;
var orangeG = 184;
var orangeB = 82;

// array with color r,g,b values
var randomCol = [redR, redG, redB, pinkR, pinkG, pinkB, cyanR, cyanG, cyanB, orangeR, orangeG, orangeB]

function preload() {
    maze = loadImage("https://i.imgur.com/hGU36Hn.png") // load maze image
}

function setup() {
    createCanvas(480, 323);
    image(maze, 0, 0, 480, 323);
    maze.loadPixels();

    for (var a = 0; a < 6; a ++) { // create 6 hexagonal character in the maze
        if (a < 3) { // positions for character startion left on maze
            character[a] = makeCharacter(112, 57 + (95 * a));
        }
        else if (a >= 3) { // positions for character starting right on maze
            character[a] = makeCharacter(360, 57 + (95 * (a % 3)));
        }
        setColor(a); // randomly set colors
        character[a].setWeight(6);
        character[a].penDown(); // begin drawing
        character[a].forward(6);
        // note that it doesn't stop drawing
    }
}

function setColor(a) { // pick a random color from red, pink, cyan, orange
    var randNum = random(0,4);
    var index = floor(randNum) * 3; // take floor to make sure they're whole #'s
    character[a].setColor(color(randomCol[index], randomCol[index + 1], randomCol[index + 2]));
}

function draw() {
    for (var x = 0; x < 6; x ++) {
        chrMove(x);
        chrReset(x);
    }
}

// getPixel: fast access to pixel at location x, y from image 
function getPixel(image, x, y) {
    var i = 4 * (y * image.width + x);
    return color(image.pixels[i], image.pixels[i + 1], image.pixels[i + 2]);
}

function chrMove(x) { // update the object's position
    var theColorAtPxPy = getPixel(maze, character[x].x, character[x].y); // get color of px, py position
        
    // Fetch the brightness at PxPy, and save it.
    var theBrightnessOfTheColorAtPxPy = brightness(color(theColorAtPxPy));

    // If the brightness at PxPy is greater than the brightness threshold, move it down.
    if (theBrightnessOfTheColorAtPxPy < brightnessThreshold) {
        character[x].forward(1);
    }

    // If the brightness at PxPy is lower than darkness threshold, move up until it isn't.
    while (theBrightnessOfTheColorAtPxPy > brightnessThreshold & this.py != 0) {
        character[x].back(2);
        if (random(0,1) < 0.5) {
            character[x].right(90);
        }
        else {
            character[x].left(90);
        }
        theColorAtPxPy = getPixel(maze, character[x].x, character[x].y);
        theBrightnessOfTheColorAtPxPy = brightness(color(theColorAtPxPy));
        }
}

function chrReset(x) { // reset the object to the top of the screen
    if (character[x].x > width) { // bring back to left of screen if it moves off the right
        character[x].x = 0;
    }
    else if (character[x].x < 0) { // bring back to right of screen if it moves off the left
        character[x].x = width;
        character[x].back(150);
        character.right(90);
    }
}

// turtle graphic commands

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 makeCharacter(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, move: chrMove, // update the character's position
                  reset: chrReset, // reset the character to maze entrance
                  }
    return turtle;
}

I created an endless self-navigating maze inspired by Pac-Man! The colors of the lines are randomly generated from the red, cyan, pink, orange colors of the ghosts from the games. I wish I had the ability and time to add more randomness in the maze’s twists and turns as well as more smooth line as opposed to hitting the wall then moving back a step. However, I am very happy with my final product as is. I’ve included pictures of different iterations below.

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-11

var turtle1;
var turtle2;
var turtle3;
var turtle4;
var turtle5;
var turtle6;

function setup() {
  createCanvas(480, 460);
  background(0);
  turtle1 = makeTurtle(160, 200);
  turtle2 = makeTurtle(210, 100);
  turtle3 = makeTurtle(370, 210);
  turtle4 = makeTurtle(480, 20);
  turtle5 = makeTurtle(150, 470);
  turtle6 = makeTurtle(8, -15);
  frameRate(10); //gradually draw
}


function draw() {
  // Draw turtle 1
  turtle1.penDown();
  turtle1.setWeight(0.25);
  turtle1.setColor("Khaki"); 
  for (var i = 0; i < 10; i++) {
    turtle1.forward(1); //go straight
    turtle1.right(55); //go right 
    turtle1.forward(38);
    turtle1.left(15); //go left 
    if (i % 9 === 0) { //angles
      turtle1.forward(13);
    }
  }

  // Draw turtle 2
  turtle2.penDown();
  turtle2.setWeight(0.25);
  turtle2.setColor("LightPink");
  for (var i = 0; i < 10; i++) {
    turtle2.forward(15);
    turtle2.left(70);
    turtle2.forward(38);
    if (i % 9 === 0) {
      turtle2.forward(13);
    }
  }

  // Draw turtle 3
  turtle3.penDown();
  turtle3.setWeight(0.25);
  turtle3.setColor("DarkSeaGreen");
  for (var i = 0; i < 10; i++) {
    turtle3.forward(15);
    turtle3.right(40);
    turtle3.forward(120);
    turtle3.right(70);
    if (i % 9 === 0) {
      turtle3.forward(13);
    }
  }

  // Draw turtle 4
  turtle4.penDown();
  turtle4.setWeight(0.25);
  turtle4.setColor("Khaki"); 
  for (var i = 0; i < 10; i++) {
    turtle4.forward(1);
    turtle4.right(55);
    turtle4.forward(38);
    turtle4.left(15);
    if (i % 9 === 0) {
      turtle4.forward(13);
    }
  }

  // Draw turtle 5
  turtle5.penDown();
  turtle5.setWeight(0.25);
  turtle5.setColor("LightPink");
  for (var i = 0; i < 10; i++) {
    turtle5.forward(15);
    turtle5.left(70);
    turtle5.forward(38);
    if (i % 9 === 0) {
      turtle5.forward(13);
    }
  }



  // Draw turtle 6
  turtle6.penDown();
  turtle6.setWeight(0.25);
  turtle6.setColor("DarkSeaGreen");
  for (var i = 0; i < 10; i++) {
    turtle6.forward(15);
    turtle6.right(40);
    turtle6.forward(120);
    turtle6.right(70);
    if (i % 9 === 0) {
      turtle6.forward(13);
    }
  }
}


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 really liked how in this weeks project, it was more open ended. I was able to research and find interesting visual forms that the turtles can make. Some of the designs reminded me of flowers in some way and I wanted to portray that through my composition as well as implement the slow crawling turtles to make the designs more opaque.

freeTurtle

// Justin Yook
// jyook@andrew.cmu.edu
// Section C
// Project 11

var blueTurtle;
var rCol = [];
var rFor;

function setup() {
    createCanvas(360, 240);
    background(0);

    for (var i = 0; i < 50; i++) {
    	rCol[i] = color(random(0, 255), random(0, 255), random(0, 255));
    }

   	blueTurtle = makeTurtle(0, height / 2);
    blueTurtle.setWeight(3);
    blueTurtle.setColor(color(255, 255, 255));

	frameRate(60);
}

function draw() {
	// CREATE THE ZIG ZAG PATTERN
	blueTurtle.forward(1);

	if (blueTurtle.x >= 45 & blueTurtle.x < 90) {
		blueTurtle.face(300);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 90 & blueTurtle.x < 135) {
		blueTurtle.face(70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 135 & blueTurtle.x < 180) {
		blueTurtle.face(-70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 180 & blueTurtle.x < 225) {
		blueTurtle.face(70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 225 & blueTurtle.x < 270) {
		blueTurtle.face(-70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 270 & blueTurtle.x < 315) {
		blueTurtle.face(-300);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 315 & blueTurtle.x < width) {
		blueTurtle.face(0);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= width) {
		blueTurtle.x = 0;
		blueTurtle.y = random(0, 240);
		blueTurtle.setColor(random(rCol));
	}
}

// Implement Turtle 
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 was inspired by how heartbeats and sound were represented on monitors, and created a zig-zag pattern similar to them. To add something interesting, I made an array with length 50, where each element is a random color. In addition, the y-coordinate of each pattern drawn after the first is random.