Repository: metafizzy/zdog
Branch: master
Commit: dde8684be686
Files: 67
Total size: 188.3 KB
Directory structure:
gitextract_1ppqe373/
├── .eslintrc.js
├── .github/
│ ├── contributing.md
│ └── issue_template.md
├── .gitignore
├── README.md
├── bower.json
├── demos/
│ ├── .eslintrc.js
│ ├── box-cross/
│ │ ├── box-cross.js
│ │ └── index.html
│ ├── dot-cube/
│ │ ├── dot-cube.js
│ │ └── index.html
│ ├── fullscreen/
│ │ ├── fullscreen.js
│ │ └── index.html
│ ├── hello-world-canvas/
│ │ ├── hello-world-canvas.js
│ │ └── index.html
│ ├── hello-world-svg/
│ │ ├── hello-world-svg.js
│ │ └── index.html
│ ├── hemisphere-cone-ball/
│ │ ├── hemisphere-cone-ball.js
│ │ └── index.html
│ ├── houses/
│ │ ├── houses.js
│ │ └── index.html
│ ├── kid-kit/
│ │ ├── index.html
│ │ └── kid-kit.js
│ ├── kirby-parasol/
│ │ ├── index.html
│ │ └── kirby-parasol.js
│ ├── no-illo-canvas/
│ │ ├── index.html
│ │ └── no-illo-canvas.js
│ ├── no-illo-svg/
│ │ ├── index.html
│ │ └── no-illo-svg.js
│ ├── path-commands/
│ │ ├── index.html
│ │ └── path-commands.js
│ ├── resize/
│ │ ├── index.html
│ │ └── resize.js
│ ├── shade-and-shades/
│ │ ├── index.html
│ │ └── shade-and-shades.js
│ ├── shapes/
│ │ ├── index.html
│ │ └── shapes.js
│ ├── solids/
│ │ ├── index.html
│ │ └── solids.js
│ ├── strutter/
│ │ ├── index.html
│ │ └── strutter.js
│ └── zdog-logo/
│ ├── index.html
│ └── zdog-logo.js
├── dist/
│ └── zdog.dist.js
├── js/
│ ├── anchor.js
│ ├── boilerplate.js
│ ├── box.js
│ ├── canvas-renderer.js
│ ├── cone.js
│ ├── cylinder.js
│ ├── dragger.js
│ ├── ellipse.js
│ ├── group.js
│ ├── hemisphere.js
│ ├── illustration.js
│ ├── index.js
│ ├── path-command.js
│ ├── polygon.js
│ ├── rect.js
│ ├── rounded-rect.js
│ ├── shape.js
│ ├── svg-renderer.js
│ └── vector.js
├── package.json
└── tasks/
├── .eslintrc.js
├── bundle.js
└── version.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.js
================================================
/* eslint-env node */
module.exports = {
plugins: [ 'metafizzy' ],
extends: 'plugin:metafizzy/browser',
env: {
browser: true,
commonjs: true,
},
parserOptions: {
ecmaVersion: 5,
},
rules: {
'no-var': 'off',
'max-params': [ 'error', {
max: 5,
} ],
},
};
================================================
FILE: .github/contributing.md
================================================
## Feature requests
**Add 👍 reaction** to issues for features you would like to see added to Zdog. Do not add +1 comments — [they will be deleted](https://metafizzy.co/blog/use-github-reactions-delete-plus-1-comments/).
## Reduced test cases required
All bug reports and problem issues require a [**reduced test case**](https://css-tricks.com/reduced-test-cases/). Create one by forking this any one of the [Zdog demos on CodePen](https://codepen.io/desandro/pens/tags/?grid_type=list&selected_tag=zdog-v1-docs&sort_col=created_at&sort_order=asc).
**CodePen**
+ [Hello world canvas](https://codepen.io/desandro/pen/YbrLaO)
+ [Hello world SVG](https://codepen.io/desandro/pen/Bewxme)
+ [resize fullscreen](https://codepen.io/desandro/pen/dEJxaV)
+ [Strutter](https://codepen.io/desandro/pen/xNPaoP)
**Test cases**
+ A reduced test case clearly demonstrates the bug or issue.
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
+ A link to your production site is **not** a reduced test case.
Providing a reduced test case is the best way to get your issue addressed. They help you point out the problem. They help me verify and debug the problem. They help others understand the problem. Without a reduced test case, your issue may be closed.
## Pull requests
Contributions are welcome!
+ **For typos and one-line fixes,** send those right in.
+ **For larger features,** open an issue before starting any significant work. Let's discuss to see how your feature fits within Zdog's vision.
+ **Follow the code style.** Spaces in brackets, semicolons, trailing commas.
+ **Do not edit `dist/` files.** Make your edits to source files in `js/` and `css/`.
+ **Do not run `make` to update `dist/` files.** I'll take care of this when I create a new release.
================================================
FILE: .github/issue_template.md
================================================
**Test case:** https://codepen.io/desandro/pen/YbrLaO
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
bower_components/
================================================
FILE: README.md
================================================
# Zdog
_Round, flat, designer-friendly pseudo-3D engine_
View complete documentation and live demos at [zzz.dog](https://zzz.dog).
## Install
### Download
+ [zdog.dist.min.js](https://unpkg.com/zdog@1/dist/zdog.dist.min.js) minified, or
+ [zdog.dist.js](https://unpkg.com/zdog@1/dist/zdog.dist.js) un-minified
### CDN
Link directly to Zdog JS on [unpkg](https://unpkg.com).
``` html
```
### Package managers
npm: `npm install zdog`
Bower: `bower install zdog`
## Hello world demo
Create 3D models with Zdog by adding shapes. See [Getting started](https://zzz.dog/getting-started) for a walk-through of this demo.
``` js
let isSpinning = true;
let illo = new Zdog.Illustration({
element: '.zdog-canvas',
zoom: 4,
dragRotate: true,
// stop spinning when drag starts
onDragStart: function() {
isSpinning = false;
},
});
// circle
new Zdog.Ellipse({
addTo: illo,
diameter: 20,
translate: { z: 10 },
stroke: 5,
color: '#636',
});
// square
new Zdog.Rect({
addTo: illo,
width: 20,
height: 20,
translate: { z: -10 },
stroke: 3,
color: '#E62',
fill: true,
});
function animate() {
illo.rotate.y += isSpinning ? 0.03 : 0;
illo.updateRenderGraph();
requestAnimationFrame( animate );
}
animate();
```
## About Zdog
Hi, [Dave here](https://desandro.com). I wanted to make a video game. I needed a 3D engine, but most engines were too powerful and complex for me. I made Zdog so I could design and display simple 3D models without a lot of overhead.
Zdog is directly inspired by [Dogz](https://en.wikipedia.org/wiki/Petz), a virtual pet game by P.F. Magic released in 1995. It used flat 2D circle sprites to render the Dogz’ models, but in a 3D scene. [See Dogz playthrough video here.](https://www.youtube.com/watch?v=6lKSn_cHw5k) Dogz were fully animated in real time, running, flopping, scratching (on Windows 3.1!). It was remarkable.
Zdog uses the same principle. It renders all shapes using the 2D drawing APIs in either `` or ``. Spheres are actually dots. Toruses are actually circles. Capsules are actually thick lines. It’s a simple, but effective trick. The underlying 3D math comes from [Rotating 3D Shapes](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/rotating-3d-shapes) by [Peter Collingridge](https://petercollingridge.appspot.com/3D-tutorial/rotating-objects).
Zdog is pronounced "Zee-dog" in American parlance or "Zed-dog" in British.
### Beta!
Zdog v1 is a beta-release, of sorts. This is my first time creating a 3D engine, so I probably got some stuff wrong. Expect lots of changes for v2. Provide input and select new features on the [Zdog issue tracker on GitHub](https://github.com/metafizzy/zdog/issues).
### More Zdog resources
Other people's stuff:
+ [Zfont](https://jaames.github.io/zfont/) - Text plugin for Zdog
+ [vue-zdog](https://github.com/AlexandreBonaventure/vue-zdog) - Vue wrapper for Zdog
+ [zDogPy](https://github.com/gferreira/zdogpy) - Python port of Zdog for DrawBot
+ [Made with Zdog CodePen Collection](https://codepen.io/collection/DzdGMe/)
+ [Made with Zdog on Twitter](https://twitter.com/i/moments/1135000612356206592)
My stuff:
+ [Zdog demos on CodePen](https://github.com/metafizzy/zdog-demos), source code at [zdog-demos](https://github.com/metafizzy/zdog-demos)
+ [zdog-docs](https://github.com/metafizzy/zdog-docs) - Docs site source code
---
Licensed MIT. Made by Metafizzy 🌈🐻
================================================
FILE: bower.json
================================================
{
"name": "zdog",
"description": "Round, flat, designer-friendly pseudo-3D engine",
"main": "js/index.js",
"authors": [
"David DeSandro"
],
"license": "MIT",
"keywords": [
"3D",
"canvas",
"svg"
],
"homepage": "https://zzz.dog",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"package.json",
"demo",
"demos"
]
}
================================================
FILE: demos/.eslintrc.js
================================================
/* eslint-env node */
module.exports = {
extends: '../.eslintrc.js',
globals: {
Zdog: 'readonly',
},
rules: {
'key-spacing': 'off',
'max-lines': 'off',
},
};
================================================
FILE: demos/box-cross/box-cross.js
================================================
// ----- setup ----- //
var sceneSize = 9;
var isSpinning = true;
var TAU = Zdog.TAU;
// colors
var yellow = '#ED0';
var gold = '#EA0';
var orange = '#E62';
var garnet = '#C25';
var eggplant = '#636';
var initRotate = { x: ( 35/360 ) * TAU, y: TAU/8 };
var illo = new Zdog.Illustration({
element: '.illo',
rotate: initRotate,
resize: 'fullscreen',
dragRotate: true,
onDragStart: function() {
isSpinning = false;
},
onResize: function( width, height ) {
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
},
});
// ----- model ----- //
var model = new Zdog.Anchor({
addTo: illo,
});
function addBox( options ) {
var boxOptions = {
addTo: model,
stroke: false,
topFace: yellow,
rearFace: gold,
leftFace: orange,
rightFace: orange,
frontFace: garnet,
bottomFace: eggplant,
};
Zdog.extend( boxOptions, options );
new Zdog.Box( boxOptions );
}
// top
addBox({
bottomFace: false,
translate: { y: -1 },
});
// bottom
addBox({
topFace: false,
translate: { y: 1 },
});
// front
addBox({
rearFace: false,
translate: { z: 1 },
});
// back
addBox({
frontFace: false,
translate: { z: -1 },
});
// left
addBox({
rightFace: false,
translate: { x: -1 },
});
// right
addBox({
leftFace: false,
translate: { x: 1 },
});
var dot = new Zdog.Shape({
addTo: model,
translate: { y: -2 },
stroke: 1,
color: gold,
});
dot.copy({
translate: { y: 2 },
color: gold,
});
dot.copy({
translate: { x: -2 },
color: yellow,
});
dot.copy({
translate: { x: 2 },
color: garnet,
});
dot.copy({
translate: { z: -2 },
color: orange,
});
dot.copy({
translate: { z: 2 },
color: eggplant,
});
// ----- animate ----- //
var ticker = 0;
var cycleCount = 150;
function animate() {
spin();
illo.updateRenderGraph();
requestAnimationFrame( animate );
}
function spin() {
if ( !isSpinning ) {
return;
}
var progress = ticker/cycleCount;
var turn = Math.floor( progress % 4 );
var theta = Zdog.easeInOut( progress % 1, 3 ) * TAU;
if ( turn == 0 || turn == 2 ) {
model.rotate.y = theta;
} else if ( turn == 1 ) {
model.rotate.x = theta;
} else if ( turn == 3 ) {
model.rotate.z = theta;
}
ticker++;
}
animate();
================================================
FILE: demos/box-cross/index.html
================================================
box cross
dot cube
fullscreen
Hello world canvas
Hello world canvas
Hello world SVG
Hello world SVG
hemisphere-cone-ball
houses
================================================
FILE: demos/kid-kit/index.html
================================================
Kid Kit
Kid Kit
kirby parasol
No Illo canvas
No Illo canvas
No Illo SVG
No Illo SVG
Path commands
Path commands
resize
shade & shades
shapes
solids
strutter
zdog logo