Canvas Project- Scrappy Doo

     In this project, we were to pick an image, draw it, and then remake the image using HTML code on a canvas. The image I picked was Scrappy Doo from the cartoons. When I was first sketching this cartoon, I realized how some parts of it are more complex lines and some are much more simple and easy to draw using code. After having the image drawn, I used Adobe Dreamweaver and HTML code to start tracing the outline of Scrappy using shapes, quadratic curves, and Bezier curves. After I was done tracing my sketch, I starting to fill in the different shapes that I had drawn. This is where I encountered my first problem. I was unable to fill in the body of Scrappy doo because his body was most drawn using quadratic curves. I tried my hardest to figure out a way to fill in his body, but the code did not allow it because it does not count the curves that I used to make his body as completed shapes. Despite this hiccup, I continued to make the background and added some shapes into his body to make it look a little bit more cubist and interesting. The background was made with 5 different colors and a circle gradient that I pulled toward the bottom of the screen to have half moon type of effect.

    Overall, this project took me about 15 hours total to complete. I believe that I learned a lot about HTML code during this process but I am definitely no expert. I think if I were to do this project again I would figure out a different way to draw the body of Scrappy so that I am able to fill him in brown. However, I am still happy with the picture and I think that the different crazy colors resemble how crazy of a character that Scrappy was in the TV show.



FULL CODE:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">



<title> CANVAS PROJECT 1- SCRAPPY DOO </title>



<!-- import external .js scripts here -->

<!-- <script type="text/javascript" src="#" ></script> -->


<!-- modify CSS properties here --> 

<style type="text/css">

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; 
}

</style>

</head>



<body>

<div id="container">
<!-- START HTML CODE HERE --> 



<canvas id="fmxCanvas" width="700" height="900"></canvas>

<div id="display"></div>

<img src="Scrappy.png" alt="Scrappy" id="img1" />


<!-- FINISH HTML CODE HERE --> 
</div>

<script>

///////////////////////////////////////////////////////////////////////
// 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 
var img1 = new Image();
    img1 = document.getElementById("img1");

///////////////////////////////////////////////////////////////////////
// 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

context.drawImage(img1, 0, 0, canvas.width, canvas.height);

//Background 
var bkgdgrd  = context.createRadialGradient(350, 900, 50, 350, 900, 600);
bkgdgrd.addColorStop(0, "rgba(122,0,128,1.00)");
    bkgdgrd.addColorStop(0.2, "rgba(128,0,128,1.00)");
    bkgdgrd.addColorStop(0.4, "rgba(255,0,64,1.00)");
    bkgdgrd.addColorStop(0.6, "rgba(0,255,255,1.00)");
    bkgdgrd.addColorStop(0.8, "rgba(255,0,0,1.00)");
    bkgdgrd.addColorStop(1, "rgba(110,43,212,1.00)");
    
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.closePath();
context.fillStyle = bkgdgrd;
context.fill();
//Left Ear
context.beginPath();
    
        context.moveTo(254,178);
        context.bezierCurveTo(231,172,346,72,365,115);
context.bezierCurveTo(394,90,278,199,254,178);
        
    context.closePath();  
context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";   
    context.lineWidth = 5;   
    context.stroke();
context.beginPath();
    
        context.moveTo(350,129);
        context.bezierCurveTo(257,159,322,281,347,201);
context.bezierCurveTo(369,164,355,119,350,129);
  
    context.closePath();
context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    context.lineWidth = 5;
    context.stroke();
context.beginPath();
    
        context.moveTo(365,111);
        context.bezierCurveTo(337,120,261,281,439,190);
//context.bezierCurveTo(mouseX,mouseY,261,281,365,111);
  
    context.closePath();
context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    context.lineWidth = 5;
    context.stroke(); 


//Right Ear
 context.beginPath();
    
        context.moveTo(498,33);
        context.bezierCurveTo(425,94,450,238,555,283);
context.bezierCurveTo(600,184,630,141,498,33);
        
    context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
context.beginPath();
    
        context.moveTo(525,207);
        context.bezierCurveTo(482,152,498,114,525,106);
context.bezierCurveTo(600,163,476,254,525,207);
context.closePath();
context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
//Head
context.beginPath();
    
        context.moveTo(562,270);
        context.bezierCurveTo(606,403,582,468,444,511);
        context.bezierCurveTo(7,527,348,-7,562,270);
    context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
context.beginPath();
 
context.moveTo(180,286);
context.bezierCurveTo(95,388,254,465,258,424);
  context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
