bcardiff/README.md

## README.md

      
    Raw
  

              README.md
            
          
    INTRODUCTION TO PROGRAMMING FOR THE VISUAL ARTS WITH P5.JS
Assignment 1: Port an Image to Code

  
## crop.png

      
    Raw
  

              crop.png
            
          
## index.html
<html>
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
  <script type="text/javascript" src="sketch.js"></script>
  <style> body {padding: 0; margin: 0;} </style>
</head>
<body>
  <img src="./crop.png" style="position: absolute; top: 0; left: 300;" />
</body>
</html>

## sketch.js
function setup() {
  createCanvas(1024, 768);
}

// slightly darker color with transparency.
// to render not to strick borders
function darkerAndAlpha(aColor) {
  var desc = 'hsla(' +  Math.floor(hue(aColor)) + ',' +  Math.floor(saturation(aColor)) + '%,' + Math.floor(brightness(aColor) * .707) + '%, 0.1)';
  return color(desc);
}

// render rects using absolute coordinates of the vertices
function abs_rect(x1,y1,x2,y2) {
  rect(x1,y1,x2-x1,y2-y1);
}

// helper function to draw polygons using vertices with a color
function vertex_shape() {
  noStroke();
  fill(color(arguments[0]));
  beginShape();
  for(var i = 1; i < arguments.length; i+=2) {
    vertex(arguments[i], arguments[i+1]);
  }
  vertex(arguments[1], arguments[2]);
  endShape();
}

// rect style for the trees
function abs_tree_rect(x1,y1,x2,y2) {
  var fillColor = color(238, 217, 200);
  stroke(darkerAndAlpha(fillColor));
  strokeWeight(3);
  fill(fillColor);
  abs_rect(x1,y1,x2,y2);
}

// draw a leave of the flower. four points are used to determine
// two arcs that form the leaves.
function leave(color, upper_x, upper_y, right_x, right_y, lower_x, lower_y, left_x, left_y) {
  leaveArc(color,upper_x,upper_y,right_x,right_y,lower_x,lower_y, true);
  leaveArc(color,upper_x,upper_y,left_x,left_y,lower_x,lower_y, false);
}

// draw an arc passing by three point calculating the circle
function leaveArc(c,x1,y1,x2,y2,x3,y3,direction) {
  // source http://www.regentsprep.org/regents/math/geometry/gcg6/RCir.htm
  var mr = (y2-y1) / (x2-x1);
  var mt = (y3-y2) / (x3-x2);
  if (mr == mt) {
    return; // parallel lines. no circle passing there
  }

  var cx = (mr*mt*(y3-y1) + mr*(x2+x3) - mt*(x1+x2)) / (2*(mr-mt));
  var cy = (y1+y2)/2 - (cx - (x1+x2)/2) / mr;
  var radius = Math.pow((Math.pow((x2-cx), 2) +  Math.pow((y2-cy), 2)), 0.5);

  var from, to;
  if (direction) {
    from = Math.atan2(y1-cy,x1-cx);
    to = Math.atan2(y3-cy,x3-cx);
  } else {
    to = Math.atan2(y1-cy,x1-cx);
    from = Math.atan2(y3-cy,x3-cx);
  }

  stroke(c);
  fill(c);
  arc(cx,cy,radius*2,radius*2, from, to, CHORD);
}

