Monday, September 30, 2013
Mesh Project
Wednesday, September 25, 2013
Monday, September 23, 2013
Caligram Project
Nothing Gold Can Stay
by Rober Frost
Nature's first green is gold,
Her hardest hue to hold.
Her early leafs a flower;
But only so an hour.
Then leaf subsides to leaf.
So Eden sank to grief,
So dawn goes down to day.
Nothing gold can stay.
Her hardest hue to hold.
Her early leafs a flower;
But only so an hour.
Then leaf subsides to leaf.
So Eden sank to grief,
So dawn goes down to day.
Nothing gold can stay.
Original Image: http://images2.layoutsparks.com/1/175857/Fall-Leaves-beautiful-Autumn.jpg
Sunday, September 8, 2013
Final Canvas WIP: Killer Whale Swimming at Night Under Northern Lights
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//REFLECTION
context.beginPath();
context.rect(0, 0, 600, 600);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(1, "rgb(31,63,169)");
// dark blue
grd.addColorStop(1, "rgb(31,83,202)");
context.fillStyle = grd;
context.fill();
context.rect(0, 0, 600, 600);
context.fillStyle = ("rgba(0,0,0,0.2)");
context.fill();
//BLACK BACKDROP SPACE
context.beginPath();
context.rect(0, 0, 600, 320);
// add linear gradient
var grd = context.createLinearGradient(0, 0, 0.4, canvas.height);
// light blue
grd.addColorStop(0, 'green');
// dark blue
grd.addColorStop(0.5,"rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
//AURORA
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
grd.addColorStop(.855, "rgb(94,3,101)");
// Bezier Curve
context.beginPath();
context.moveTo(0, 120);
context.bezierCurveTo(200, 250, 388, 10, 600, 190);
context.lineTo(600,0);
context.lineTo(0,0);
context.lineTo(0,120);
context.lineWidth = 5;
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
grd.addColorStop(.855, "rgb(94,3,101)");
context.fillStyle = grd;
context.fill();
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
grd.addColorStop(.855, "rgb(94,3,101)");
context.fillStyle = grd;
context.strokeStyle = grd;
context.stroke();
//WATER RIPPLE BEHIND ONE
context.beginPath();
context.moveTo(140,420);
context.bezierCurveTo(260,300,800,100,300,300);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//WATER RIPPLE BEHIND TWO
context.beginPath();
context.moveTo(140,400);
context.bezierCurveTo(260,300,800,100,300,300);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//OCEAN
context.beginPath();
context.moveTo(0, 520);
context.bezierCurveTo(200, 320, 388, 650, 600, 410);
context.lineTo(600,600);
context.lineTo(0,600);
context.lineTo(0,320);
context.lineWidth = 5;
var grd = context.createLinearGradient(0, 600, 600, 600);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, "rgb(13,47,127)");
context.fillStyle = grd;
context.fill();
//WHALE BODY
context.beginPath();
context.moveTo(175, 350);
context.bezierCurveTo(350, 120, 500, 400, 420, 100);
context.bezierCurveTo(450, 3, 600, 400, 500, 310);
context.bezierCurveTo(600, 300, 50, 550, 175, 350);
context.lineWidth = 5;
context.strokeStyle = 'grey';
context.stroke();
context.fillStyle = 'black';
context.fill();
//WHITE PATCH
context.beginPath();
context.moveTo(245, 350);
context.bezierCurveTo(420, 200, 350, 400, 240, 350);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.fillStyle = 'white';
context.fill();
//GREY SADDLE
context.beginPath();
context.moveTo(450, 280);
context.bezierCurveTo(500, 300, 400, 400, 520, 270);
context.lineTo(450,280);
context.lineWidth = 5;
context.strokeStyle = 'silver';
context.stroke();
context.fillStyle = 'silver';
context.fill();
//WATER SPLASH ONE (overlapped)
context.beginPath();
context.moveTo(400, 340);
context.bezierCurveTo(350, 380, 460, 210, 520,330);
context.bezierCurveTo(510, 300, 380, 200, 350, 400);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
context.fillStyle = "rgb(7, 31, 87)";
context.fill();
//WATER SPLASH TWO
// begin custom shape
context.beginPath();
context.moveTo(350, 400);
context.bezierCurveTo(350, 380, 400, 280, 450,330);
context.bezierCurveTo(450, 330, 400, 350, 380, 380);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
context.fillStyle = "rgb(7, 31, 87)";
context.fill();
//WATER RIPPLE
context.beginPath();
context.moveTo(175,440);
context.bezierCurveTo(500,550,550,100,700,500);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//WATER RIPPLE 2
context.beginPath();
context.moveTo(175,440);
context.bezierCurveTo(550,500,500,100,800,500);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//
context.beginPath();
context.moveTo(0, 550);
context.bezierCurveTo(200, 420, 388, 700, 600, 430);
context.lineTo(600,600);
context.lineTo(0,600);
context.lineTo(0,550);
context.lineWidth = 5;
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgba(94,3,101,0.4)");
// GREEN
grd.addColorStop(.25, "rgba(19,145,40,0.3)");
//PURPLE 2
grd.addColorStop(.55, "rgba(94,3,101,0.1)");
// LIGHT BLUE
grd.addColorStop(.656, "rgba(37,241,255,0.1)");
// PURPLE 3
grd.addColorStop(.855, "rgba(94,3,101,0.2)");
context.strokeStyle = grd;
context.stroke();
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgba(94,3,101,0.8)");
// GREEN
grd.addColorStop(.25, "rgba(19,145,40,0.5)");
//PURPLE 2
grd.addColorStop(.55, "rgba(94,3,101,0.2)");
// LIGHT BLUE
grd.addColorStop(.656, "rgba(37,241,255,0.2)");
// PURPLE 3
grd.addColorStop(.855, "rgba(94,3,101,0.6)");
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
Subscribe to:
Posts (Atom)