context.beginPath();
context.moveTo(283,263);
        context.bezierCurveTo(190,190,134,306,230,359);
        context.bezierCurveTo(335,325,317,288,283,263);
    context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();

 

 //face
context.beginPath();
      context.moveTo(384, 292);
      context.quadraticCurveTo(386,314,410,318);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(473, 341);
      context.quadraticCurveTo(482,358,463,377);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(436, 339);
      context.quadraticCurveTo(438,348,446,355);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(434, 339);
      context.quadraticCurveTo(435,357,413,367);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(229, 361);
      context.bezierCurveTo(241,471,431,502,413,367);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
///eye1
context.beginPath();
      context.moveTo(319, 267);
      context.bezierCurveTo(355,223,370,272,353,278);
      context.lineWidth = 5;
context.fillStyle = "white";
context.fill();
     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
context.arc(343,258,8,0*Math.PI, 2*Math.PI,false);
context.lineWidth=5
context.fillStyle = 'rgba(0,0,0,1.00)';
context.fill();
context.strokeStyle="rgba(0,0,0,1)";
context.stroke();
///eye2
context.beginPath();
      context.moveTo(455, 252);
      context.bezierCurveTo(389,220,389,278,397,287);
 context.bezierCurveTo(385,272,431,331,455,252);
      context.lineWidth = 5;
context.fillStyle = "white";
context.fill();
     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
context.arc(417,253,9,0*Math.PI, 2*Math.PI,false);
context.lineWidth=5
context.fillStyle = 'rgba(0,0,0,1.00)';
context.fill();
context.strokeStyle="rgba(0,0,0,1)";
context.stroke();
///eyebrows
context.beginPath();
      context.moveTo(325, 228);
      context.quadraticCurveTo(338,240,367,239);
      context.lineWidth = 10;

      context.strokeStyle = "black";
      context.stroke();
context.beginPath();
      context.moveTo(393, 229);
      context.quadraticCurveTo(426,241,449,211);
      context.lineWidth = 10;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(249, 243);
      context.quadraticCurveTo(317,264,359,281);
      context.lineWidth = 7;

      context.strokeStyle = 'black';
      context.stroke(); 
//collar

context.beginPath();
      context.moveTo(213, 469);
      context.quadraticCurveTo(211,469,201,492);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(212, 470);
      context.quadraticCurveTo(229,462,249,462);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(200, 492);
      context.quadraticCurveTo(223,477,235,488);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(193, 518);
      context.quadraticCurveTo(117,580,243,747);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(235, 489);
      context.quadraticCurveTo(204,496,196,501);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(196, 501);
      context.quadraticCurveTo(196,501,193,544);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(193, 544);
      context.quadraticCurveTo(228,537,248,532);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
      context.moveTo(248, 532);
      context.quadraticCurveTo(252,511,256,493);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(242, 508);
      context.quadraticCurveTo(236,434,278,461);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(242, 508);
      context.quadraticCurveTo(257,455,278,461);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(250, 491);
      context.quadraticCurveTo(269,492,271,499);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(277, 462);
      context.quadraticCurveTo(382,466,463,525);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(423, 532);
      context.quadraticCurveTo(435,533,446,548);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(463, 525);
      context.quadraticCurveTo(459,522,446,548);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
 context.stroke();
//body
context.beginPath();
    
    context.moveTo(135,802);
    
context.lineTo(162, 801);
    context.lineTo(145, 760);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(235,702);
    
context.lineTo(262, 701);
    context.lineTo(275, 760);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(279,702);
    
context.lineTo(362, 651);
    context.lineTo(345, 690);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(280,602);
    
context.lineTo(230, 601);
    context.lineTo(300, 660);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(435,702);
    
context.lineTo(400, 701);
    context.lineTo(420, 660);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
      context.moveTo(193, 518);
      context.quadraticCurveTo(117,580,243,747);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(391, 588);
      context.quadraticCurveTo(399,610,397,660);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(171, 790);
      context.quadraticCurveTo(168,680,217,711);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(172, 754);
      context.quadraticCurveTo(146,676,126,737);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(426,741 );
      context.quadraticCurveTo(251,792,142,835);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
 
context.beginPath();
      context.moveTo(98,719 );
      context.quadraticCurveTo(53,786,142,835);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(131, 724);
      context.bezierCurveTo(137,686,86,694,101,738);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(426,742);
      context.quadraticCurveTo(427,782,496,739);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(496,739);
      context.quadraticCurveTo(533,695,481,695);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(484,676);
      context.quadraticCurveTo(513,672,503,700);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(464,670);
      context.quadraticCurveTo(491,646,497,674);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(371, 679);
      context.bezierCurveTo(407,656,480,603,457,700);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
