Tuesday, March 31, 2015

Custom Graphic

I went for a more artistic approach to my graphic. I customed the pattern of the picnic blanket and the pattern of the tree. I traced out the silhouette of the birds and made them a brush as well as using an image from the internet to make the butterflies http://globe-views.com/dcim/dreams/butterfly/butterfly-03.jpg to make them a brush as well. I used brushes to create the texture of the grass as well as the clouds and used different blending modes to make them fit into the picture i was trying to create. Lastly I made the sun by creating a circle shape and three copies of the shape changing the blur on each one to create a glowing affect and used multiply to create a shadowy effect from the clouds.
Posted by at No comments:

Sunday, March 29, 2015

Magazine Cover

I reconstructed a National Geographic magazine cover with the use of three original photos from my trip to Europe. I used many different setting and tools such as the liquefy tool, shadows, color adjustments with brightness, boarders, and strokes. This was one of my reference covers:


Posted by at No comments:

Monday, March 23, 2015

self insertion



Posted by at No comments:

Tuesday, March 17, 2015

html


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ




//line one variables
var x = 400;
var y = 50;
var x2 = 400;
var y2 = 500;

//variables diag left
var x3 = 400;
var y3 = 50;
var x4 = 200;
var y4 = 400;

//variables for line first sail
var x5 = 200;
var y5 = 400;
var x6 = 400;
var y6 = 400;

//variables for bezier curve- other sail
var x7 = 400;
var y7 = 425;
var controlx2 = 450;
var controly2 = 350;
var controlx3 = 475;
var controly3 = 300;
var endx7 = 450;
var endy7 = 150;


//variables for curve sail right
var x8 = 450;
var y8 = 150;
var controlx4 = 500;
var controly4 = 225;
var controlx5 = 525;
var controly5 = 325;
var endx8 = 525;
var endy8 = 425;


//variables letter f
var a = 50;
var b = 100;
var a2 = 50;
var b2 = 150;

var a3 = 50;
var b3 = 150;
var a4 = 75;
var b4 = 150;

//variables close line second sail
var c = 525;
var d = 425;
var c2 = 400;
var d2 = 425;

//variables for letter i
var c3 = 100;
var d3 = 125;
var c4 = 100;
var d4 = 150;

var centerx = 100
var centery = 115
var radius = 2

//variables letter f
var c5 = 125;
var d5 = 110;
var c6 = 125;
var d6 = 150;

var c7 = 125;
var d7 = 110;
var controlc = 129;
var controld = 100;
var endc = 135;
var endd = 110;

var c8 = 115
var d8 = 125
var c9 = 135
var d9 = 125


//variables letter e
var e = 175;
var f = 125;
var controle = 170;
var controlf = 115;
var ende = 162.5;
var endf = 112.5;

var e2 = 162.5;
var f2 = 112.5;
var controle2 = 155;
var controlf2 = 115;
var ende2 = 150;
var endf2 = 125;

var e5 = 150;
var f5 = 125;
var controle5 = 147;
var controlf5 = 135;
var ende5 = 150;
var endf5 = 145;

var e6 = 150;
var f6 = 145;
var controle6 = 162;
var controlf6 = 160;
var ende6 = 175;
var endf6 = 145;

var e3 = 150;
var f3 = 125;
var e4 = 175;
var f4 = 125;


//variables for letter s
var e7 = 262;
var f7 = 125;
var controle7 = 250;
var controlf7 = 110;
var ende7 = 238;
var endf7 = 125;

var e8 = 238;
var f8 = 125;
var controle8 = 230;
var controlf8 = 140;
var ende8 = 250;
var endf8 = 135;

var e9 = 250;
var f9 = 135;
var controle9 = 262;
var controlf9 = 135;
var ende9 = 262;
var endf9 = 150;

var e10 = 262;
var f10 = 150;
var controle10 = 265;
var controlf10 = 153;
var ende10 = 238;
var endf10 = 153;


//variables second I
var i = 225;
var j = 125;
var i2 = 225;
var j2 = 150;

var centerx2 = 225;
var centery2 = 115;
var radius2 = 2;

//variables g
var centerx3 = 125;
var centery3 = 212;
var radius3 = 15;

var k = 125;
var l = 226;
var k2 = 125;
var l2 = 250;

var centerx4 = 125;
var centery4 = 275;
var radius4 = 25;

//letter o
var centerx5 = 162;
var centery5 = 237;
var radius5 = 12;

var centerx6 = 193;
var centery6 = 237;
var radius6 = 12;

