Two.js Puppy | Coder Projects

Download Complete Project 39k | .zip file

Description

Drawing with code can be a walk in the park with the help of Javascript and the handy drawing library Two.js. In just a few lines of code your browser becomes your sketchbook.

A great project for: Dog lovers, doodlers, and javascript junkies.

Medium

Skills Needed: Basic Javascript, Basic HTML, Basic CSS

Skills Learned: Basic Two.js, Working with Javascript Libraries

Submitted By: Coder Team

Before we get started with two.js.

Drawing a puppy seems simple (and it is with Two.js!) but it requires a little experience with Javascript first. If you’ve never ventured into the JS tab on Coder you might want to start with a previous project.

Previous Coder Project: Night & Day

This project will introduce you to Javascript, the JS tab and how to make your computer do some of the thinking for you.

Previous Coder Project: Clock

What time is it? You’ll finally be able to answer that question after you’ve built this simple clock.

Download: Two.js Library

In this project we’ll be using a 2D drawing library for Javascript. You can download the two.js file here (right click the link and download to your desktop). There's also a ton more to learn about at the Two.js website.

Step 1: Setting up our sketchbook.

Let’s get drawing! We’ll need to do a little bit of set up, but once we’ve got the pieces in place we’ll be able to draw with just a few lines of code. First we’ll upload the Two.js library to our project, then we’ll tell the code how to find Two.js. We’re actually already using some other helpful javascript libraries, like jQuery & Ace, so adding Two.js will be a breeze. In fact you can use all sorts of helpful libraries with Coder using these same steps.

If you haven’t already, go ahead and download Two.js it should be a file called: two.js.
Start a new Coder app and call it whatever you’d like. We’ll call ours “Two Puppy”.
First thing’s first, let’s add the two.js file to our app. We’ll do that just like an image or audio file. Open the media tab, hit the + button, and upload the two.js file you downloaded earlier.
Look in the <head> tag of your HTML, you’ll see a few lines that point to other .js files we’re using, they look something like this: <script src="/static/common/js/jquery.min.js"></script>
Duplicate one of those lines and delete the src path inside the quotes. Now with your cursor still in between the quotes, open the media folder, hover over two.js, and select Paste to Code.

Our code looks like this. Note that your path might look a tiny bit different if you've named your project differently.

While we’re in the HTML, tab let’s delete everything out of the <body> and add a new <div> with id “doodle”. We’ll use this <div> a bit later.

Our full <body> code looks like this:

Last set-up step! Delete everything in the CSS tab and give your body a nicer color than just plain old white.

Our full CSS code looks like this:

