CREATIVE PROJECT


Hours worked: 10.5

 Concept statement: For my creative project, I created an abstract impression of my bulldog Rupert. I figured I wanted to work with something I love and I love my dog. I composed his head and body of geometric shapes, including his distinct feature of his crooked jaw, emphasizing his one tooth and hanging tongue. After finishing the project, I realized I could've added more, such as his nose, a name or letter on the dog tag, a more interesting background and details like that. What . makes my piece successful is that it's very simple and minimal, you can tell that a beginner composed this, but I am very pleases with the work I have put in for this.

 Shapes used:

  • 1 square
  • 3 triangels
  • 7 circles
  • 1 trapezoid
  • 1 arc (his collar)
  • 1 quadratic curve (his tongue)
  • 1 bezier curve (his crooked jaw structure)

CODE:

<!document>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//background

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

context.beginPath();

context.rect(x,y,width,height);

context.fillStyle = 'rgb(157,213,236)';

context.fill();

context.lineWidth = 0;

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

//head

var x = 200
var y = 25
var width = 375
var height = 300


context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
context.strokeStyle = 'rgb(5,5,5)';
var grd = context.createLinearGradient (x, y, x+width, y+height);

context.fillStyle = 'white';
context.fill();
context.fill();


context.stroke();

//left ear
context.beginPath();
context.moveTo(150, 25);
context.lineTo(250, 25);
context.lineTo(150, 200);
context.lineTo(150, 25);
context.stroke();

context.lineWidth   = 5;
context.fillStyle = 'white';
context.fill();
context.fill();

//right ear
context.beginPath();
context.moveTo(625, 25);
context.lineTo(525, 25);
context.lineTo(625, 200);
context.lineTo(625, 25);
context.stroke();

context.lineWidth   = 5;
context.fillStyle = 'white';
context.fill();
context.fill();

//body
context.beginPath();
context.moveTo(200, 325);
context.lineTo(575, 325);
context.lineTo(650, 600);
context.lineTo(160, 600);
context.lineTo(200, 325);
context.stroke();

context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'black';
context.lineWidth   = 5;
context.fillStyle = 'white';
context.fill();
context.fill();
context.stroke();
// jaw flap
var startX = 200;
var startY = canvas.height/2;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 80;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * .5;
var cpointY2 = canvas.height / 2 - 300;

// ending point coordinates
var endX = 575;
var endY = canvas.height/2;


//tooth
context.beginPath();
context.moveTo(290, 190);
context.lineTo(315, 220);
context.lineTo(290, 240);
context.lineTo(290, 190);
context.stroke();

context.lineWidth   = 5;
context.fillStyle = 'white';
context.fill();
context.fill();

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//right eyeball
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 4;
var radius = 25;
var startAngle = 1.5 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.stroke();
context.fillStyle = "rgb(36,20,13)";
context.fill();
context.closePath();
//white eye
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 4;
var radius = 15;
var startAngle = 1.5 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.stroke();
context.fillStyle = 'white';
context.fill();
context.closePath();
// black eye
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 4;
var radius = 12;
var startAngle = 1.5 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.stroke();
context.fillStyle = 'black';
context.fill();
context.closePath();


//left eyeball
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.75
var centerY = canvas.height / 4;
var radius = 25;
var startAngle = 2.1 * Math.PI;
var endAngle = 4.1 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.stroke();
context.fillStyle = "rgb(36,20,13)";
context.fill();
context.closePath
//white eye
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.75;
var centerY = canvas.height / 4;
var radius = 15;
var startAngle = 1.5 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.stroke();
context.fillStyle = 'white';
context.fill();
context.closePath();
//black eye
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.75;
var centerY = canvas.height / 4;
var radius = 12;
var startAngle = 1.5 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.stroke();
context.fillStyle = 'black';
context.fill();
context.closePath();
// dog collar
// starting point coordinates
var startX = 200;
var startY = canvas.height/ 1.9;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 110;

// ending point coordinates
var endX = 575;
var endY = canvas.height/ 1.9;

context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 8;
context.strokeStyle = 'red';
context.stroke();

//dog tag
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2
var centerY = canvas.height / 1.6;
var radius = 25;
var startAngle = 2.1 * Math.PI;
var endAngle = 4.1 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.stroke();
context.fillStyle =  "rgb(242,208,56)";
context.fill();
context.closePath


// starting point coordinates
var startX = 290;
var startY = canvas.height/2.5;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 10;

// ending point coordinates
var endX = 350;
var endY = canvas.height/3;


context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.fillStyle =  "rgb(236,157,214)";
context.fill();


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>
     
<canvas id="myCanvas" width="800" height="600"></canvas>

</body>


</html>

Comments

Post a Comment

Popular posts from this blog

P5 Mesh

Image
ARTIST STATEMENT: For my new gradient mesh project, I chose to recreate pink daisy's. Daisy's are my favorite flowers, and normally white I chose the color pink so when creating the mesh, it gives the flower a 3D look. making it look real. I created two types of petals, one having the rows and three columns while the other had 4 rows and three columns. I used the same colors on each point but scattered them differently among the two petals. I wanted to give variety to the flower so each petal didn't look identical to one another. There was no particular placement in which petal went where. I wanted them scattered to look more natural.  
Read more

AUTOSCOPY

Image
ARTIST STATEMENT: This assignment was something I was really looking forward to altering an image and make it look like a different dimension. The original photo is a selfie of my best friend an I at a music festival, we both have scarves and masks covering our face. The color reflecting off our faces is emphasized by the lights but what draws me to this picture is our big and beautiful brown eyes.     For this project, I created masks around our scarves and eyes. I then put a black and white optical illusion replacing the deleted images so it contrasts well off the colored image. The image itself I wanted to make more bright and bold so I toyed around with the vibrancy and saturation. As well as placing a photo filter of purple on the image to strengthen the colors of the pink and blues. I added text in an American Typewriter font that reads, "It's all in your HEAD." I chose to write a quote there so you can imagine that what you're seeing is all in your head.
Read more

GIF

ARTIST STATEMENT: I really enjoyed this project, working with video in photoshop. I went through a few trial runs with choosing this video. I had one that involved swimming of fish, a baby on a playground, and ended with this one. I think it turned out fairly well with the exception of tis little blurry hiccup. There is some difficulty when changing the opacity and you can see that in the psd version. When I try to change the second keynote to 0% it either stays at 100 or changes all the keynotes to 0. Other then that I believe the movement of the waves and the standstill of the boats turned out really well.
Read more