//letter d
var centerx7 = 224;
var centery7 = 237;
var radius7 = 12;

var m = 236;
var n = 200;
var m2 = 236;
var n2 = 250;

//background variables
var startxx = 0;
var startyy = 0;
var width = 800;
var height = 600;
var grdstartxx = 400;
var grdstartyy = 100;
var grdendxxx = 400;
var grdendyyy = 500;

//variables for bottom boat
var o = 225;
var p = 500;
var o2 = 515;
var p2 = 500;

var o3 = 225;
var p3 = 500;
var controlo4 = 400;
var controlp4 = 675;
var endo5 = 515;
var endp5 = 500;

//variables for period
var centerx9 = 250;
var centery9 = 250;
var radius9 = 2;

//variables for clouds
var q = 550;
var r = 50;
var controlq = 505;
var controlr = 35;
var endq = 525;
var endr = 75;

var q2 = 525;
var r2 = 75;
var controlq2 = 510;
var controlr2 = 110;
var endq2 = 550;
var endr2 = 100;

var q3 = 550;
var r3 = 100;
var controlq3 = 580;
var controlr3 = 118;
var endq3 = 600;
var endr3 = 100;

var q4 = 600;
var r4 = 100;
var controlq4 = 640;
var controlr4 = 100;
var endq4 = 625;
var endr4 = 75;

var q5 = 625;
var r5 = 75;
var controlq5 = 640;
var controlr5 = 45;
var endq5 = 600;
var endr5 = 50;


var q6 = 600;
var r6 = 50;
var controlq6 = 575;
var controlr6 = 25;
var endq6 = 550;
var endr6 = 50;

//variables boat 3d
var s = 225;
var t = 500;
var controls = 355;
var controlt = 450;
var ends = 515;
var endt = 500;

//variable for cloud two
var q7 = 750;
var r7 = 25;
var controlq7 = 715;
var controlr7 = 30;
var endq7 = 750;
var endr7 = 75;

var q8 = 750;
var r8 = 75;
var controlq8 = 725;
var controlr8 = 105;
var endq8 = 775;
var endr8 = 100;

var q9 = 750;
var r9 = 25;
var controlq9 = 775;
var controlr9 = 0;
var endq9 = 800;
var endr9 = 50;

var q10 = 775;
var r10 = 100;
var controlq10 = 798;
var controlr10 = 0;
var endq10 = 798;
var endr10 = 115;

//variables for wave
var g = 50;
var h = 475;
var controlg = 75;
var controlh = 425;
var controlg2 = 150;
var controlh2 = 475;
var endg = 200;
var endh = 425;

var gg = 600;
var hh = 550;
var controlgg = 650;
var controlhh = 500;
var controlgg2 = 725;
var controlhh2 = 550;
var endgg = 750;
var endhh = 500;

