Processing Test

Table of Contents

This is a p5 test based on their get started tutorial. It's also an indirect test of using the raw directive to write HTML to pass to nikola.

And now the sketch. If you run your mouse over the blank area you should see a bunch of circles following the cursor.

<div id="get_started">
    <script language="javascript" type="text/javascript" src='get_started.js'></script>
</div>

var diameter;

function setup() {
    canvas = createCanvas(0.8 * windowWidth, 200);
    canvas.parent("get_started")
    background(255);
    strokeWeight(3);
    stroke(0, 0, 255);
    fill(255);
}

function mousePressed() {
    /* set background to blue */
    background(0, 0, 255);
}

function mouseReleased() {
    /* set background to white */
    background(255);
}

function draw() {
    /* Draw circles that change diameter based on mouse speed */
    /* and color based on if mouse-pressed (or not pressed)   */
    if (mouseIsPressed) {
        fill(0, 0, 255);
        stroke(255);
    } else {
        fill(255);
        stroke(0, 0, 255);
    }
    diameter = pow(dist(pmouseX, pmouseY, mouseX, mouseY), 1.5);
    ellipse(mouseX, mouseY, diameter, diameter);
}

Notes

This was a little harder than I thought it would be. First, regarding the javascript file:

  • In order to get it to the final HTML you need to put in the listings folder at the root of the nikola folder and use the listing reStructuredText directive instead of include (this is a special nikola directive).

And then there's the html trick:

  • to get the sketch to stay in the post (instead of showing up on the bottom of the page), you have to use the div trick - create a div where you want the sketch to be and give it a unique ID (use the raw reStructuredText to put the HTML tags displayed above into the post), then set the parent in the sketch (canvas.parent("get_started") in this example).