• Stars
    star
    280
  • Rank 147,492 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 16 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Primer is a Flash-like API built on top of Canvas using jQuery.
                #####  #####   ### ##     ## ##### #####   
                 #   #  #   #   #   ##   ##   #  #  #   #  
                 #   #  #   #   #   ##   ##   #     #   #  
                 ####   ####    #   # # # #   ###   ####   
                 #      #  #    #   # # # #   #     #  #   
                 #      #   #   #   #  #  #   #  #  #   #  
                ###    ###  ## ### ### # ### ##### ###  ## 


Primer. By Tom Preston-Werner.

Primer is a Flash-like API layered on top of Canvas.


INSTALL
----------------------------------------------------------------------------

Just include jQuery and Primer libraries on your page.

  <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  <script src="primer.js" type="text/javascript"></script>
  

BASIC DRAWING EXAMPLE
-----------------------------------------------------------------------------

In your html create an empty div with an id you can reference later:

  <div id="primer"></div>

In your JavaScript, create a new Primer object for the div, specifying width
and height.

  $(function() {
    var primer = new Primer("#primer", 100, 100)
    
    ...
  })

Now that you have a Primer instance, you can start adding layers to it. Start
by creating an instance of Primer.Layer:

  var square = new Primer.Layer()

Now you can draw on the layer. Let's draw a 20x20 pixel gray square.

  square.fillStyle = "#888888"
  square.fillRect(0, 0, 20, 20)
  
The square won't be drawn until it is added to the Primer instance.

  primer.addChild(square)
  
  
BASIC ANIMATION EXAMPLE
-----------------------------------------------------------------------------

If you follow the instructions in [Basic Drawing Example], you'll have an
object called `square` that has been drawn to the screen. Moving the square
to another place is as easy as setting its `x` and `y` values.

  square.x = 10
  square.y = 10
  
The square has now moved to its new location. Contrary to raw Canvas work,
Primer layers redraw themselves any time they're moved. If we'd like the
square to move slowly across the screen, we can simply increase the `x` value
on an interval.

  function go() {
    square.x += 1
  }
  
  setInterval(go, 100)
  

BASIC EVENTS EXAMPLE
-----------------------------------------------------------------------------

In Primer it's easy to attach event listeners to your Layers. Let's say we
want to log "in" and "out" when you mouse over and mouse out of your gray
square.

  square.mouseover(function() {
    console.log("in")
  })
  
  square.mouseout(function() {
    console.log("out")
  })
  

BASIC TEXT EXAMPLE
-----------------------------------------------------------------------------

Primer implements a basic version of Canvas' text api with standard DOM
elements since no major browser release yet offers this. Let's draw the text
"Hello, World!" in 12px Monaco in red at (0, 0) with a max width of 100px:

  var text = Primer.Layer()
  text.font = "12px Monaco"
  text.fillStyle = "#FF0000"
  text.textAlign = "center"
  text.fillText("Hello, World!", 0, 0, 100)
  
The signature of fillText() is (text, x, y, width). The font attribute takes
standard CSS font values.

The text API currently does not support any transformations except
translation. 

More Repositories

1

chronic

Chronic is a pure Ruby natural language date parser.
Ruby
3,237
star
2

god

Ruby process monitor
Ruby
2,210
star
3

grit

**Grit is no longer maintained. Check out libgit2/rugged.** Grit gives you object oriented read/write access to Git repositories via Ruby.
Ruby
1,970
star
4

clippy

Clippy is a very simple Flash widget that makes it possible to place arbitrary text onto the client's clipboard.
939
star
5

mojombo.github.io

Jekyll source for my personal blog.
HTML
935
star
6

tpw

697
star
7

proxymachine

A simple TCP routing proxy built on EventMachine that lets you configure the routing logic in Ruby.
Ruby
583
star
8

ernie

Ernie is an Erlang/Ruby BERT-RPC Server.
Erlang
463
star
9

erlectricity

Erlectricity exposes Ruby to Erlang and vice versa.
Ruby
349
star
10

tomdoc

A flexible code documentation specification with human readers in mind.
333
star
11

mustache.erl

Mustache template engine for Erlang.
Erlang
239
star
12

bert

BERT (Binary ERlang Term) serialization library for Ruby.
Ruby
206
star
13

github-flavored-markdown

GitHub's Flavor of Markdown
183
star
14

bertrpc

BERTRPC is a Ruby BERT-RPC client library.
Ruby
164
star
15

sf-vegetarian-restaurants

A list of awesome vegetarian-friendly restaurants in SF
141
star
16

rakegem

Simple gem and release management with customizable Rake tasks.
Ruby
130
star
17

egitd

The Erlang git-daemon
Erlang
115
star
18

bert.erl

Erlang BERT encoder/decoder
Erlang
98
star
19

asteroids

Destroy your Atom editor, Asteroids style!
JavaScript
94
star
20

gollum-demo

Gollum test repo
Perl
75
star
21

rebar

Ruby to Erlang Bridge And Runner
Erlang
63
star
22

yaws

YAWS is an erlang web server
Erlang
42
star
23

omniship

Ruby API for Shipper APIs (UPS, FedEx, DHL)
Ruby
37
star
24

glowstick

A realtime, OpenGL graphing library for Ruby
Ruby
35
star
25

mastering-git-basics

A presentation on Git basics using ShowOff
JavaScript
35
star
26

octobeer

The GitHub Kegerator
27
star
27

cubesixel

A pixel font (native size 7x7) I made in a different life
27
star
28

vanhelsing

Super streamlined memory profiler with real time graphs for Ruby programs
Ruby
23
star
29

erlang_pipe

A pipe implementation in pure Erlang
Erlang
21
star
30

fixture-scenarios

This plugin allows you to create 'scenarios' which are collections of fixtures and ruby files that represent a context against which you can run tests.
Ruby
18
star
31

v8

C++
18
star
32

scoped

Scope access for multiple services in Ruby. Warning: OLDSCHOOL CODE!
Ruby
10
star
33

pyberry

A tool for systems analysis.
10
star
34

30daysoflaptops.github.io

CSS
8
star
35

conceptual_algorithms

6
star
36

mojombo.github.com

Old location of Jekyll source for tom.preston-werner.com
6
star
37

erlectricity-presentation

5
star
38

endo

Test repo for talk.
4
star
39

fakegem

This is a fake gem so I can test GitHub's gem building when I need to
Ruby
4
star
40

mojombo

3
star