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 #10. Animation Video

Dear blog, we had to create an animation video in Photoshop. For me was really hard because I had zero knowledge about the creation of videos in Photoshop. After several attempts, I did learn how to put all the images together. This one was really special because I made it about my friends here at UT. Then the audio was created on GarageBand, I mixed loops and my voice. I was ashamed of doing that but it ended up pretty awesome. Animation: https://www.youtube.com/watch?v=8G7Ht61_flc and with the audio below here:
Publicar un comentario
Leer más

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 #2. Canvas Final Project

Dear blog, this is my canvas final project. I had stressful moments during this assignment. At the beginning was hard to understand how to use these codes in order to create great images. Finally, after three days of trying different codes, I managed to create this car on a road with mountains. I know it does not look complex, but I felt really proud of myself when I finished this one. My code: <html> <head> <meta charset="UTF-8"> <title> ART 210 - CANVAS FINAL 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.00); } #myCanvas { border: rgba(102,0,255,1) medium dashed; } </style> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> var canvas = document.getE...
Publicar un comentario
Leer más