Introduction + Assignment #1
INTRODUCTION + ASSIGNMENT #1
Hi! I'm Julia Alves, I have a twin brother, I love the beach and traveling. I live in Clearwater but lived in Brazil for the longest time ever! In Brazil, I discovered I had a passion for art, all the colors seemed to fascinate me. I'm excited for this class but I'm also nervous since I never worked with coding before. The first class was a challenge since it was all brand new but I'm pretty sure that I will get used to it and things will be easier. My expectations for this class is to always improve and learn new codings that will help me in the future, help my classmates with what I can and challenge myself to always seek new shapes and designs.
Below is my first assignment, as you can see it was pretty hard to work with the codes since I had no experience at all, but overall I created some abstract art!
Below is my first assignment, as you can see it was pretty hard to work with the codes since I had no experience at all, but overall I created some abstract art!
CODE
<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
//First Shape
context.moveTo(100,100);
//this tells dw the starting point of a shape
context.lineTo(300,300);
//termination of the first line
context.lineTo(500,100);
context.closePath();
//draws the closed shape(this is all about drawing by numbers)
context.lineWidth= 10;
context.lineJoin= "round"
//creates rounded edges
//EXPLAIN THE COLOR SPACE AND LINE COLOR
context.strokeStyle= "rgba (255, 0, 0, 1)"
context.stroke();
//creates a stroke along the above defined line (one pixel)
//This is about drawing by coordinates but not the typical cartesian layout
context.fillStyle = "yellow";
context.fill()
//Second Shape
context.moveTo(100,100);
//this tells dw the starting point of a shape
context.lineTo(300,300);
//termination of the first line
context.lineTo(500,100);
context.closePath();
//draws the closed shape(this is all about drawing by numbers)
context.lineWidth= 10;
context.lineJoin= "round"
//creates rounded edges
//EXPLAIN THE COLOR SPACE AND LINE COLOR
context.strokeStyle= "rgba (255, 0, 0, 1)"
context.stroke();
//creates a stroke along the above defined line (one pixel)
//This is about drawing by coordinates but not the typical cartesian layout
context.fillStyle = "blue";
context.fill()
//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 = "pink";
//fill the shape
context.fill();
//SECOND SHAPE
context.beginPath();
context.moveTo(450, 200);
context.lineTo(600, 500);
context.lineTo(700, 300);
context.closePath();
context.lineWidth = 10;
//creates shapp corners - three types of linesJoin are "miter" , "round" , or "bevel" / try each
context.lineJoin = "miter";
//use your color picker again here from http://bit.ly/2xoDfM0 or http://www.color-hex.com/
context.fillStyle = "rgba(150, 150, 150, 1)";
context.fill();
//use the decimal in the aplha here (0.5)
context.strokeStyle = "rgba(0, 0, 0, 1)";
// the "a" stands for aplpha chanel which is the transparency of the line or object / 0 = invisible - 1 = solid color - use decimals to fade between
//creates the stroke
context.stroke()
//telling dw we are creating a closed shape
context.beginPath();
//this tells dw the starting point of a shape
context.moveTo(300,100);
//termination of the first line
context.lineTo(350,400);
//creates a second line
context.lineTo(500, 300);
//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
//telling dw we are creating a closed shape
context.beginPath();
//this tells dw the starting point of a shape
context.moveTo(650,100);
//termination of the first line
context.lineTo(450,500);
//creates a second line
context.lineTo(600, 500);
//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
//telling dw we are creating a closed shape
context.beginPath();
//this tells dw the starting point of a shape
context.moveTo(150,100);
//termination of the first line
context.lineTo(250,500);
//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
//telling dw we are creating a closed shape
context.beginPath();
//this tells dw the starting point of a shape
context.moveTo(50,100);
//termination of the first line
context.lineTo(100,300);
//creates a second line
context.lineTo(150, 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
//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 , 6 , 2)";
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 = "yellow";
//fill the shape
context.fill();
// starting point coordinates
var startX = 200;
var startY = canvas.height/100;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1;
var cpointY = canvas.height / 6 + 100;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/3;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 7;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
// starting point coordinates
var startX = 5;
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,255)";
context.stroke();
context.beginPath();
context.arc(288, 35, 70, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = '#35000';
context.stroke();
context.beginPath();
context.rect(508, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//telling dw we are creating a closed shape
context.beginPath();
//this tells dw the starting point of a shape
context.moveTo(100,150);
//termination of the first line
context.lineTo(200,200);
//creates a second line
context.lineTo(150, 50);
//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
// begin custom shape
context.beginPath();
context.moveTo(200, 50);
context.bezierCurveTo(140, 100, 160, 150, 230, 150);
context.bezierCurveTo(200, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(120, 5, 150, 20, 250, 50);
context.bezierCurveTo(100, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 10;
context.strokeStyle = 'green';
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('Julia Alves', 20, 550);
context.closePath();
</script>
</body>
</html>
Comments
Post a Comment