Adding new example to quil.info

Nikita Beloglazov edited this page Aug 3, 2016 · 2 revisions

So you want to add your sketch to the examples on quil.info so everyone visiting site can see it. That's wonderful! We need a lot of various examples of what beautiful things can be done using Quil. Please make sure that your sketch satisfies following conditions:

  • Sketch is compatible with clojurescript - all examples must be written in clojurescript and then compiled to javascript to be executed in browser. Don't worry, most likely it's not that hard to make it work in clojurescript.
  • Sketch should work in different sizes: all examples are 200x200 sketches but the sketch should also work in 500x500 size as well.

There are 2 ways to add a new sketch.

Simple way - delegate

Create an issue in quil-site repo providing the source to your sketch. Someone from the Quil team will add it. If you have any problems - feel free to ask at clj-processing mailing list or create an issue in quil-site repo.

Advanced way - do it yourself

So you decided to do everything by yourself. Brave decision! Here is the outline of steps involved:

  1. Fork quil-site repo and clone to your computer.
  2. Create a new file under src/cljs/quil_site/examples/your_sketch.cljs where your_sketch - actual name of the sketch. Please follow the style of other sketches in that folder, e.g. leaf.cljs. All lines that end with ;DELETE will be removed from the sketch source when users open its source code.
  3. Run clojurescript compiler to check that everything compiles correctly lein cljsbuild auto.
  4. In project.clj file add new entry in :cljsbuild -> :builds -> :modules. This is necessary because each example compiled as separate module (resulting in separate js file for each example). This way we can dynamically load only the modules necessary on a page. Unfortunately it means we have to list each example in project.clj.
  5. Add new entry in available-examples vector in main.cljs. The name should match the name you used in step 1 in register-example! function.
  6. Restart lein cljsbuild auto and make sure it compiles.
  7. You're almost there! Start quil-site server lein run -m quil-site.core/run 8080 and open http://localhost:8080. You should see the main page. To force your example to be shown on the page add ?example=your_example to the url. Make sure your sketch runs correctly and then go to its source. Check the source and try to compile using Run button.
  8. Commit all changes (should be 3 files total), push to the github and open pull request.
  9. Please bear with us while we're reviewing and don't be angry if we ask you to fix some styling issues - we want all examples to have the same code style.
  10. Congratulations, your sketch is now on quil.info.

Example of adding "Tree" example: commit.

If you have ideas how to improve the workflow - please share.