function draw() {
  noStroke();

  // right panel
  fill(26,20,8);
  abs_rect(135,0,274,203);

  fill(color('#527f6b'));
  abs_rect(267,131,274,203);
  fill(color('#485e47'));
  abs_rect(267,202,255,130);
  fill(color('#4d6649'));
  abs_rect(243,157,255,203);
  fill(color('#515848'));
  abs_rect(243,203,136,165);

  vertex_shape('#312d21', 139,200,175,198,246,199,242,202,145,202);

  fill(color('#65a690'));
  ellipse(195,102,148,198);
  vertex_shape('#65a690',175,202,171,178,216,171,210,202);

  fill(26,20,8);
  abs_rect(135,0,274,60);

  leave('#3d4437',166,4,192,105,157,181,130,96);
  leave('#4f6658',214,2,228,98,176,197,167,80);
  leave('#4e5d44',246,3,268,103,216,196,201,72);
  leave('#466955',170,11,195,111,160,181,148,79);
  leave('#466955',152,30,163,114,144,171,131,79);
  leave('#578d7c',152,37,162,100,148,170,133,98);
  leave('#578d7c',174,18,194,105,167,183,149,89);
  leave('#57856f',216,1,232,103,187,192,179,74);
  leave('#668665',258,27,268,113,242,178,222,104)
  leave('#599a7c',243,18,252,104,216,181,208,85);
  leave('#64826e',177,23,194,115,170,188,160,76);
  leave('#6ba793',181,37,200,104,181,175,168,100);
  leaveArc('#65a690',262,140,194,200,127,138, true);
  leave('#7a9f92',218,5,230,115,200,180,194,62);
  leave('#83a28f',253,49,253,134,229,171,223,98);
  leave('#6f9d8f',162,67,173,131,157,184,140,123);
  leave('#649c7f',264,50,268,120,241,179,236,110)
  leave('#7fa08b',252,49,256,118,228,172,221,112);
  leave('#6ba082',255,73,259,123,233,183,224,119);
  leave('#73a68e',224,32,230,115,205,164,195,90);
  leave('#a3b79a',181,54,195,115,176,196,162,127);
  leave('#a3b79a',229, 54,234,118,215,187,202,112);
  leave('#e0d1b4',199,44,210,118,198,187,180, 118);

  vertex_shape('rgba(138,138,109,0.2)',163,175,178,154,212,148,223,148,235,175,234,187,214,169,189,167);

  // left panel
  fill(187, 190, 173);
  rect(0,0,135,203);

  vertex_shape('rgba(138,138,109,0.2)',69,160,96,152,112,141,126,142,138,110,149,85,161,68,160,100,155,129,161,144,148,155,102,164,71,166);
  vertex_shape('rgba(138,138,109,0.2)',4,198,4,184,11,182,9,169,1,170,3,154,0,178,0,197,1,201);

  // 1st row of trees
  vertex_shape('#489180',7,15,25,4,42,20,43,26,36,27,12,26,7,23,7,18);
  abs_tree_rect(18,28,35,51);
  vertex_shape('#4c917c',60,2,66,5,80,20,83,26,71,28,58,29,54,25,54,13,58,4);
  abs_tree_rect(60,28,71,52);
  vertex_shape('#5a9a8c',88,25,90,22,91,19,101,7,105,8,123,29,105,30,90,28);
  abs_tree_rect(98,30,107,50);

  // 2nd row of trees
  vertex_shape('#699e92',11,86,15,71,25,61,38,72,51,86);
  abs_tree_rect(18,89,34,113);
  vertex_shape('#569278',53,80,66,68,72,59,85,71,87,81,64,84);
  abs_tree_rect(62,83,72,115);
  vertex_shape('#519c7b',101,56,110,67,122,82,101,84,91,78);
  abs_tree_rect(98,84,109,117);

  // 3rd row of trees
  vertex_shape('#5d9184',34,120,41,126,46,140,37,145,14,142);
  abs_tree_rect(18,145,33,163);
  vertex_shape('#759892',67,117,83,137,67,141,54,139,52,134);
  abs_tree_rect(62,143,74,162);
  vertex_shape('#649e8f',87,133,100,118,120,137,96,138,89,136);
  abs_tree_rect(99,139, 110,162);

  // 4th row of trees
  vertex_shape('#618e89',12,181,18,172,29,163,44,181,27,183);
  abs_tree_rect(18,183,32,197);
  vertex_shape('#658f7b',56,175,63,171,69,168,73,163,79,170,82,180,65,182,57,180);
  abs_tree_rect(62,182,70,193);
  vertex_shape('#70a19b',91,177,105,162,115,170,118,180,99,181);
  abs_tree_rect(101,182,108,193);


  vertex_shape('#77b5b4',91,203,135,193,135,202,91,203);
  vertex_shape('#87aca4',3,190,23,203,1,203);
  vertex_shape('#b3beb0',47,203,58,191,69,194,76,203);
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
	<script type="text/javascript" src="sketch.js"></script>
	<style> body {padding: 0; margin: 0;} </style>
	</head>
	<body>
	<img src="./crop.png" style="position: absolute; top: 0; left: 300;" />
	</body>
	</html>
	function setup() {
	createCanvas(1024, 768);
	}

	// slightly darker color with transparency.
	// to render not to strick borders
	function darkerAndAlpha(aColor) {
	var desc = 'hsla(' + Math.floor(hue(aColor)) + ',' + Math.floor(saturation(aColor)) + '%,' + Math.floor(brightness(aColor) * .707) + '%, 0.1)';
	return color(desc);
	}

	// render rects using absolute coordinates of the vertices
	function abs_rect(x1,y1,x2,y2) {
	rect(x1,y1,x2-x1,y2-y1);
	}

	// helper function to draw polygons using vertices with a color
	function vertex_shape() {
	noStroke();
	fill(color(arguments[0]));
	beginShape();
	for(var i = 1; i < arguments.length; i+=2) {
	vertex(arguments[i], arguments[i+1]);
	}
	vertex(arguments[1], arguments[2]);
	endShape();
	}

	// rect style for the trees
	function abs_tree_rect(x1,y1,x2,y2) {
	var fillColor = color(238, 217, 200);
	stroke(darkerAndAlpha(fillColor));
	strokeWeight(3);
	fill(fillColor);
	abs_rect(x1,y1,x2,y2);
	}

	// draw a leave of the flower. four points are used to determine
	// two arcs that form the leaves.
	function leave(color, upper_x, upper_y, right_x, right_y, lower_x, lower_y, left_x, left_y) {
	leaveArc(color,upper_x,upper_y,right_x,right_y,lower_x,lower_y, true);
	leaveArc(color,upper_x,upper_y,left_x,left_y,lower_x,lower_y, false);
	}

	// draw an arc passing by three point calculating the circle
	function leaveArc(c,x1,y1,x2,y2,x3,y3,direction) {
	// source http://www.regentsprep.org/regents/math/geometry/gcg6/RCir.htm
	var mr = (y2-y1) / (x2-x1);
	var mt = (y3-y2) / (x3-x2);
	if (mr == mt) {
	return; // parallel lines. no circle passing there
	}

	var cx = (mrmt(y3-y1) + mr(x2+x3) - mt(x1+x2)) / (2*(mr-mt));
	var cy = (y1+y2)/2 - (cx - (x1+x2)/2) / mr;
	var radius = Math.pow((Math.pow((x2-cx), 2) + Math.pow((y2-cy), 2)), 0.5);

	var from, to;
	if (direction) {
	from = Math.atan2(y1-cy,x1-cx);
	to = Math.atan2(y3-cy,x3-cx);
	} else {
	to = Math.atan2(y1-cy,x1-cx);
	from = Math.atan2(y3-cy,x3-cx);
	}

	stroke(c);
	fill(c);
	arc(cx,cy,radius2,radius2, from, to, CHORD);
	}

	function draw() {
	noStroke();

	// right panel
	fill(26,20,8);
	abs_rect(135,0,274,203);

	fill(color('#527f6b'));
	abs_rect(267,131,274,203);
	fill(color('#485e47'));
	abs_rect(267,202,255,130);
	fill(color('#4d6649'));
	abs_rect(243,157,255,203);
	fill(color('#515848'));
	abs_rect(243,203,136,165);

	vertex_shape('#312d21', 139,200,175,198,246,199,242,202,145,202);

	fill(color('#65a690'));
	ellipse(195,102,148,198);
	vertex_shape('#65a690',175,202,171,178,216,171,210,202);

	fill(26,20,8);
	abs_rect(135,0,274,60);

	leave('#3d4437',166,4,192,105,157,181,130,96);
	leave('#4f6658',214,2,228,98,176,197,167,80);
	leave('#4e5d44',246,3,268,103,216,196,201,72);
	leave('#466955',170,11,195,111,160,181,148,79);
	leave('#466955',152,30,163,114,144,171,131,79);
	leave('#578d7c',152,37,162,100,148,170,133,98);
	leave('#578d7c',174,18,194,105,167,183,149,89);
	leave('#57856f',216,1,232,103,187,192,179,74);
	leave('#668665',258,27,268,113,242,178,222,104)
	leave('#599a7c',243,18,252,104,216,181,208,85);
	leave('#64826e',177,23,194,115,170,188,160,76);
	leave('#6ba793',181,37,200,104,181,175,168,100);
	leaveArc('#65a690',262,140,194,200,127,138, true);
	leave('#7a9f92',218,5,230,115,200,180,194,62);
	leave('#83a28f',253,49,253,134,229,171,223,98);
	leave('#6f9d8f',162,67,173,131,157,184,140,123);
	leave('#649c7f',264,50,268,120,241,179,236,110)
	leave('#7fa08b',252,49,256,118,228,172,221,112);
	leave('#6ba082',255,73,259,123,233,183,224,119);
	leave('#73a68e',224,32,230,115,205,164,195,90);
	leave('#a3b79a',181,54,195,115,176,196,162,127);
	leave('#a3b79a',229, 54,234,118,215,187,202,112);
	leave('#e0d1b4',199,44,210,118,198,187,180, 118);

	vertex_shape('rgba(138,138,109,0.2)',163,175,178,154,212,148,223,148,235,175,234,187,214,169,189,167);

	// left panel
	fill(187, 190, 173);
	rect(0,0,135,203);

	vertex_shape('rgba(138,138,109,0.2)',69,160,96,152,112,141,126,142,138,110,149,85,161,68,160,100,155,129,161,144,148,155,102,164,71,166);
	vertex_shape('rgba(138,138,109,0.2)',4,198,4,184,11,182,9,169,1,170,3,154,0,178,0,197,1,201);

	// 1st row of trees
	vertex_shape('#489180',7,15,25,4,42,20,43,26,36,27,12,26,7,23,7,18);
	abs_tree_rect(18,28,35,51);
	vertex_shape('#4c917c',60,2,66,5,80,20,83,26,71,28,58,29,54,25,54,13,58,4);
	abs_tree_rect(60,28,71,52);
	vertex_shape('#5a9a8c',88,25,90,22,91,19,101,7,105,8,123,29,105,30,90,28);
	abs_tree_rect(98,30,107,50);

	// 2nd row of trees
	vertex_shape('#699e92',11,86,15,71,25,61,38,72,51,86);
	abs_tree_rect(18,89,34,113);
	vertex_shape('#569278',53,80,66,68,72,59,85,71,87,81,64,84);
	abs_tree_rect(62,83,72,115);
	vertex_shape('#519c7b',101,56,110,67,122,82,101,84,91,78);
	abs_tree_rect(98,84,109,117);

	// 3rd row of trees
	vertex_shape('#5d9184',34,120,41,126,46,140,37,145,14,142);
	abs_tree_rect(18,145,33,163);
	vertex_shape('#759892',67,117,83,137,67,141,54,139,52,134);
	abs_tree_rect(62,143,74,162);
	vertex_shape('#649e8f',87,133,100,118,120,137,96,138,89,136);
	abs_tree_rect(99,139, 110,162);

	// 4th row of trees
	vertex_shape('#618e89',12,181,18,172,29,163,44,181,27,183);
	abs_tree_rect(18,183,32,197);
	vertex_shape('#658f7b',56,175,63,171,69,168,73,163,79,170,82,180,65,182,57,180);
	abs_tree_rect(62,182,70,193);
	vertex_shape('#70a19b',91,177,105,162,115,170,118,180,99,181);
	abs_tree_rect(101,182,108,193);


	vertex_shape('#77b5b4',91,203,135,193,135,202,91,203);
	vertex_shape('#87aca4',3,190,23,203,1,203);
	vertex_shape('#b3beb0',47,203,58,191,69,194,76,203);
	}