Skip to main content

Assignment 1: Canvas Object experiment

Dear Blog, 
My first assignment was to experiment with coding canvas shapes on dreamweaver (super cool and confusing program) and this was my result... Lets just call it abstract art. 



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();

//use your color picker again here from http://bit.ly/2xoDfM0 or http://www.color-hex.com/
context.fillStyle = "rgba(500, 150, 250, 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()


//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(200,200);

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

//creates a second line
context.lineTo(600, 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();

//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,50);

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

//creates a second line
context.lineTo(300, 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

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

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

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

//creates a second line
context.lineTo(100, 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();

//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(200,200);

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

//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

// 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,255)";
context.stroke();

// starting point coordinates
var startX = 1;
var startY = canvas.height/3;

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

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

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


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();

// 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();

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

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

// 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 = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();

 /// 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(700, 700 , 400 , 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 = "red";

  //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 = "bevel";

  //use your color picker again here from http://bit.ly/2xoDfM0 or http://www.color-hex.com/
context.fillStyle = "rgba(500, 150, 250, 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()



Comments

Post a Comment

Popular posts from this blog

New Beginnings

Dear Blog, So I guess I should introduce myself.. My name is Erika Peitersen and I am super excited for my Digital Media class, which is the point of this blog. I will be posting all of my assignments and projects to share with fellow eyes. Today was the first day of class and right off the bat I was learning things I had no idea about, specifically learning to draw shapes by coding. It was definitely not the easiest thing to figure out but that made it all the more interesting and challenging to me. My determination to get the hang of it I guess was driven by my inner competitor lol.. A little bit more about myself and what I expect out of this class: I am Venezuelan and Danish and I take pride in my cultural background. I think it is super important to find things that make one unique and be proud of it. I like to have a balance of activities so because of this, I find interest in the arts, photography and digital art to be specific, as well as in sports (I play for the women...
Post a Comment
Read more

Somewhere

Dear Blog,  For this project I had to photoshop myself into a setting that I've never been before so here it is! I am the new-new girl! New girl is one of my favorite shows so I thought this would be fitting haha.                                             
Post a Comment
Read more