//background
context.beginPath();
context.rect(startxx, startyy, width, height);
var grd = context.createLinearGradient(grdstartxx, grdstartyy, grdendxxx, grdendyyy);
grd.addColorStop(0, 'rgb(150, 150, 255)');
grd.addColorStop(1, 'rgb(0, 0, 150)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();



//boat 3d
context.beginPath();
context.moveTo(s, t);
context.quadraticCurveTo(controls, controlt, ends, endt);
context.lineWidth = 10;
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();


//line one
context.beginPath();
context.moveTo(x, y);
context.lineTo(x2, y2);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();


//line diagnol left
context.beginPath();
context.moveTo(x3, y3);
context.lineTo(x4, y4);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//line first sail
context.beginPath();
context.moveTo(x5, y5);
context.lineTo(x6, y6);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();


//bezier curve for other sail
context.beginPath();
context.moveTo(x7, y7);
context.bezierCurveTo(controlx2, controly2, controlx3, controly3, endx7, endy7);
context.stroke();
context.closePath();

//line bezier curve right
context.beginPath();
context.moveTo(x8, y8);
context.bezierCurveTo(controlx4, controly4, controlx5, controly5, endx8, endy8);
context.stroke();
context.closePath();


//letter f
context.beginPath();
context.moveTo(a, b);
context.lineTo(a2, b2);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(a3, b3);
context.lineTo(a4, b4);
context.lineWidth = 5;
context.stroke();
context.closePath();

//close line second sail
context.beginPath();
context.moveTo(c, d);
context.lineTo(c2, d2);
context.lineWidth = 10;
context.stroke();
context.closePath();


//letter i

context.beginPath();
context.moveTo(c3, d3);
context.lineTo(c4, d4);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();



//letter f
context.beginPath();
context.moveTo(c5, d5);
context.lineTo(c6, d6);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(c7, d7);
context.quadraticCurveTo(controlc, controld, endc, endd);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(c8, d8);
context.lineTo(c9, d9);
context.lineWidth = 5;
context.stroke();
context.closePath();


//letter e
context.beginPath();
context.moveTo(e, f);
context.quadraticCurveTo(controle, controlf, ende, endf);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(e2, f2);
context.quadraticCurveTo(controle2, controlf2, ende2, endf2);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(e3, f3);
context.lineTo(e4, f4);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(e5, f5);
context.quadraticCurveTo(controle5, controlf5, ende5, endf5);
context.stroke();
context.lineJoin = 'round';
context.closePath();

context.beginPath();
context.moveTo(e6, f6);
context.quadraticCurveTo(controle6, controlf6, ende6, endf6);
context.lineJoin = 'round';
context.stroke();




//letter s
context.moveTo(e7, f7);
context.quadraticCurveTo(controle7, controlf7, ende7, endf7);
context.stroke();
context.lineJoin = 'round';

context.moveTo(e8, f8);
context.quadraticCurveTo(controle8, controlf8, ende8, endf8);
context.stroke();
context.lineJoin = 'round';

context.moveTo(e9, f9);
context.quadraticCurveTo(controle9, controlf9, ende9, endf9);
context.stroke();

context.moveTo(e10, f10);
context.quadraticCurveTo(controle10, controlf10, ende10, endf10);
context.stroke();
context.closePath();

//letter g
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(k, l);
context.lineTo(k2, l2);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//letter O
context.beginPath();
context.arc(centerx5, centery5, radius5, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.arc(centerx6, centery6, radius6, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//letter d
context.beginPath();
context.arc(centerx7, centery7, radius7, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(m, n);
context.lineTo(m2,n2);
context.lineWidth = 5;
context.stroke();
context.closePath();


//letter second I

context.beginPath();
context.arc(centerx2, centery2, radius2, 0, 2*Math.PI, false);
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(i, j);
context.lineTo(i2, j2);
context.lineWidth = 5;
context.stroke();
context.closePath();

//period
context.beginPath();
context.arc(centerx9, centery9, radius9, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.closePath();

//bottom of boat
context.beginPath();
context.moveTo(o, p);
context.lineTo(o2, p2);
context.lineWidth = 10;
context.closePath();
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.stroke();

context.beginPath();
context.moveTo(o3, p3);
context.quadraticCurveTo(controlo4, controlp4, endo5, endp5);
context.closePath();
context.fillStyle = 'rgb(180, 150, 180)';
context.fill();
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();


//clouds
context.beginPath();
context.moveTo(q, r);
context.quadraticCurveTo(controlq, controlr, endq, endr);
context.closePath();
context.lineWidth = 62;
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();



context.beginPath();
context.moveTo(q2, r2);
context.quadraticCurveTo(controlq2, controlr2, endq2, endr2);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
context.closePath();



context.beginPath();
context.moveTo(q3, r3);
context.quadraticCurveTo(controlq3, controlr3, endq3, endr3);
context.closePath();
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(q4, r4);
context.quadraticCurveTo(controlq4, controlr4, endq4, endr4);
context.closePath();
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(q5, r5);
context.quadraticCurveTo(controlq5, controlr5, endq5, endr5);
context.closePath();
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(q6, r6);
context.quadraticCurveTo(controlq6, controlr6, endq6, endr6);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

//clouds round two
context.beginPath();
context.moveTo(q7, r7);
context.quadraticCurveTo(controlq7, controlr7, endq7, endr7);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

context.beginPath();
context.moveTo(q8, r8);
context.quadraticCurveTo(controlq8, controlr8, endq8, endr8);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

context.beginPath();
context.moveTo(q9, r9);
context.quadraticCurveTo(controlq9, controlr9, endq9, endr9);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

context.beginPath();
context.moveTo(q10, r10);
context.quadraticCurveTo(controlq10, controlr10, endq10, endr10);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

//waves
context.beginPath();
context.moveTo(g, h);
context.bezierCurveTo(controlg, controlh, controlg2, controlh2, endg, endh);
context.lineWidth= 2;
context.strokeStyle = 'rgb(0, 0, 255)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(gg, hh);
context.bezierCurveTo(controlgg, controlhh, controlgg2, controlhh2, endgg, endhh);
context.lineWidth= 2;
context.strokeStyle = 'rgb(0, 0, 255)';
context.stroke();
context.closePath();


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Posted by at No comments:
Subscribe to: Posts (Atom)