Canvas Experiment

For my canvas experiment, I decided to create a digital version of a plant that I have in my room. The plant itself has the colors green, yellow, orange and red in the leaves, and the shape of the leaves are obviously very organic, along with the lines flowing throughout the leaves. The plant is very interesting to look at and is visually very pleasing to the eye, so I decided to make it in digital form. The project itself took me well over 10 hours, probably around 13 or 14, just because I had to restart twice at the beginning, because I didn't know what I was doing. Once I understood the graphing translation to the canvas part, however, I found it much easier to complete.

I started with the graphing paper, and translated the points from paper to computer. I would move my cursor over to a point I thought felt "right", then I plugged them all in to the computer. I did this with every point, making adjustments along the way as I worked. I used my paper "sketch" as a reference, and then wrote down each of the points I was going to use. Once finished, I then plugged it all into the computer. This was relatively easy, after figuring out how to plot the points and translate the code.

I think my project is artistically successful because I was able to extract key elements from my plant (the color and the organic shape and line) and put them into dreamweaver in a more abstracted way. The final piece wasn't exactly what I had in mind, because translating it from graph paper to a computer was harder than I thought, but I'm very happy with what I was able to do. The lines and shapes in the piece are what really helped create a certain feel or "mood" in my opinion, because the fragility of the lines, along with the organic feel and warmer background gradient create this calming, warming environment all throughout the work. The transparent circles were strategically placed to help create balance in the composition, balancing out the leaves on both sides of the work. I chose darker and lighter tones of green to help add depth without shadow, and made them more rounded to create that organic feel.

----------------------------------------------------------------------------------------------------------------------------

Code:

<!doctype html>

<html>

<head>

body,td,th {

font-family: Monaco, "Courier New", "monospace";

font-size: 14px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#container {

position: relative;

text-align: left;

width: 95%;

height: 800px;

}

#fmxCanvas {

position: relative;

background-color:rgba(255,255,255,1);

border: rgba(255,255,255,1) thin dashed;

cursor: crosshair;

display: inline-block;

}

@media (max-width : 570px ){

}

</style>

</head>

<body>

</div>

///////////////////////////////////////////////////////////////////////

// DECLARE requestAnimFrame

var rAF = window.requestAnimFrame ||

window.mozRequestAnimFrame ||

window.webkitRequestAnimFrame ||

window.msRequestAnimFrame;

var fps = 30;

window.requestAnimFrame = (

function(callback) {

return rAF ||

function(callback) {

window.setTimeout(callback, 1000 / fps);

};

})();

///////////////////////////////////////////////////////////////////////

// DEFINE GLOBAL VARIABLES HERE

var canvas;

var context;

canvas = document.getElementById("fmxCanvas");

context = canvas.getContext("2d");

var canvas1;

var context1;

canvas1 = document.createElement("canvas");

context1 = canvas1.getContext("2d");

canvas1.width = canvas.width;

canvas1.height = canvas.height;

var display;

display = document.getElementById('display');

var counter;

///////////////////////////////////////////////////////////////////////

// DEFINE YOUR GLOBAL VARIABLES HERE

///////////////////////////////////////////////////////////////////////

// CALL THE EVENT LISTENERS

window.addEventListener("load", setup, false);

//////////////////////////////////////////////////////////////////////

// ADD EVENT LISTENERS

canvas.addEventListener("mousemove", mousePos, false);

//////////////////////////////////////////////////////////////////////

// MOUSE COORDINATES

var stage, mouseX, mouseY;

function mousePos(event) {

stage = canvas.getBoundingClientRect();

mouseX = event.clientX - stage.left;

mouseY = event.clientY - stage.top;

}

/////////////////////////////////////////////////////////////////////

// INITIALIZE THE STARTING FUNCTION

function setup() {

/////////////////////////////////////////////////////////////////////

// DECLARE STARTING VALUES OF GLOBAL VARIABLES

counter = 0;

mouseX = canvas.width/2;

mouseY = canvas.height/2;

/////////////////////////////////////////////////////////////////////

// CALL SUBSEQUENT FUNCTIONS, as many as you need

clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS

draw(); // THIS IS WHERE EVERYTHING HAPPENS

}

////////////////////////////////////////////////////////////////////

// CLEAR THE CANVAS FOR ANIMATION

// USE THIS AREA TO MODIFY BKGD

function clear() {

context.clearRect(0,0,canvas.width, canvas.height);

context1.clearRect(0,0,canvas.width, canvas.height);

// clear additional contexts here if you have more than canvas1

}

////////////////////////////////////////////////////////////////////

