Champion of the World!

For my Calligram Project, I wanted to focus on another sport that I was quite passionate about. I decided to choose Formula 1. The project idea was quite simple, use letters to shape the trophy that is awarded to the driver who wins the yearly "World Drivers Championship".

reference image of the trophy

It wasn't as simple as it seemed. Firstly, just drawing the shape with a computer mouse was quite cumbersome, but I managed to get it nicely done. From there, I converted the line shape to lettering, and for the lettering, I decided to use each of the countries/cities of the 21 race tracks on the 2019 F1 Calendar.

From there, I needed to decorate the interior. I created goldish-yellow lines and then tried to fit the text onto them with the line to text tool. However, my text would be positioned awkwardly, and wouldn't fit the way I wanted it too. However, I realized I could simply rotate the blocks of text to approximately cover where the interior lines would be, so I did that, painstakingly for each line I drew on my trophy. The text on each line was taken up by a former F1 World Champion, with more recent ones up high, and older legends lower.

Here is a list of each champion on the list, and in what year they won the title:

Lewis Hamilton: 2008, 2014, 2015, 2017, 2018 (5 times, most successful British driver ever)

Nico Rosberg: 2016 (1 time, son of former champion Keke Rosberg)

Sebastian Vettel: 2010-13 (4 times, recent winning catchphrase: "Grazie Raggazi, Forza Ferrari!")

Jenson Button: 2009 (1 time)

Kimi Raikonnen: 2007 (1 time, known as the "iceman")

Fernando Alonso: 2005-06 (2 times, has also won Le Mans twice)

Michael Schumacher: 1994-95, 2000-04 (7 times, most of any driver)

Mika Hakkinen: 1998-99 (2 times, nicknamed "The Flying Finn")

Damon Hill: 1996 (1 time, son of former champion Graham Hill)

Ayrton Senna: 1988, 1990-91 (3 times, widely regarded as the greatest driver of all time)

Alain Prost: 1985-86, 1989, 1993 (4 times, nicknamed "The Professor", had a massive rivalry with Senna)

Niki Lauda: 1975, 1977, 1984 (3 times, suffered severe burns to his face and lungs from a crash in the 1976 German Grand Prix, and despite almost dying from the wounds, recovered and returned to racing just one month later)

James Hunt: 1976 (1 time, famous rival of Niki Lauda)

Juan Manuel Fangio: 1951, 1954-57 (5 times, tied with Hamilton for 2nd most all time, most successful driver from the Western Hemisphere)

Emerson Fittipaldi: 1972, 1974 (2 times, won McLaren's first ever World Championship)

Jochen Rindt: 1970 (1 time, posthumously awarded title)

Jackie Stewart: 1969, 1971, 1973 (3 times)



The final quote at the bottom is said by Sky Sports F1 Broadcaster David Croft, who always says "It's lights out and away we go!" at the start of each F1 Grand Prix. I also made the background black to highlight the interior of the trophy more.

Did we forget the ball?

I love soccer. I love to play it, I love to watch it, and recently, it has been the sport I've been watching the most. The sport of soccer itself inspired this image, which was created on Dreamweaver using HTML5 Canvas.

The theme of soccer is shown in multiple places, in the soccer ball itself (whose design is inspired by last years Champions League official match-ball), and a goalpost. I also added some aesthetic design in the background and rest of the image. The viewer should notice the sun in the top left corner, as well as a mountain in the middle of the left side (on the edge of the grass). Normally, a mountain would be larger, but it is smaller in this image, since it is a good distance away from the field. Notice the light gradient on the grass, which not only adds texture to the grass, but adds a small shadow effect for the ball.


In my work, creating lines was very important. I made a lot of shapes in this drawing, five stars, a ball, two mountain sides, a goal post, and even the sun. However, making lines that were exact was a challenge and very important to the piece. I was able to do so perfectly with the mountain and goalpost, while it was harder to do so on the ball. I couldn't shorten the lines in a few spots, where it lightly protrudes from the ball, without compromising the star's shape. Despite this, I feel that my lines were made exactly as well as they needed to be, and subtly make this image even better.

P.S. What does the title mean? I figured to make it a funny caption. A group that just played on the field asking themselves if they forgot to bring their ball with them, where the image directly answers their question.

The Champions League ball that inspired my design

My design:

Hours taken to create: 3
Lines of code (including spaces): 314



<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


//Sky
context.rect(0,0, canvas.width, canvas.height);

// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 90;
// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 200;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "#ffff00");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "#ffffcc");
// outer color
grd.addColorStop(1, "#b3d1ff");
context.fillStyle = grd;
context.fill();

//Grass
var x=0;
var y=390;
var width = 800
var height= 210;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = '#00FF00';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "#00FF00");
//intermediate color
        grd.addColorStop(0.6, "#00AA00");
        // ending color
        grd.addColorStop(1, "#00FF00");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.stroke();


