Tuesday, May 29, 2012
Monday, May 28, 2012
Project 1 HTML Canvas Drawing
I've finally completed my first project, the html canvas drawing and I am very pleased with the end result. It is an abstract drawing, but I used calculated dimensions to get a certain look for the image. The more I played with coding working on this project, the clearer everything became and was a lot of fun trying different dimensions and colors to create my own little masterpiece. I also used graph paper to draw the background using different size squares to add an extra aesthetic element, by doing that I got a clearer view of the dimensions and how to layer different objects the way I wanted. Below is the VERY long list of codes I used for my canvas, and a few images of my progress from beginning to end.. Still working on how to save my image a jpeg.
Code
<!DOCTYPE HTML><html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
for (var i=0; i<canvas.height; i+=10) {
context.beginPath();
var startX = 50;
var startY = 50;
var endX = canvas.width/2;
var endY = canvas.height/2;
// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, canvas.width, canvas.height);
// inner circle
var circ1X = 50;
var circ1Y = 10;
var circ1Radius = 100;
// outer circle
var circ2X = 20;
var circ2Y = 30;
var circ2Radius = i;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgb(100,100,240)");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.9;
grd.addColorStop(N, "rgb(200,250,250)");
// outer color
grd.addColorStop(1, "rgb(234,137,235)");
context.fillStyle = grd;
context.fill();
context.stroke();
}
/////// BEZIER CURVE #2
for (var i=0; i<canvas.height; i+=10) {
var startX = 500; ////canvas.height/.5;
var startY = i;
// starting point coordinates
var endX = 700; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+",150,243)";
context.stroke();
}
//// BEZIER CURVE #3
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 0;
// starting point coordinates
var endX = i; ////canvas.width;
var endY = 600;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/i;
var cpoint1Y = canvas.height/i; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+","+i/3+",240)";
context.stroke();
}
/////// BEZIER CURVE #1
for (var i=0; i<canvas.height; i+=10) {
var startX = 600; ////canvas.height/.5;
var startY = 400;
// starting point coordinates
var endX = i/8; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb("+i/2+",150,243)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 600; ////canvas.height/.5;
var startY = 500;
// starting point coordinates
var endX = 800; ////canvas.width;
var endY = i/2;
//control point 1 coordinates ( magnet )
var cpoint1X = i/8;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*.1/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i/2+","+i+",230)";
context.stroke();
}
//////// BIG RECTANGLES
//1
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 0, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(255,255,255)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(425, 0, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 75, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 150, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 225, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 300, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(125, 0, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 75, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(275, 150, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(350, 225, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(425, 300, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 375, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 450, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 525, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 150, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 225, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 300, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(225, 375, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 450, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 525, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////21
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 600, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////22
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 450, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 525, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 600, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////////SMALL SQUARES INSIDE BIG
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(275, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(25, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(250, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(325, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(25, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////// LITTLE SQUARES #1
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(600, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(700, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(350, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(400, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(550, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(600, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(700, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(50, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(100, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(250, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////21
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////22
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(350, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(400, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 500, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(550, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(600, 600, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 275, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(50, 325, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(100, 375, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////21
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 425, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////22
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 475, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(250, 525, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 575, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// LITTLE SQUARES #2
///////////SMALL SQUARES INSIDE BIG
////1
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(525, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(625, 1000, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(775, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(225, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(275, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(325, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(425, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(475, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(525, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(625, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 500, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(775, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(50, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(100, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 500, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//// BEZIER CURVE #3
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 500;
// starting point coordinates
var endX = i; ////canvas.width;
var endY = 600;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/i;
var cpoint1Y = canvas.height/i; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+","+i/3+",240)";
context.stroke();
}
/////// BEZIER CURVE #1
for (var i=0; i<canvas.height; i+=5) {
var startX = 600; ////canvas.height/.5;
var startY = 200;
// starting point coordinates
var endX = i/8; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+",150,243)";
context.stroke();
}
/////// BEZIER CURVE #2
for (var i=0; i<canvas.height; i+=10) {
var startX = 600; ////canvas.height/.5;
var startY = 650;
// starting point coordinates
var endX = i/8; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+","+i/3+",240)";
context.stroke();
}
/////// BEZIER CURVE #2
for (var i=0; i<canvas.height; i+=5) {
var startX = 0; ////canvas.height/.5;
var startY = 600;
// starting point coordinates
var endX = 0; ////canvas.width;
var endY = i;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/1/10;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i*2;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i/2.6+","+i/4+",200)"////("+i/2+",150,243)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = i/4;
// starting point coordinates
var endX = 900; ////canvas.width;
var endY = 400;
//control point 1 coordinates ( magnet )
var cpoint1X = 200;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*1/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1.5;
context.strokeStyle = "rgb("+i+","+i/2+",215)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 300;
// starting point coordinates
var endX = 900; ////canvas.width;
var endY = 400;
//control point 1 coordinates ( magnet )
var cpoint1X = 200;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*.1/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i+","+i/2+",215)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 500;
// starting point coordinates
var endX = 900; ////canvas.width;
var endY = 400;
//control point 1 coordinates ( magnet )
var cpoint1X = 200;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*6/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i+","+i/2+",215)";
context.stroke();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Monday, May 21, 2012
Beginning Digital Arts: First Week of Summer
Hello Everyone! I am highly looking forward to working with the class and all we will be learning over the course of the next six weeks in Beginning Digital Arts with Professor Santiago. From the time that I decided that the advertising world is where I saw myself, I have been excited and a little nervous to begin my design classes. I have always had a passion for writing, and know that design is just another creative way of expression for me to explore. I know this class will be challenging, but I look forward to expanding my knowledge and learning some great tools for my future. :)
Subscribe to:
Posts (Atom)