Wednesday, April 29, 2015

Collage


For this project, instead of trying to pick a serious lyric with any meaning, I tried to use the most absurd one I could think of. The ridiculous lyric allowed for me to be as creative as I wanted with the collage. I have no idea why, but this image is the first thing that came to my mind when hearing this lyric. If A1 does not use this for their next ad campaign, they're crazy.

HTML Project

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

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

 var centerx = 400;
var centery = 300;
var radius = 300;

var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;



context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'orange');
grd.addColorStop(1, 'rgba(200, 0, 0, .8)');
context.fillStyle = grd;

context.fill();

 context.beginPath();
 context.arc(450, 300, 70, 0, Math.PI, false);
 context.closePath();
 context.fillStyle = 'green';
 context.fill();

 var centerx = 425;
 var centery = 265;
 var radius = 55;

 var startx = 80;
 var starty = 50;
 var startradius = 100;
 var endx = 100;
 var endy = 150;
 var endradius = 400;
 context.beginPath();
 context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
 context.fillStyle = 'green';
 context.fill();

  var centerx = 430;
 var centery = 140;
 var radius = 9;

 var startx = 80;
 var starty = 50;
 var startradius = 100;
 var endx = 100;
 var endy = 150;
 var endradius = 400;
 context.beginPath();
 context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
 context.fillStyle = 'black';
 context.fill();

   var centerx = 400;
 var centery = 140;
 var radius = 9;

 var startx = 80;
 var starty = 50;
 var startradius = 100;
 var endx = 100;
 var endy = 150;
 var endradius = 400;
 context.beginPath();
 context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
 context.fillStyle = 'black';
 context.fill();

 context.beginPath();
 context.quadraticCurveTo(375, 200, 419, 190)
 context.strokeStyle = 'black';
 context.stroke();

 context.beginPath();
 context.moveTo(445, 240);
 context.lineTo(550, 115);
 context.lineWidth = 5;
 context.strokeStyle = 'green';
 context.stroke();

context.beginPath();
 context.moveTo(425, 240);
 context.lineTo(300, 180);
 context.lineWidth = 5;
 context.strokeStyle = 'green';
 context.stroke();


 context.beginPath();
        context.moveTo(300, 300);
       
        // line 1
        context.lineTo(350, 350);
       
        //quad curve
        context.quadraticCurveTo(380, 335, 400, 300);
       
        // line 2
        context.lineTo(450, 375);
       
        //bezier curve 1
        context.quadraticCurveTo(470, 330, 525, 300);
       
        //line 3
        context.lineTo(540, 350);
       
        //quad3
        context.quadraticCurveTo(535, 400, 460, 500);
        context.quadraticCurveTo(400, 510, 350, 500);
        context.quadraticCurveTo(315, 500, 275, 450);
        context.quadraticCurveTo(260, 400, 270, 350);
        context.lineTo(300, 300);
       
        context.fillStyle = 'white';
        context.fill();
        context.lineWidth = 9;
        context.strokeStyle = 'rgb(0, 240, 100)';
        context.stroke();

var centerx = 312;
var centery = 400;
var radius = 10;

var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;

context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();

var centerx = 400;
var centery = 400;
var radius = 15;

var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;


context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();

var centerx = 434;
var centery = 434;
var radius = 9;

var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;


context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();

var centerx = 305;
var centery = 350;
var radius = 12;

var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;


context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();

var centerx = 360;
var centery = 450;
var radius = 9;

var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;


context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();

var centerx = 475;
var centery = 380;
var radius = 9;

var startx = 200;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;

context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();

var centerx = 415;
var centery = 180;
var radius = 50;

var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'rgba(0, 250, 50, .1)');
grd.addColorStop(1, 'rgba(0, 180, 0, .8)');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();

var centerx = 370;
var centery = 169;
var radius = 30;

var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);

var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'rgba(0, 250, 50, .8)');
grd.addColorStop(1, 'rgba(0, 180, 0, .9)');
//rgba stands for "red, green, blue, alpha".  Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;

//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();

//body











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

};

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

Wednesday, April 1, 2015

Photoshop Illustration

This Photoshop illustration is of the ivy covered walls at Wrigley Field. Being a huge Cubs fan, Wrigley is one of my favorite places on Earth, there is nothing like it. In my opinion, there is no better color combination found in nature than; vivid green foliage, and a bright blue sky. With the baseball season just starting, this image is always on my mind, and I can't wait to get back to the real thing. For now, my rendition of the image will have to do.

Tuesday, March 31, 2015