- JavaScript
- Preschool
By the end of this, developers should be able to:
- Draw simple 2D shapes using two.js
- Animate simple 2D shapes using two.js
- Fork and clone this repository.
Today we're going to take a look at a two.js, a two-dimensional drawing API. This demonstration is a modified version basic usage section of the two.js website.
Let's see how we can use two.js to draw a not particularly pretty circle.
Include the two.js script and your circle.js script and create a div element to hold the instance of two.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>two.js demo</title>
<script src="./scripts/js/lib/two.js"></script>
<script src="./scripts/js/circle.js" defer></script>
</head>
<body>
<div id="two-js"></div>
</body>
</html>Instantiate the two object.
let element = document.getElementById('two-js');
let dimensions = {width: 600, height: 600};
let two = new Two(dimensions)
two.appendTo(element);Now we'll draw a circle with a radius of 75 px in the upper left third of the two instance.
let xPosition = two.width / 3;
let yPosition = two.height / 3;
let circle = two.makeCircle(xPosition, yPosition, 75);Now we can style the circle.
circle.fill = 'green';
circle.stroke = 'blue';
circle.linewidth = 10;Finally, we can draw the element.
two.update();Now let's draw another object and animate it.
Draw a snow person.
Bonus: make the snow person wave using object groupings and translations.
Interested in checking out other frameworks or maybe even making some 3D things?
- threeJS
- babylonJS - a JavaScript WebGL framework that seems to have more tutorials and demonstrations than threeJS to help you get started. The bablyonJS framework also includes integrated physics, whereas the three.js framework does not.
- List of WebGL Frameworks on Wikipedia
Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent