Author: keuchuka@andrew.cmu.edu

project11

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-11

//variables for shape change
var addCai = 0
var addDe = 0
var addFu = 0
var addXi = 0
var addAi = 0
var c = 10
var jitter;

//for differnt turtles
var pX = 40 
var pY = 0
var pYMove = 1

var fX = 130
var fY = 100
var fYMove = 1

var tX = 225
var tY = 0
var tYMove = 1

var cX = 310
var cY = 100
var cYMove = 1

var dX = 405
var dY = 0
var dYMove = 1

//loading Chinese character images
function preload(){

	aiPic = loadImage("https://i.imgur.com/o5xIMAW.png")
	fuPic = loadImage("https://i.imgur.com/GA5Rnem.png")
	xiPic = loadImage("https://i.imgur.com/5sx0vnR.png")
	caiPic = loadImage("https://i.imgur.com/LJIdHCA.png")
	dePic = loadImage("https://i.imgur.com/iuYqMLD.png")

}

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

function draw(){
    frameRate(40);
    var backC = 255
    //creating "drag" effect with transaparent bg
    background(backC,60);

	noFill();
	stroke(255,0,0);
	strokeWeight(3)
    rect(0,0,width,height,30)

    noStroke();

////////////AI//////////////

var turtlec = new Turtle(pX + 23, pY - 19);

	//drawing the shape
    for(var i = 0; i < 20; i ++){
    turtlec.penUp();
    turtlec.forward(5)
    turtlec.penDown();
    turtlec.setColor(color(255,0,0,10));
    turtlec.setWeight(2);
    turtlec.forward(c);
    turtlec.right(30+addAi);
    turtlec.forward(c);
    turtlec.right(30+addAi);
    turtlec.forward(c)
    turtlec.right(30+addAi);
    turtlec.forward(c);
    turtlec.left(30+addAi);

    c = random(10,11)
    
    //changing the shape when mouse is pressed
    if (mouseIsPressed){
	addAi = addAi += 1
	}

	if (addAi == 20){
		addAi = 0
	}
}

//inserting the image of character, adding jitter, and reverse motion when it hits walls
image(aiPic, pX+jitter, pY+jitter)
tint(255, 127);    

    pY = pY += pYMove
    jitter = random(1,3)

    if(pY > height-50){
    	pYMove = -1
    } else if (pY < 20){
    	pYMove = 1
    }

// above comments can be used for all following characters

////////////XI//////////////

var turtlec2 = new Turtle(tX + 23, tY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec2.penUp();
    turtlec2.forward(5)
    turtlec2.penDown();
    turtlec2.setColor(color(255,0,0,10));
    turtlec2.setWeight(2);
    turtlec2.forward(c);
    turtlec2.right(30+addXi);
    turtlec2.forward(c);
    turtlec2.right(30+addXi);
    turtlec2.forward(c)
    turtlec2.right(30+addXi);
    turtlec2.forward(c);
    turtlec2.left(30+addXi);

    c = random(10,11)
    if (mouseIsPressed){
	addXi = addXi += 1
	}

	if (addXi == 20){
		addXi = 0
	}

}


image(xiPic, tX+jitter, tY+jitter)
tint(255, 127);

    tY = tY += tYMove

    jitter = random(1,3)


    if(tY > height-50){
    	tYMove = -1
    } else if (tY < 20){
    	tYMove = 1
    }


///////////FU//////////

var turtlec3 = new Turtle(fX + 28, fY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec3.penUp();
    turtlec3.forward(5)
    turtlec3.penDown();
    turtlec3.setColor(color(255,0,0,10));
    turtlec3.setWeight(2);
    turtlec3.forward(c);
    turtlec3.right(30+addFu);
    turtlec3.forward(c);
    turtlec3.right(30+addFu);
    turtlec3.forward(c)
    turtlec3.right(30+addFu);
    turtlec3.forward(c);
    turtlec3.left(30+addFu);

    c = random(10,11)
  
  if (mouseIsPressed){
	addFu = addFu += 1
	}

	if (addFu == 20){
		addFu = 0
	}

}


image(fuPic, fX+jitter, fY+jitter)
tint(255, 127);

    fY = fY += fYMove



    jitter = random(1,3)


    if(fY > height-50){
    	fYMove = -1
    } else if (fY < 25){
    	fYMove = 1
    }




///////////CAI//////////

var turtlec4 = new Turtle(cX + 28, cY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec4.penUp();
    turtlec4.forward(5)
    turtlec4.penDown();
    turtlec4.setColor(color(255,0,0,10));
    turtlec4.setWeight(2);
    turtlec4.forward(c);
    turtlec4.right(30+addCai);
    turtlec4.forward(c);
    turtlec4.right(30+addCai);
    turtlec4.forward(c)
    turtlec4.right(30+addCai);
    turtlec4.forward(c);
    turtlec4.left(30+addCai);

    c = random(10,11)
  
  if (mouseIsPressed){
	addCai = addCai += 1
	}

	if (addCai == 20){
		addCai = 0
	}

}




image(caiPic, cX+jitter, cY+jitter)
tint(255, 127);

    cY = cY += cYMove

    jitter = random(1,3)


    if(cY > height-50){
    	cYMove = -1
    } else if (cY < 25){
    	cYMove = 1
    }

///////////DE//////////

var turtlec5 = new Turtle(dX + 28, dY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec5.penUp();
    turtlec5.forward(5)
    turtlec5.penDown();
    turtlec5.setColor(color(255,0,0,10));
    turtlec5.setWeight(2);
    turtlec5.forward(c);
    turtlec5.right(30+addDe);
    turtlec5.forward(c);
    turtlec5.right(30+addDe);
    turtlec5.forward(c)
    turtlec5.right(30+addDe);
    turtlec5.forward(c);
    turtlec5.left(30+addDe);

    c = random(10,11)

  if (mouseIsPressed){
	addDe = addDe += 1
	}

	if (addDe == 20){
		addDe = 0
	}


}




image(dePic, dX+jitter, dY+jitter)
tint(255, 127);

    dY = dY += dYMove

    jitter = random(1,3)


    if(dY > height-50){
    	dYMove = -1
    } else if (dY < 20){
    	dYMove = 1
    }




}



//=======================================================
// TURTLE GRAPHICS IMPLEMENTATION

function Turtle(x, y) {
  this.x = x;
  this.y = y;
  this.angle = 0.0;
  this.penIsDown = true;
  this.color = color(128);
  this.weight = 1;
 
  this.left = function(d) {
    this.angle -= d;
  };
  this.right = function(d) {
    this.angle += d;
  };
  this.forward = function(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
  };
  this.back = function(p) {
    this.forward(-p);
  };
  this.penDown = function() {
    this.penIsDown = true;
  };
  this.penUp = function() {
    this.penIsDown = false;
  };
  this.goto = function(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
  };
  this.distanceTo = function(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
  };
  this.angleTo = function(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 160) % 160.0;
    return angle;
  };
  this.turnToward = function(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
      this.angle += d;
    } else {
      this.angle -= d;
    }
  };
  this.setColor = function(c) {
    this.color = c;
  };
  this.setWeight = function(w) {
    this.weight = w;
  };
  this.face = function(angle) {
    this.angle = angle;
  }
}

The shape that turtle graphics can make really reminded me of the stamps of lucky red Chinese stamps (they’re flower-like radial compositions). I tried to replicate that in this project, having these stamps bounce in a banner type organization and taking advantage of turtle graphics in loop, have it change shape slightly when the mouse is pressed.

normal state of shape

changed state of shape when mouse is pressed