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

POEM

Image
Artist Statement: For this project I wanted to use my favorite poem, and that's from the film, The !0 Things I Hate About You. The main female lead, Morgan, read this poem to Heather Ledger's character. I felt that his face and emotion would be the perfect picture for this project  POEM:   I hate the way you talk to me And the way you cut your hair I hate the way you drive my car I hate it when you stare I hate your big dumb combat boots And the way you read my mind I hate you so much, that it makes me sick And even makes me rhyme I hate the way you're always right I hate it when you lie I hate it when you make me laugh Even worse when you make me cry I hate it when you not around And the fact that you didn't call But mostly I hate the way I don't hate you Not even close Not even a little bit Not even at all
Read more