Project #1

Artist Statement
By creating my image for our first project, I started off by figuring out what kind of background I wanted.  Since the background should be the first layer so that the images can be seen on top, I figured that would be easiest.  I then drew out my trees and the location of the flowers on my graph paper to make deciding the coordinates easier.  To create the trees, I used a combination of bezier and quadratic curves.  The flowers are strictly quadratic curves each with a circle in the center to represent the pollen.  This image is actually inspired by a mixed media painting I did for a recent art show.  I thought it would be interesting to create the digital version.  My piece is successful because I followed the guidelines of creating a landscape or portrait, creating a minimum of 10 shapes, and using bezier and quadratic curves.


var grdstartX=400;
var grdstartY=0;
var grdendX=400;
var grdendY=600;
var startx=0;
var starty=0;
var rectwidth=800;
var rectheight=600;

//Background
context.beginPath();
context.rect(startx, starty, canvas.width, canvas.height);
context.lineWidth=5;
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
//dark red
grd.addColorStop( 0, "rgb( 51,0,0)");
//light red
grd.addColorStop( 1,"rgb( 255,0,0)");
context.fillStyle=grd;
context.fill();
context.stroke();
var controlX=200;
var controlY=500;
var endX=150;
var endY=400;
var controlX2=100;
var controlY2=300;
var endX2=150;
var endY2=200;
var controlX3=200;
var controlY3=100;
var endX3=150;
var endY3=25;
var controlX4=125;
var controlY4=375;
var endX4=50;
var endY4=350;
var controlX5=150;
var controlY5=100;
var endX5=50;
var endY5=100;
var controlX6=150;
var controlY6=250;
var controlX7=250;
var controlY7=275;
var endX6=250;
var endY6=200;
//Tree #1
context.beginPath();
context.moveTo(150,600);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineWidth = 15;
context.moveTo(150,400);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.moveTo(150,200);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.moveTo(170,550);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.moveTo(110,400);
context.lineTo(25,410);
context.moveTo(130,250);
context.quadraticCurveTo(controlX5, controlY5, endX5, endY5);
context.moveTo(120,130);
context.lineTo(50,150);
context.moveTo(130,325);
context.bezierCurveTo(controlX6, controlY6, controlX7, controlY7, endX6, endY6);
context.moveTo(240,240);
context.lineTo(300,250);
context.moveTo(175,75);
context.lineTo(210,25);
//tree color
context.strokeStyle = 'brown';
context.stroke();
var controlX=650;
var controlY=500;
var endX=575;
var endY=400;
var controlX2=450;
var controlY2=225;
var endX2=675;
var endY2=50;
var controlX3=550;
var controlY3=350;
var endX3=410;
var endY3=410;
var controlX4=600;
var controlY4=375;
var controlX5=750;
var controlY5=425;
var endX4=750;
var endY4=350;
var controlX6=525;
var controlY6=200;
var endX5=425;
var endY5=200;
var controlX7=560;
var controlY7=200;
var controlX8=710;
var controlY8=225;
var endX6=725;
var endY6=125;
//Tree #2
context.beginPath();
context.moveTo(600,600);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineWidth = 15;
context.moveTo(575,400);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.moveTo(600,450);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.moveTo(600,450);
context.bezierCurveTo(controlX4, controlY4, controlX5, controlY5, endX4, endY4);
context.moveTo(534,310);
context.quadraticCurveTo(controlX6, controlY6, endX5, endY5);
context.moveTo(530,250);
context.bezierCurveTo(controlX7, controlY7, controlX8, controlY8, endX6, endY6);
context.moveTo(600,125);
context.lineTo(525,75);
context.moveTo(500,382);
context.lineTo(475,450);
//tree color
context.strokeStyle = 'brown';
context.stroke();

var controlX15=700;
var controlY15=140;
var endX15=710;
var endY15=110;
var controlX16=700;
var controlY16=75;
var endX16=730;
var endY16=90;
var controlX17=770;
var controlY17=50;
var endX17=760;
var endY17=90;
var controlX18=790;
var controlY18=125;
var endX18=760;
var endY18=125;
var controlX19=750;
var controlY19=150;
var endX19=725;
var endY19=125;
//Flower #3
context.beginPath();
context.moveTo(725,125);
context.quadraticCurveTo(controlX15, controlY15, endX15, endY15);
context.quadraticCurveTo(controlX16, controlY16, endX16, endY16);
context.quadraticCurveTo(controlX17, controlY17, endX17, endY17);
context.quadraticCurveTo(controlX18, controlY18, endX18, endY18);
context.quadraticCurveTo(controlX19, controlY19, endX19, endY19);
context.lineWidth=5;
//Flower color
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();
var centerX=740;
var centerY=110;
var radius=5;
//Center of flower #3
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();
var controlX10=390;
var controlY10=450;
var endX10=375;
var endY10=400;
var controlX11=300;
var controlY11=400;
var endX11=350;
var endY11=350;
var controlX12=375;
var controlY12=300;
var endX12=400;
var endY12=350;
var controlX13=450;
var controlY13=300;
var endX13=450;
var endY13=360;
var controlX14=500;
var controlY14=375;
var endX14=440;
var endY14=400;
//flower #2
context.beginPath();
context.moveTo(440,400);
context.quadraticCurveTo(controlX10, controlY10, endX10, endY10);
context.quadraticCurveTo(controlX11, controlY11, endX11, endY11);
context.quadraticCurveTo(controlX12, controlY12, endX12, endY12);
context.quadraticCurveTo(controlX13, controlY13, endX13, endY13);
context.quadraticCurveTo(controlX14, controlY14, endX14, endY14);
context.lineWidth=5;
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();
var centerX=400;
var centerY=375;
var radius=10;
//Center of flower #2
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();
var controlX20=10;
var controlY20=375;
var endX20=25;
var endY20=325;
var controlX21=0;
var controlY21=260;
var endX21=50;
var endY21=275;
var controlX22=100;
var controlY22=250;
var endX22=75;
var endY22=310;
var controlX23=110;
var controlY23=330;
var endX23=70;
var endY23=340;
var controlX24=75;
var controlY24=370;
var endX24=50;
var endY24=350;
//Flower #4
context.beginPath();
context.moveTo(50,350);
context.quadraticCurveTo(controlX20, controlY20, endX20, endY20);
context.quadraticCurveTo(controlX21, controlY21, endX21, endY21);
context.quadraticCurveTo(controlX22, controlY22, endX22, endY22);
context.quadraticCurveTo(controlX23, controlY23, endX23, endY23);
context.quadraticCurveTo(controlX24, controlY24, endX24, endY24);
context.lineWidth=5;
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();

var centerX=50;
var centerY=315;
var radius=10;

//Center of flower #4
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();

var controlX1=175;
var controlY1=225;
var endX1=200;
var endY1=150;
var controlX2=175;
var controlY2=50;
var endX2=250;
var endY2=100;
var controlX3=300;
var controlY3=50;
var endX3=300;
var endY3=100;
var controlX4=350;
var controlY4=125;
var endX4=300;
var endY4=175;
var controlX5=300;
var controlY5=225;
var endX5=250;
var endY5=200;
//Flower #1
context.beginPath();
context.moveTo(250,200);
context.quadraticCurveTo(controlX1, controlY1, endX1, endY1);
context.quadraticCurveTo(controlX2, controlY2, endX2,endY2);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.quadraticCurveTo(controlX5, controlY5, endX5, endY5);
context.lineWidth = 5;
//Flower color
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();

//Center of flower#1
var centerX=250;
var centerY=150;
var radius=15;
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();