Ir al contenido principal

Assignment #1. Canvas



        Dear blog, my name is Victoria. I am 19 years old. I really love history and make people happy. I consider myself very quiet and also a good listener. My major is Advertising and Public Relations because I love art, creativity, and communications. I feel like this class will improve my computer skills.

















My Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

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

<script>


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//telling dw we are creating a closed shape
context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(100,100);

//termination of the first line
context.lineTo(300,300);

//creates a second line
context.lineTo(500, 100);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//creates a stroke along the above defined line (one pixel)
context.stroke();

//This is about drawing by coordinates but not the typical cartesian layout - i.e., the origin is (0,0) at top left
/// FILLING COLORS IN SIDE A SHAPE

// this tutorial deals with the properties of the lines

//FIRST SHAPE

 //tell Dreamweaver we are creating a closed shape
context.beginPath();

//this tells Dreamweaver the starting point of a shape in pixels from top left
context.moveTo(100,100);

    //termination point of the first line
context.lineTo(300,300);

//termination point of the first line
context.lineTo(500, 100);

//draws the third line and closes shape
context.closePath();

//line width
context.lineWidth = 10;

context.lineJoin = "round";
//creates rounded edges - there are three types of linesJoin are "miter" , "round" , or "bevel"

//EXPLAIN THE COLOR SPACE AND LINE COLOR - use http://bit.ly/2xoDfM0 or http://www.color-hex.com/ for colors
context.strokeStyle = "rgba(0, 0 , 0 , 1)";

context.stroke();
//creates a stroke along the above defined line (default width is one pixel but context.lineWidth = 10; above changed this to 10 pixels)

//first you must declare color
context.fillStyle = "purple";

  //fill the shape
context.fill();


//SECOND SHAPE




//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// starting point coordinates
var startX = 0;
var startY = canvas.height/2;

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

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


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

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

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//telling dw we are creating a closed shape
context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(100,200);

//termination of the first line
context.lineTo(300,300);

//creates a second line
context.lineTo(500, 200);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//creates a stroke along the above defined line (one pixel)
context.stroke();


//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

// starting point coordinates
var startX = 0;
var startY = canvas.height/2;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;

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


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

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




//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
context.beginPath();
      context.moveTo(100, 150);
      context.lineTo(450, 50);
      context.lineWidth = 10;

      // set line color
      context.strokeStyle = '#ff0000';
      context.stroke();

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//telling dw we are creating a closed shape
context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(100,400);

//termination of the first line
context.lineTo(300,300);

//creates a second line
context.lineTo(500, 400);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//creates a stroke along the above defined line (one pixel)
context.stroke();

//This is about drawing by coordinates but not the typical cartesian layout - i.e., the origin is (0,0) at top left
/// FILLING COLORS IN SIDE A SHAPE

// this tutorial deals with the properties of the lines



//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

  context.beginPath();
      context.rect(188, 50, 200, 100);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('victoria', 20, 450);
context.closePath();

 context.beginPath();
      context.arc(650, 75, 70, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 7;
      context.fillStyle = 'pink';
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke()

 context.beginPath();
      context.moveTo(188, 150);
      context.quadraticCurveTo(288, 0, 388, 150);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'black';
      context.stroke();

// begin custom shape
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 450);
      context.bezierCurveTo(250, 180, 320, 180, 340, 450);
      context.bezierCurveTo(420, 150, 420, 120, 390, 200);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();
</script>


</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

Assignment #9. Presentation Cards

Dear blog, this project was other that I really enjoyed. It also took me many hours of hard work.Thinking and deciding the colors, fonts and shapes was pretty awesome. I have to admit that while I was doing this project I discovered a passion inside of me. Although my major is Advertising and Public Relations, I did not know that I really liked to design logos. I put myself into this project, it really reflects who I am and the creativity I have. Before I had all the cards full of soft colors. My professor advised that they will look better if I make them darker. I took that recommendation and used the same colors in their darkest tones . I love pastel and soft colors they are really pretty; however, I did not know that they should not be used as much as I did in my cards and logos. 
Publicar un comentario
Leer más

Assignment #3. Calligram Project

Dear blog, usually, I relate butterflies to liberty and freedom. My poem represents how butterflies fly to whatever place they want, with their beautiful colors. I let my mind fly whit no sense of direction, just soaring through the sky. Like a person driving on the highway with the wind blowing their hair back, not having a care in the world. Butterflies give me that priceless feeling.  One side depicts freedom and the other butterflies, as the butterfly I created is divided into two pieces. I loved my concept more than my creation. 
Publicar un comentario
Leer más

Assignment #7. Somewhere, Photoshop

Dear blog, this project is called somewhere. I had fun while doing this one, I wanted to create something authentic. I placed myself in a vintage cafe, also I add some pills to the picture simulating that I took them and passed out. I wanted to create something dramatic. My weakness in this piece is my hair that I could not cut perfectly from the original image making it look unrealistic. Although it might look simple, I put a lot effort while creating this project, 
Publicar un comentario
Leer más