Loading repository data…

doodle-js GitHub Details, Stars and Alternatives | OpenRepoFinder

lamberta / repository

doodle-js

A JavaScript animation library for HTML5 Canvas.

Archived

View Repository on GitHub ↗

REPOSITORY OVERVIEW

Live repository statistics

★ 236Stars

⑂ 21Forks

◯ 1Open issues

◉ 236Watchers

README preview

This project is currently inactive, but feel free to fork and contribute.
I continue to reference the code in this project a lot, and in fact Doodle.js lead directly to the book Foundation HTML5 Animation with JavaScript, the examples can be found here: https://github.com/lamberta/html5-animation The difference being that the book does not use any external libraries, just JavaScript and the Canvas API, while Doodle.js implements some of the ActionScript API since I came over from the Flash world. Personally, I now just add these methods as needed instead of importing the entire library, but your preference my differ.
In summary, while the code here can be useful, if you are just beginning to animate with the canvas, I'd suggest you take a look at the examples in the html5-animation repo, and buy the book to get a better understanding how they work ;)

Doodle-js

A JavaScript Animation Library for HTML5 Canvas.

Tested on Chrome/WebKit, looking good on Firefox 4.
Requires a browser with support for HTML5 Canvas and some ECMAScript 5 capabilities.

Some of the features:

Use the Canvas drawing API with sprites and a scene graph.
Event handling and dispatch for objects.
Nodes maintain transforms, bounds, and other useful properties.
A clean api with a focus on good JavaScript style.
Influenced by ActionScript 3, jQuery, Node.js, and JSLint.
Easy to add to an existing page element where Flash no longer displays.
Integrated runtime information provided by Stats.js.

Basic build instructions (minified version with the Closure Compiler installed):

git clone git://github.com/billyist/doodle-js.git
./build/make-doodle => ./build/doodle.js

Debugging version (type-checking and some useful error messages):

./build/make-doodle -D => ./build/doodle-debug.js

For more options: ./build/make-doodle -h

From hello-world.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #display { width: 400px; height: 400px; }
    </style>
  </head>
  <body>
    <div id="display"></div>
    <script src="./build/doodle.js"></script>
    <script>
      doodle.ready(function () {
        var display = doodle.createDisplay('#display'),
            text = doodle.createText("Hello, World!").appendTo(display);
        //center text
        text.x = display.width / 2;
        text.y = display.height / 2;
        //game loop
        display.on('animationFrame', function () {
          text.rotation += 4;
        });
      });
    </script>
  </body>
</html>

ALGORITHMICALLY RELATED

Similar Open-Source Projects

Selected from shared topics, language and repository description—not editorial ratings.

juliangarnier /

anime

★ 71K

JavaScript animation engine

Recently updatedPopularActive repositoryHas homepage

JavaScriptMIT#animation#anime#canvas#css

⑂ 4.8K forks◯ 110 issuesUpdated today

Project homepage ↗

View details View on GitHub ↗

motiondivision /

motion

★ 32.8K

A modern animation library for React and JavaScript

Recently updatedPopularActive repositoryHas homepage

TypeScriptMIT#animation#animation-js#motion#react

⑂ 1.3K forks◯ 121 issuesUpdated today

Project homepage ↗

View details View on GitHub ↗

greensock /

GSAP

★ 26.6K

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web