body { background-color: #FFFAED; }

Nothing to look at quite yet. But now it’s on to the JS tab where all the magic happens.

Step 2: A simple circle.

With two.js and just a few lines of code we can start drawing simple shapes anywhere in the browser window. Here’s the first bit of javascript we’ll add (inside the $(document).ready( function() ) to our JS tab to draw a blue circle. We’ll go through it line by line below.

Our code looks like this:

$(document).ready( function() { var elem = document.getElementById('doodle'); var two = new Two({fullscreen: true}).appendTo(elem); var dot = two.makeCircle(120, 120, 100); dot.fill = '#52C5DC'; dot.noStroke(); two.update(); });

Not too crazy, right? Let’s go through line by line and see what each does.

In the first line we create a variable called elem and save the location of the ‘doodle’ <div> we made in our HTML tab.
Line 2 is the big one, it creates a new Two.js instance and gives it the variable name two. You have a few options at this point, but the only thing we’re going to worry about is fullscreen: true this tells Two.js to make your drawing area the full size of your browser window. The .appendTo(elem) attaches our new Two instance to the “doodle” <div>. This is useful in case we want to have more than one Two.js instance on a page and just good practice.
Finally, we’re drawing a circle! Two.js has a bunch of helper methods to draw simple shapes like circles. two.makeCircle() is one of those functions. It needs three numbers to work. The first two are x and y coordinates that say where the center point of the circle should be, the third number is the circle’s radius. So this line of code basically says “Draw a circle named ‘dot’ with the center 120 pixels over from the left, 120 pixels down from the top, and with a radius of 100 pixels.”
The next 2 lines are just 2 of many properties of the circle we can change. .fill let’s us set a color for our circle using familiar HEX colors and .noStroke() tells Two.js that we don’t want to draw an outline around the circle.
Finally, we need to tell Two.js to draw everything! We do this by calling the two.update() function. For this project we just need to have that line at the end of our code, but in more advanced projects there are other ways to tell Two.js to draw.

If you’ve got everything typed in correctly you should see a blue circle in the top left of your preview screen. Try changing some of the numbers used for the circle or swap in your favorite HEX color.

Step 3: Just Doodling.

Step 2 covered the basics of Two.js but before we dive into drawing our puppy let’s play with 2 more draw functions in Two.js: makeLine() & makeRectangle(). They do just what you’d expect, but require slightly different code. Try adding this code before two.update().

Our code looks like this:

var rect = two.makeRectangle(260,120, 210,100); rect.fill = '#6cbf58'; rect.stroke = '#ffffff'; rect.linewidth = 5; var line = two.makeLine(20,20, 210,300); line.stroke = '#ff4c22'; line.linewidth = 8;

Based on the circle, you can probably guess what’s going on here, but let’s look at a few of the details.

two.makeRectangle() does exactly that, you just need to give it an x and y for the center point, a width, and a height. So this line says “Make a rectangle named ‘rect’ 260 pixels over from the left, 120 pixels down from the bottom, 210 pixels wide, and 100 pixels tall.”
Then we use some new properties of rect, .stroke set’s our rectangles stroke color and .linewidth let’s us say how many pixels thick the stroke should be. Simple.
two.makeLine()... makes a line! We just give it 2 x and y points and it connects the dots. We can use the same .stroke and .linewidth to style it.

You can probably imagine all sorts of cool things to draw with just these shapes. Go ahead and play around with some of the numbers or create more circles, rectangles, and lines. We’ll start fresh in step 4 to draw our puppy.

Step 4: Puppy Positioning.

Now that we know how to draw basic shapes we can draw almost anything. When you can draw anything, why not draw a puppy? To help us draw we’re going to use a few more tricks and variables, just to make it a little bit easier.

Also, up until now we haven’t exactly explained the x and y numbers that determine position, but it’s simple. Two.js uses a basic coordinate system with 0,0 in the upper left corner of your browser, with the numbers increasing as you move down and to the right. X gets bigger to the Right, Y gets bigger toward the bottom. You’ll find that almost all graphics programming uses this same coordinate system.

So with all that in mind, let’s write some code to draw a circle in the middle of our screen, no matter what size our browser is.

Go ahead and delete all the javascript you’ve written (or even start fresh Coder app) and write this inside the $(document).ready( function() function.

Our code looks like this:

var elem = document.getElementById('doodle'); var two = new Two({fullscreen: true}).appendTo(elem); var position = new Two.Vector(two.width/2, two.height/2); var head = two.makeCircle(position.x, position.y, 100); head.fill = '#52C5DC'; head.noStroke(); two.update();

We really only needed one new line of code to center the circle in our screen. Let’s take a look.

Our third line of code creates a new Two.js Vector that we’ve named position. A Two.Vector is simply a variable that can hold 2 numbers instead of 1, perfect for coordinates! You can access each number by adding .x or .y to the name of your vector.
Instead of assigning static numbers the position vector we’re using another feature of Two.js: two.width and two.height. Since we’ve already told Two.js to be the full size of our browser these are easy ways to get the width and height of the browser window. And dividing two.width and two.height by 2 will give us the center point of the browser every time.
The last thing we need to do is use our new position vector to draw a circle. So instead of using numbers for the two.makeCircle() center point, we’re saying: position.x and position.y. (We can’t just say position, because the circle method expects 2 numbers separated by a comma.)

Preview your app now and try resizing and refreshing the app. The circle won’t move when you resize the browser, just when you refresh, but it’s still a great way to position things when you’re not sure what size the browser window will be.

Step 5: Puppy Time.

Oddly enough, we’re almost done! Using everything we’ve learned we can draw (almost) all of the pieces of a puppy. Check out how we’re drawing the rest of the puppy in the code below. One important thing to note, you’ll need to draw your shapes in the order you want them layered. Just like real paint, the first thing you draw will be at the bottom.

Our code after head.noStroke(); looks like this:

var nose; nose = two.makeCircle(position.x, position.y+30, 32); nose.fill = '#EFB8D2'; nose.noStroke(); var eyeLeft; eyeLeft = two.makeCircle(position.x+42, position.y-26, 32); eyeLeft.fill = '#FFFFFF'; eyeLeft.noStroke(); var pupilLeft; pupilLeft = two.makeCircle(position.x+42, position.y-26, 20); pupilLeft.fill = '#7FC35E'; pupilLeft.noStroke(); var earLeft; earLeft = two.makeEllipse(position.x-100, position.y-80, 26, 46); earLeft.fill = '#52C5DC'; earLeft.noStroke(); earLeft.rotation = Math.PI / 4;

It looks like a lot, but it’s really just same bit of code we used to draw our circle repeated for other parts of the puppy. There are a few new things in there to draw the ear that we’ll explain now.

Find the earLeft shape. See how we’re drawing an Ellipse, using two.makeEllipse()? This method works exactly like two.makeRectangle(), but will draw an oval shape instead. You just define the center point, width, and height. Easy.
We want to draw our ear ellipse at an angle and, of course, Two.js makes it easy with a property we can modify: .rotation. We specify rotation in Radians, which are a bit odd, but easy to work with. We won’t get into the details of the math but by multiplying and dividing π (3.14159265…) by different numbers we can change the rotation of our shape. To get pi in javascript we can write Math.Pi. Try changing the numbers in the code to see how the ear rotates.

We still need to draw the right side of the puppy! Try making the right eye, pupil, and ear on your own based on the left side’s code. If you’re feeling lazy our code is below.

Our code looks like this:

var eyeRight; eyeRight = two.makeCircle(position.x-42, position.y-26, 32); eyeRight.fill = '#FFFFFF'; eyeRight.noStroke(); var pupilRight; pupilRight = two.makeCircle(position.x-42, position.y-26, 20); pupilRight.fill = '#7FC35E'; pupilRight.noStroke(); var earRight; earRight = two.makeEllipse(position.x+100, position.y-80, 26, 46); earRight.fill = '#52C5DC'; earRight.noStroke(); earRight.rotation = -Math.PI / 4;

Our puppy is almost complete, but he’s missing a mouth! That’s a more complex shape that we’ll cover in our final step.

Step 6: Lickity Split.

Two.js has a few helpful methods to draw simple shapes like circles, rectangles, lines, and ellipses, but if we want to draw more complex shapes we’ll have to do it ourselves. Our puppy’s tongue is basically half an ellipse, but that makes it a unique shape that we’ll draw using a new method called two.makePolygon(). It works a little bit like a two.makeLine() but we can use as many points as we want. Check out the code for our tongue.

Our code looks like this:

var tongue; tongue = two.makePolygon(0,0, 100,0, 100,0, 90,58, 50,80, 10,58, 0,0); tongue.curved = true; tongue.fill = '#EE3E36'; tongue.noStroke();

If you preview this code you’ll see the tongue is pretty big and stuck in the top left corner. That’s ok, we can reposition, scale, and rotate it later. Here’s what these first few lines are doing.

We passed 7 sets of x,y coordinates into the makePolygon method to define the shape. To make things easier to write we started at 0,0 and then added points in the order we wanted them to connect
tongue.curved is a new property that we set to true to tell Two.js to make the connections between the points curved. This is so we have a rounded tongue. You can try changing it to false and see what happens.
You might notice we doubled up the points (100,0) and (0,0). This is a little hack to make the top left and top right of the tongue have a hard angle instead of a rounded corner. When Two.js tries to make a curved edge between two points that are in the exact same location we get a corner.
The last few lines should look familiar to you, just basic styling of the tongue.

Now let’s get the tongue in the right place. Here’s a few more lines of code with some new properties that help us position the tongue.

Our code looks like this:

tongue.translation.x = position.x-40; tongue.translation.y = position.y+86; tongue.scale = 0.4; tongue.rotation = Math.PI / 5;

The first 2 lines use the property .translation to shift the tongue down and left on the screen. We have to specify if we’re shifting on the x or y axis by adding a .x or .y to .translation. Also, notice we’re using our position variable to easily find the center of the screen.
The next new property is .scale. It works with decimal numbers, 1 is equal to 100%, so 0.4 is 40%.
One last line to rotate the tongue and we’re done!

That’s it! Preview your app, and if everything is written correctly you should see your new puppy.

Bonus Rounds

Now that we’ve got the basics of drawing done, let’s see what else we can make with Two.js.

It’s a Zoo out there Medium

Dogs, cats, and snakes?! With the same techniques we used to draw a puppy see if you can create other crazy critters.

Explore Two.js Hard

You can do a lot more than simple drawings with Two.js. Head over to the Two.js website to learn more about drawing, animation, and interactivity.

Coder Projects to Try Next

Like drawing with code? There’s more than one way to get pixels on the page. Try these other coder projects to make more cool things and learn more useful stuff.

Make Your Own Mondrian

Paint makes a mess. Code is so much cleaner. Use this project to recreate a classic Modern artwork, Piet Mondrian’s Composition II in Red, Blue, and Yellow in your browser with CSS and HTML.

Open Project

Easy

Music Boxes

Let’s turn it up. This project will transform your browser into a simple instrument that you can use to make music.

Open Project

Medium