// THIS IS WHERE EVERYTHING HAPPENS

function draw() {

counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS

if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER

clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS

////////////////////////////////////////////////////////////////////

// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE

// background color

context.beginPath();

context.rect(0, 0, 600, 600);

var grd = context.createLinearGradient(300, 0, 300, 500);

grd.addColorStop(0, "rgba(179,42,42,1.00)");

grd.addColorStop(.85, "rgba(225,136,63,1.00)");

grd.addColorStop(1, "rgba(250,188,106,1.00)");

context.fillStyle = grd;

context.fill();

context.closePath();

// background circles

// circle 1

var centerX = canvas.width / 2;

var centerY = canvas.height / 8;

var radius = 200;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(214,72,72,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(167,112,81,0.50)";

context.stroke();

context.closePath();

// circle 2.5

var centerX = canvas.width / 1;

var centerY = canvas.height / 8;

var radius = 200;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(162,93,93,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(183,130,130,0.50)";

context.stroke();

// circle 8

var centerX = canvas.width / 3;

var centerY = canvas.height / 7.5;

var radius = 100;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(185,53,53,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(132,71,71,0.50)";

context.stroke();

// circle 7

var centerX = canvas.width / 3;

var centerY = canvas.height / 1.2;

var radius = 140;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(214,188,71,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(225,206,196,0.50)";

context.stroke();

context.closePath();

// circle 5 (mid orange)

var centerX = canvas.width / 2.5;

var centerY = canvas.height / 2.5;

var radius = 100;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(160,87,42,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(185,130,130,0.50)";

context.stroke();

context.closePath();

// circle 3.5

var centerX = canvas.width / 7;

var centerY = canvas.height / 2;

var radius = 130;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(208,128,79,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(185,130,130,0.50)";

context.stroke();

context.closePath();

// circle 4.5

var centerX = canvas.width / 6;

var centerY = canvas.height / 4;

var radius = 130;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(208,79,79,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(185,130,130,0.50)";

context.stroke();

context.closePath();

// circle 1.5

var centerX = canvas.width / 6.5;

var centerY = canvas.height / 1;

var radius = 80;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(187,184,101,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(191,85,85,0.50)";

context.stroke();

context.closePath();

// circle 1.7

var centerX = canvas.width / 1.5;

var centerY = canvas.height / 2;

var radius = 200;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(179,96,54,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(187,134,134,0.50)";

context.stroke();

context.closePath();

//leaf 1

// inner leaf of leaf 1

context.beginPath();

context.moveTo(222,440)

context.lineTo(0,600);

context.lineWidth = 12.5;

// line color

context.beginPath();

context.moveTo(185,421)

context.quadraticCurveTo(62, 476, 11, 586);

context.moveTo(0,600)

context.quadraticCurveTo(222, 444, 222, 438);

context.moveTo(0,600)

context.quadraticCurveTo(183, 560, 250, 470);

context.strokeStyle = '#186031';

context.stroke();

context.fillStyle = '#41702A';

context.fill();

context.closePath();

context.beginPath();

context.moveTo(222,440)

context.lineTo(0,600);

context.lineWidth = 1.5;

// line color (black)

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = '#2A491B';

context.fill();

context.closePath();

// leaf 1 outline

context.beginPath();

context.moveTo(222,440)

context.quadraticCurveTo(61, 330, 0, 600);

context.moveTo(222,440)

context.quadraticCurveTo(400, 600, 5, 600);

context.lineWidth = 3;

// line color

context.strokeStyle = 'black';

context.stroke();

context.closePath();

// stem

context.beginPath();

context.moveTo(220,440)

context.quadraticCurveTo(250, 300, 220, 113);

context.moveTo(250,468)

context.quadraticCurveTo(240, 270, 260, 113);

context.moveTo(191,585)

context.quadraticCurveTo(190, 594, 185, 600);

context.moveTo(254,563)

context.quadraticCurveTo(255, 580, 257, 600);

context.fillStyle = '#2B4F1A';

context.fill();

context.lineWidth = 3;

// line color

context.strokeStyle = 'black';

context.stroke();

context.closePath();

//leaf 2

context.beginPath();

context.moveTo(232,232)

context.quadraticCurveTo(200, 232, 178, 208);

context.moveTo(230,240)

context.quadraticCurveTo(202, 238, 175, 222);

context.moveTo(179,209)

context.quadraticCurveTo(175, 148, 0, 149);

context.moveTo(176,222)

context.quadraticCurveTo(64, 228, 0, 149);

context.moveTo(179,209)

context.lineTo(176,222);

context.moveTo(178,216)

context.lineTo(0,150);

context.fillStyle = '#41702A';

context.fill();

context.lineWidth = 2;

// line color

context.strokeStyle = 'black';

context.stroke();

context.closePath();

//leaf 3

context.beginPath();

context.moveTo(261,116)

context.quadraticCurveTo(334, 67, 350, 0);

context.moveTo(221,116)

context.quadraticCurveTo(200, 38, 150, 0);

context.moveTo(219,114)

context.lineTo(261,114);

context.moveTo(250,114)

context.quadraticCurveTo(253, 50, 220, 0);

context.lineWidth = 1;

// line color

context.strokeStyle = 'black';

context.stroke();

context.closePath();

context.fillStyle = '#18300C';

context.fill();

// leaf coming forward

context.beginPath();

context.moveTo(130,0)

context.quadraticCurveTo(120, 100, 60, 0);

context.moveTo(109,50)

context.lineTo(99,0);

context.lineWidth = 2.9;

// line color

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = '#41702A';

context.fill();

context.closePath();

// small leaf 5

context.beginPath();

context.moveTo(259,123)

context.quadraticCurveTo(288, 112, 300, 99);

context.moveTo(259,130)

context.quadraticCurveTo(288, 122, 300, 109);

context.moveTo(300,99)

context.quadraticCurveTo(328, 71, 371, 61);

context.moveTo(300,109)

context.quadraticCurveTo(344, 108, 371, 61);

context.moveTo(300,100)

context.lineTo(301,110)

context.moveTo(370,61)

context.lineTo(300,105)

context.lineWidth = .9;

// line color

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = '#1A3D09';

context.fill();

context.closePath();

// leaf 6

context.beginPath();

context.moveTo(250,358)

context.quadraticCurveTo(290, 351, 309, 356);

context.moveTo(250,363)

context.quadraticCurveTo(290, 356, 309, 361);

context.moveTo(309,356)

context.quadraticCurveTo(337, 360, 358, 357);

context.moveTo(358,357)

context.quadraticCurveTo(479, 371, 537, 465);

context.moveTo(309,361)

context.quadraticCurveTo(337, 367, 357, 361);

context.moveTo(357,362)

context.quadraticCurveTo(398, 441, 537, 465);

context.moveTo(358,360)

context.lineTo(537,465)

context.lineWidth = .9;

// line color

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = '#2A481B';

context.fill();

context.closePath();

//leaf 7

context.beginPath();

context.moveTo(254,166);

context.bezierCurveTo(289, 143, 334, 133, 340, 140);

context.moveTo(254,171);

context.bezierCurveTo(289, 148, 334, 138, 340, 145);

context.moveTo(338,140);

context.bezierCurveTo(381, 105, 426, 88, 496, 89);

context.moveTo(340,145);

context.bezierCurveTo(389, 155, 445, 139, 496, 89);

context.moveTo(496,89);

context.lineTo(340,140);

context.moveTo(340,145);

context.lineTo(340,140);

context.lineWidth = 1.2;

// line color

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = '#2A491B';

context.fill();

context.closePath();

// transparent circles

// circle 2

var centerX = canvas.width / 16;

var centerY = canvas.height / 1.5;

var radius = 100;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(219,165,131,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(219,201,185,0.50)";

context.stroke();

context.closePath();

// circle 4 (bottom left)

var centerX = canvas.width / 1;

var centerY = canvas.height / 1 ;

var radius = 300;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(160,162,93,0.50)";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "rgba(168,189,103,0.50)";

context.stroke();

context.closePath();

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////

// CREDITS

context.save();

var credits = "Josephine Weller, Plant, FMX 210, FA 2020";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.restore();

//////////////////////////////////////////////////////////////////

// HTML DISPLAY FIELD FOR TESTING PURPOSES

display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);

/////////////////////////////////////////////////////////////////

// LAST LINE CREATES THE ANIMATION

requestAnimFrame(draw); // CALLS draw() every nth of a second

}

</script>

</body>

</html>

----------------------------------------------------------------------------------------------------------------------

Comments

Tyler MurckoNovember 22, 2020 at 12:04 PM
I'm still amazed with how well you did this in Dreamweaver Josephine! I love how realistic the plants look, I love the colors you chose, as well as the circles you added in. I can see how long your code is and can tell that this project took lots of time and effort. I hope you got an A+ because that's what I would grade this. Great job!

Search This Blog

Digital Media

Canvas Experiment

Comments

Post a Comment

Popular posts from this blog

PsH2

PsH3