I wanted to do a old Nintendo controller because I felt coding would look cool with having an out of date reference photo. I first Googled an image of the controller and put it on the graph shell in Photoshop. I printed it out and proceeded to write all of the x,y coordinates. I followed the HTML template guide under Professor Corrigans blog, which helped a lot. Making the rectangles is what I found easiest to do, especially the four in the middle because they all of the same code so it was easy to duplicate all four of those but just moving down the Y coordinates. The most trouble I had was with the gradient color scheme for the Nintendo controller itself and with the bezier curve. It took a lot of playing around with coordinates to make everything just right and how I wanted it. I liked this project because I would have never learned how to do this otherwise but it was just really time consuming. Hope you enjoy! See reference photo below.
CODING
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0,0,800,600);
var grd = context.createLinearGradient(0,600,800,0)
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle=grd;
context.fill();
context.stroke();
//bezier cord
context.beginPath();
context.moveTo(400, 400);
context.bezierCurveTo(240, 780, 870, 270, 750, 900);
context.lineWidth=11;
context.stroke();
//Outer edge council
context.beginPath();
context.rect(50,150,700,300);
context.lineWidth=5;
context.fillStyle= "Gray";
context.fill();
context.stroke();
//inner edge council
context.beginPath();
context.rect(75,180,650,240);
var grd = context.createLinearGradient(0,600,800,0)
grd.addColorStop(0,'rgb(100,100,100)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle=grd;
context.fill();
context.stroke();
//direction buttons
context.beginPath();
context.moveTo(165,262);
context.lineTo(165,310);
context.lineTo(125,310);
context.lineTo(125,350);
context.lineTo(165,350);
context.lineTo(165,390);
context.lineTo(210,390);
context.lineTo(210,350);
context.lineTo(250,350);
context.lineTo(250,310);
context.lineTo(210,310);
context.lineTo(210,265);
context.lineTo(165,265);
context.fillStyle= "Gray";
context.fill();
context.stroke();
//button 1
context.beginPath();
context.rect(510,330,70,70);
context.fillStyle= "Gray";
context.fill();
context.stroke();
//button 2
context.beginPath();
context.rect(605,330,70,70);
context.fillStyle= "Gray";
context.fill();
context.stroke();
//circle in button 1
context.beginPath();
context.arc(545,365,30,0,2*Math.PI,false);
context.fillStyle= "red";
context.fill();
context.stroke();
//circle in button 2
context.beginPath();
context.arc(640,365,30,0,2*Math.PI,false);
context.fillStyle= 'rgb(215,0,0)';
context.fill();
context.stroke();
//middle rectangles
context.beginPath();
context.rect(325,200,150,25);
context.fillStyle= "Gray";
context.fill();
context.stroke();
context.beginPath();
context.rect(325,250,150,25);
context.fillStyle= "Gray";
context.fill();
context.stroke();
context.beginPath();
context.rect(325,300,150,25);
context.fillStyle= "Gray";
context.fill();
context.stroke();
context.beginPath();
context.rect(325,350,150,50);
context.fillStyle= "gray";
context.fill();
context.stroke();
//tiny buttons in middle
context.beginPath();
context.rect(350,368,38,15);
context.fillStyle= "Gray";
context.fill();
context.stroke();
context.beginPath();
context.rect(410,368,38,15);
context.fillStyle= "Gray";
context.fill();
context.stroke();
//start button
context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("S", 350, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('S', 350, 272);
context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("T", 370, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('T', 370, 272);
context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("A", 390, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('A', 390, 272);
context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("R", 410, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('R', 410, 272);
context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("T", 430, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('T', 430, 272);
//B button
context.font = 'Bold 18px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("A", 570, 417);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('A', 570, 417);
//A button
context.font = 'Bold 18px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("B", 665, 417);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('B', 665, 417);
//Nintendo Name
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("N", 530, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('N', 530, 272);
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("i", 550, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('i', 550, 272);
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("n", 560, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('n', 560, 272);
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("t", 580, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('t', 580, 272);
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("e", 590, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('e', 590, 272);
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("n", 610, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('n', 610, 272);
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("d", 630, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('d', 630, 272);
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("o", 650, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('o', 650, 272);
//R circle
context.beginPath();
context.arc(680,240,10,0,2*Math.PI,false);
context.lineWidth=2;
context.strokeStyle = 'red';
context.stroke();
context.font = 'Bold 18px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("R", 675, 247);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('R', 675, 247);
//chip quadratic
context.beginPath();
context.moveTo(300, 148);
context.quadraticCurveTo(400, 50, 500, 148);
context.fillStyle= "Gray";
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment