unjust/jsanimation

experiments with js drawing and animation frameworks - paper, processing https://unjust.github.io/jsAnimation/

JS animation

Experiments with drawing and animation in js frameworks:
http://paperjs.org (haven't given paper too much love)
https://p5js.org three js could have a home here too

Project is built with webpack and using babel so I can use imports/exports and other es6 features 🎉

Starting a project

Branch off of the project_base branch which will not contain any animation js
just the boilerplate tools, templates, and build process.

master contains animation projects - both the latest animation and archived animation.

Structure

• templates/ dir: contains a templates for js and html

js template is meant to be used as an example of a p5 project and non-p5. The two templates for html that are used in the webpack build, one that is used for p5 projects because it doesnt require a canvas element in the dom (p5 makes a canvas), the other for paper js.

• js/ dir: each sketch has its own file - using the extension *.p5.js right now will generate an html file using the p5 template when the project is built
  • archive dir: not a place for dead code! but for other finished projects
  • utils dir: for projects to visualize, debug etc
  • myLib dir: reusable code that I have written. Will build out to shapes, motions, etc
  • libs dir: for third party libs which need to be run through babel for module support
• build/ dir: for built js (webpack/babel) and the generated html files

Build process

There are separate webpack configs for dev and prod.
the dev config builds everything and starts to watch the files.
prod is configured more to just compile the js.

Commands

yarn run dev

yarn run dev. This will build the js files in the root of js (not archive or utils). And will also start watching the files.

webpack looks in the js directory,
for every js it creates and entry point based on the file name
(eg first for first.js, foo for foo.js etc)

https://github.com/jantimon/html-webpack-plugin the the html plugin uses those entry points and creates an html file based on the appropriate html template in templates/.
it appends the script tag to the bottom and interpolates basic template vars.

yarn run build:archive

Builds the archive files as well
TODO: select specific projects in the archive to build

yarn run build_js

Just builds the compiled js. Used by the build_push_to_site.workflow. to share the compiled js to the jekyll site.

Building docs

There is a gh-pages branch in this repo that will show an index file with a table of contents of the html files in the build directory. Uses the docs dir of gh-pages.

Building the jekyll site

There is a workflow which will run on a push to unjustio_website_assets branch. This workflow builds the project and pushes the assets over to unjustio repo.

Using the script push_to_website_assets.sh will push to the branch to trigger the workflow. Then head over to https://github.com/unjust/unjustio to design the pages with the new assets.

Using the script push_to_website_local.sh will push to the repo on my compu.

jsanimation's Issues

gh-pages basic index page

get a branch into master with basic gh-pages and a script to create an index page.

myLib directory to have repeatable, tested code

create a myLib directory to have objects and code that you would use across projects

Clean up html templates

I think there is container and div that might nt be doing anything right now

Check options for build script

From the read me - yarn run dev

You can also build with options**:
--archive -a build the archive directory js
--file -f just build one file

** this feature needs to be checked and tested

Fix up lissajous branch

branch lissajous_072019

work on animations a bit more
find out whats p with the feature test

Update project template branch with any and all changes

I'm sure its out of sync with master.

Update readme with new scripts and instructions

Esp need to document the way this interacts with unjustio repo
also the ghpages