Skip to content

Latest commit

 

History

History
42 lines (27 loc) · 1.61 KB

README.md

File metadata and controls

42 lines (27 loc) · 1.61 KB
Raw

Processing Sketch Liquid Tag / Jekyll plugin

Simple Liquid tag plugin for rendering a Processing .pde sketch within a Jekyll page. Uses Processing.js and canvas.

Created by by Jannae, MIT License

Setup

  1. Include this link (or host the .js file) in your project site.

     <script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>

  2. Add processing_sketch.rb to your Jekyll _plugins directory.

Usage

Default code: Modify this to match your own sketch parameters, and include this tag within a page where you want to render a processing sketch:

{% processing_sketch mysketches/sketch.pde --sketchid=sketch1 --width=640 --height=480 %}

Default code above will render this codeblock:

<script type="text/javascript">
	function getProcessingSketchID () { return 'sketch1'; }
</script>
<figure>
	<canvas id="sketch1" data-processing-sources="mysketches/sketch.pde" width="640" height="480" tabindex="0" style="image-rendering: -webkit-optimize-contrast !important;">
	<p>Your browser does not support the canvas tag.</p>
	</canvas>
	<figcaption>View source code: <a href="mysketches/sketch.pde">sketch.pde</a></figcaption>
</figure>

Options

--sketchid=someID : sets the ID tag for the canvas; recommended if there is to be more than one sketch on the page; default is 'sketch')
--width=width of sketch : sets the width to render the sketch)
--height=height of sketch : sets the height to render the sketch)

TODOS:

  • This does not support more than one .pde file to a project. Should it? Maybe yes?
  • Width and height should input widthxheight (e.g., 640x480)