• Stars
    star
    173
  • Rank 220,124 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 10 years ago

Reviews

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

Repository Details

A library for drawing various types of grids on HTML5's Canvas.

grid

A library for drawing various types of grids on HTML5's Canvas. Here are the functions available on the grid object. Each takes a context object to draw the grid to, x, y, w and h values to form a rect where the grid will be drawn, and other parameters that usually have to do with the resolution of the grid.

square(context, x, y, w, h, majorRes, minorRes, thirdRes) // draws a square grid with three possible resolutions. Each resolution can have a different line weight and color

rect(context, x, y, w, h, resx, resy) // draws a rectangular grid where each cell can have a different width and height.

isometric(context, x, y, w, h, res) // an isometric grid. all angles are 60 degrees.

dimetric(context, x, y, w, h, res) // a dimetric or "fake isometric" grid. there are 2 different angles, but the width of one "tile" is exactly twice the height.

polar(context, x, y, w, h, res, degrees, cx, cy) // draws a polar or circular grid. you can specify the size of the concentric rings, the angle of each "slice" and the center x and y.

hex(context, x, y, w, h, res) // draws a hexagonal grid.

dots(context, x, y, w, h, majorRes, minorRes) // draws a square grid of dots. major and minor resolutions use different sized and colored dots.

hexDots(context, x, y, w, h, res) // draws a hex grid using dots

plus(context, x, y, w, h, plusSize, res) // draws a square grid using + symbols.

triangle(context, x, y, w, h, res) // draws a grid of triangles.

diamond(context, x, y, w, h, res) // draws a grid of diamonds.

celtic(context, x, y, w, h, res) // draws a square grid overlayed with a diamond grid. useful for drawing celtic knot patterns.

Properties: These affect how the grid is drawn - line width, color, dot size. The major properties affect lines/dots drawn at the major resolution, minor affects the minor resolution, and third, the third resolution.

majorLineWidth
majorStrokeStyle
majorDotSize
majorFillStyle

minorLineWidth
minorStrokeStyle
minorDotSize
minorFillStyle

thirdLineWidth
thirdStrokeStyle

All demos

More Repositories

1

CodingMath

JavaScript
1,125
star
2

quicksettings

JavaScript library for making a quick settings panel to control code parameters.
JavaScript
449
star
3

gifloopcoder

HTML/JS Library/App for coding looping gif animations.
JavaScript
306
star
4

ProjectMaker

A Sublime Text 2/3 plugin to allow creating any kind of project from your own custom templates
Python
233
star
5

tones

JavaScript
129
star
6

shaky

JavaScript Canvas drawing library for drawing shaky lines and shapes.
JavaScript
105
star
7

lab

Daily visual code experiments.
JavaScript
91
star
8

shapes

JavaScript
63
star
9

version

What version do I have of ___?
Shell
45
star
10

clrs

Color lib for HTML/JS. Lots of easy ways to generate colors for use in CSS or Canvas drawing.
JavaScript
34
star
11

wiki_example

30
star
12

minimalcomps2

A Web UI toolkit for creating rapid prototypes, experiments and proof of concept projects.
JavaScript
30
star
13

tutorials

JavaScript (and other?) tutorials
JavaScript
29
star
14

tinpig

A fast, lightweight command line utility to create projects of any kind from templates.
JavaScript
26
star
15

minicomps

JavaScript
25
star
16

bitlibjs

A collection of useful JS utils. Mostly math and graphics related.
JavaScript
21
star
17

STProjectMaker-templates

Sample templates for STProjectMaker
Makefile
20
star
18

perlin_noise_to_angle

JavaScript
15
star
19

bitlib-rs

A drawing, color, geometry and math library geared towards creating graphics and animation with cairo-rs
Rust
15
star
20

blgo

bitlib library for golang
Go
14
star
21

bljs

New version of bitlib js for 2021
JavaScript
14
star
22

sound-synth-music-resources

11
star
23

steggo

Go
9
star
24

bitlib_c

bitlib graphics library ported to c (gtk/cairo).
C
8
star
25

weave

JavaScript
8
star
26

curlnoise_tutorial

JavaScript
7
star
27

truchet

Go
6
star
28

lcg

Fast and simple Pseudo Random Number Generator
JavaScript
6
star
29

embeds2021

JavaScript
5
star
30

dailies

daily code experiments
Go
5
star
31

go-ansi

ANSI escape sequences for Golang
Go
4
star
32

bitface

Garmin Watch Face
Monkey C
4
star
33

bufkill

Better buffer deletion
Vim Script
4
star
34

tinpig-templates

Useful project templates for the tinpig templating utility.
Go
4
star
35

webgl_egghead

Source code for the WebGL video tutorial lessons on Egghead.io
JavaScript
4
star
36

gesso

Gesso prepares a canvas for painting (and animating).
JavaScript
3
star
37

simpledraw_chrome

A Packaged Chrome Application that is a simple drawing application.
JavaScript
2
star
38

adventofcode-go

All my advent of code submissions.
Go
2
star
39

c_iso

Isocmetric drawing library written in C using Cairo Graphics.
C
2
star
40

blcairo

Go
1
star
41

july2018gifs

a gif a day for july, made in golang
Go
1
star
42

7doc

7 days of code
JavaScript
1
star
43

blgrids

Go
1
star
44

rds

Reaction Diffusion simulation
Go
1
star
45

boxbreath

cli app to guide you through a box breathing session
Go
1
star
46

strange_explorer

Explore strange attractor algorithms.
C
1
star
47

bitlib

Go
1
star
48

omdb-graphql

GraphQL interface for the Open Movie Database API
JavaScript
1
star
49

tinpig2

Go
1
star