So I finished this in class, but only just got a chance to upload. Enjoy
Saturday, September 29, 2018
Friday, September 28, 2018
Saturday, September 22, 2018
Trying something a little more difficult....
I got home and started practicing what we learned in class today. The above gif is the result of my hard work. (HaHa) Making gifs isn't so much difficult as it is time-consuming. I want to see how well I can manage to make cartoon gifs?
Multimedia Design Project 2
This was easier then I thought it would be. I had always had trouble trying to figure out how to make gifs which happens to be ironic since I can figure out video editing decently well. I know it will become more and more difficult the more animation that is added to a gif so I would like to practice more with the animation elements in my "toolbox."
Multimedia Design Class Project 1
The coding I noticed was both relatively easy and very difficult at the same time. Even with some copy and pasting, it takes a while to put it all together. Patience is truly key when it comes down to working with code. I have never been one to rush, but even I became frustrated with how long the coding and edits took. I believe I could work with code if I tried, however, I would prefer not to.
This is my coding for the shown image.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//sky
var x = 0;
var y = 0;
var width = 800;
var height = 600;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'green';
// add linear gradient
var grd = context.createLinearGradient(200, 100, 200, 350);
// dark blue
grd.addColorStop(0, "#004CB3");
// light blue
grd.addColorStop(1, "#8ED6FF");
context.fillStyle = grd;
context.fill();
//create sun
var centerX = canvas.width / 10;
var centerY = canvas.height / 12;
var radius = 100;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "yellow");
context.fillStyle = grd;
context.fill();
//TREE TRUNK
context.beginPath();
context.rect(240, 550, 20, 50);
context.fillStyle = 'brown';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'brown';
context.stroke();
//////tree top
var x = 250;
var y = 150;
var x1 = 320;
var y1 = 430;
var x2 = 180;
var y2 = 410;
var x3 = 250;
var y3 = 150;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//////tree bottom
var x = 250;
var y = 200;
var x1 = 330;
var y1 = 550;
var x2 = 170;
var y2 = 560;
var x3 = 250;
var y3 = 200;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
/////Clouds
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 5;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.75;
var centerY = canvas.height / 5;
var radius = 75;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 5;
var radius = 60;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 3.75;
var radius = 65;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.25;
var centerY = canvas.height / 4.3;
var radius = 75;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
//my body
var x = 600;
var y = 400;
var x1 = 660;
var y1 = 650;
var x2 = 450;
var y2 = 660;
var x3 = 600;
var y3 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//my head
var centerX = canvas.width / 1.28;
var centerY = canvas.height / 1.6;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 0, centerX, centerY, 100);
grd.addColorStop(0, "brown");
grd.addColorStop(1, "yellow");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 1.6;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 1.6;
var radius = 50;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 0, centerX, centerY, 100);
grd.addColorStop(0, "brown");
grd.addColorStop(1, "yellow");
context.fillStyle = grd;
context.fill();
//my hands
var centerX = canvas.width / 1.45;
var centerY = canvas.height / 1.20;
var radius = 20;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 30);
grd.addColorStop(0, "white");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.30;
var centerY = canvas.height / 1.20;
var radius = 20;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 30);
grd.addColorStop(0, "white");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
//my face
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 1.48;
var radius = 10;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 30);
grd.addColorStop(0, "white");
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)