///arm1
context.beginPath();
      context.moveTo(132, 440);
      context.quadraticCurveTo(162,443,211,470);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(120, 431);
      context.bezierCurveTo(118,457,148,436,128,406);
      context.lineWidth = 5

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(100, 410);
      context.quadraticCurveTo(113,392,128,406);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(86, 402);
      context.quadraticCurveTo(100,383,112,400);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(97, 384);
      context.quadraticCurveTo(122,367,127,404);

      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(100, 388);
      context.bezierCurveTo(64,364,-25,462,176,539);
      context.lineWidth = 5;


      context.strokeStyle = 'black';
      context.stroke();
///arm2
 context.beginPath();
      context.moveTo(369, 513);
      context.bezierCurveTo(466,512,411,587,391,588);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(270, 502);
      context.quadraticCurveTo(278,636,393,588);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(294, 485);
      context.quadraticCurveTo(276,488,270,502);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(289, 500);
      context.quadraticCurveTo(299,466,317,486);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(310, 495);
      context.quadraticCurveTo(320,476,350,493);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(351, 492);
      context.quadraticCurveTo(342,498,343,512);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(336, 499);
      context.quadraticCurveTo(330,515,355,514);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(353, 514);
      context.quadraticCurveTo(369,533,342,535);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(342, 535);
      context.quadraticCurveTo(354,536,356,546);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE 
///////////////////////////////////////////////////////////////////

// CREDITS

context.save();
var credits = "Michael Gunderson, Scrappy Doo Canvas Projext, 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

  1. Gabe NonkenNovember 18, 2020 at 11:54 AM

    I think this looks super impressive. Coding something with so many curves and shapes must have taken a lot of time but it looks just like scrappy doo. I like the colors and the gradient you used in the background but I would suggest filling in all of scrappy doo with brown so he stands out better. Still really nice and shows a lot of skill in Dreamweaver.

    ReplyDelete
  2. Eileen ClesiNovember 27, 2020 at 12:21 PM

    I also think you should fill in scrappy's body so he stands out more and it could give it like a 3D effect. I like how the curves came out in the background. Great job!

    ReplyDelete

Post a Comment

Popular posts from this blog

Gunderson Autoscopy

Image
           For this project, we were to create an autoscopy in Adobe Photoshop, which meant we had to re create a picture of ourselves in a cool and different way using other images with different layering tools and techniques. I had 5 pictures that I used in this project, and they are below. The goal that I was going for with my autoscopy was to represent myself and my creative side. In the back ground is the Willis tower, which represents my home town of Chicago. Behind that is a record store shelf to represent my love for music. I decided to mask my sweatshirt in a stone pattern to represent my inner strength. I played with the hue and saturation on my flannel, then I added the swirly pattern over parts of the building and the records. Finally, I used the brush tool to draw onto my eyes in order to make things look cooler and more vibrant. Overall, this project took me about 5 hours total to complete and I had a lot of fun making it. I think that this is...
Read more

InDesign Tutorials

 https://www.youtube.com/watch?v=ka2dh5wU6Es https://www.youtube.com/watch?v=mVW8AF2TMnw https://www.youtube.com/watch?v=iHDy_nEvgd4     After watching these three tutorials, I learned a lot about the program and its tools. Some of my favorite tools that I understand and would like to use are the type tool, the frame tool, the shape tool, and the page tool. All of these tools make it possible to make layouts with different texts and images. I think that these tools will be some of the most common ones that I use in my work.      I think that the hardest indesign tools that I may have to use are the scissors tool and the convert direction point tool. I think that these tools will be difficult for me to use because it is hard for me to understand when I would use them. I think that the scissor tool may be useful, but I don't think that I will have to use it in my assignments because I won't need to cut anything out of my pages. I think that the convert direct...
Read more

Gunderson Black and White to Color

Image
          In this project, we were to use Adobe Photoshop to convert a picture of ourselves into black and white. After converting our photo black and white, we were asked to add different colors to the picture, following three of the different color rules and using different selection and coloring techniques. The three color rules I chose to follow were monochromatic, triad, and square. I really liked the color combinations with my base color when I was checking out all of the different color rules, so I decided to pick these three. Overall, I really had a lot of fun making this project and I feel like it helped me learn more about arranging layers as well as masking things in photoshop. This project took me about four hours to complete and I am happy with how it came out. 
Read more