//Ball
var startAngle = 0 * Math.PI;
var endAngle = 2 * Math.PI; 
context.beginPath();   
context.arc(450, 320, 120, startAngle, endAngle,  true);
context.lineWidth = 15;
context.strokeStyle = 'white';
context.fillStyle = "#0066FF";
context.fill();
context.stroke();

context.beginPath();
context.moveTo(330, 270);
context.lineTo(360, 300);
context.lineTo(360, 270);
context.lineTo(390, 240);
context.lineTo(360, 240);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(390, 240);
context.lineTo(420, 270);
context.lineTo(420, 300);
context.lineTo(450, 270);
context.lineTo(480, 300);
context.lineTo(480, 270);
context.lineTo(510, 240);
context.lineTo(480, 240);
context.lineTo(450, 210);
context.lineTo(420, 240);
context.lineTo(390, 240);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(540, 240);
context.lineTo(510, 240);
context.lineTo(540, 270);
context.lineTo(540, 300);
context.lineTo(570, 270);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(330, 360);
context.lineTo(360, 390);
context.lineTo(360, 420);
context.lineTo(390, 390);
context.lineTo(420, 420);
context.lineTo(420, 390);
context.lineTo(450, 360);
context.lineTo(420, 360);
context.lineTo(390, 330);
context.lineTo(360, 360);
context.lineTo(330, 360);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(450, 360);
context.lineTo(480, 390);
context.lineTo(480, 420);
context.lineTo(510, 390);
context.lineTo(540, 420);
context.lineTo(540, 390);
context.lineTo(570, 360);
context.lineTo(540, 360);
context.lineTo(510, 330);
context.lineTo(480, 360);
context.lineTo(450, 360);
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

//Net
context.beginPath();
context.moveTo(660, 285);
context.lineTo(715, 285);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(660, 300);
context.lineTo(735, 300);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(660, 315);
context.lineTo(750, 315);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(660, 330);
context.lineTo(765, 330);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(660, 345);
context.lineTo(770, 345);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(660, 360);
context.lineTo(775, 360);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(660, 375);
context.lineTo(780, 375);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

//LineUpDown
context.beginPath();
context.moveTo(675, 270);
context.lineTo(675, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(690, 275);
context.lineTo(690, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(705, 280);
context.lineTo(705, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(720, 285);
context.lineTo(720, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(735, 295);
context.lineTo(735, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(750, 305);
context.lineTo(750, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(765, 330);
context.lineTo(765, 390);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.stroke();

//Goal Post
context.beginPath();
context.moveTo(660, 265);
context.lineTo(660, 385);
context.lineTo(780, 385);
context.lineWidth = 10;
context.strokeStyle = 'Silver';
context.stroke();

var startAngle = 0 * Math.PI;
var endAngle = 1.5 * Math.PI; 
context.beginPath();   
context.arc(660, 390, 120, startAngle, endAngle,  true);
context.lineWidth = 10;
context.strokeStyle = 'silver';
context.stroke();


//Landscape Mountain
var x = 0;
var y = 300;
var cpointX1 = 30;
var cpointY1 = 270;
var cpointX2 = 90;
var cpointY2 = 360;
var x1 = 90;
var y1 = 330;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineTo(120, 360);
context.lineTo(150, 385);
context.lineTo(0, 385);
context.lineTo(0, 300);
context.lineWidth = 5;
context.strokeStyle = "#86592d";
context.fillStyle = "#bf8040";
context.fill();
context.lineCap = 'round'
context.stroke();

var x = 0;
var y = 360;
var cpointX = 30;
var cpointY = 330;
var x1 = 60;
var y1 = 360;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineTo(80, 385);
context.lineWidth = 5;
context.strokeStyle = "#604020";
context.stroke();


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

HW Assignment Two: The Heart

For this homework assignment, the task was to make a heart using bezier curves and control points, along with a background. My original plan was to make a small heart, and add circles around it. However, I had trouble making my heart smaller, so instead I created a rainbowesque pattern in the center of the heart, with six circles. To highlight the circles in the heart, I added a black and white gradient for the color of the heart.

Homework Assignment One: W and Square

In this assignment, the task was to code in a color filled gradient square alongside a W shape using HTML 5. I decided to make the square I was using blue, and had the gradient go from a very dark blue in the top corner, to a light blue in the bottom corner of the square. I then added a W onto the screen, using 5 lines in a yellowish color. (I made the color darker so it could be more visible on screen.) I originally was going to have them separate, but to fit the shape in the blog post easier, I decided to fit the W perfectly within the square.