Moving points example

Click to change the points movement. Drag to pan the plot. Uses the grafica.js library: https://github.com/jagracar/grafica.js

by Javier Graciá Carpio

HTML

<script src="https://cdn.rawgit.com/jagracar/grafica.js/master/releases/grafica.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

JavaScript

var sketch = function (p) {
    // Global variables
    var plot, i;
    var step = 0;
    var stepsPerCycle = 100;
    var lastStepTime = 0;
    var clockwise = true;
    var scale = 5;

    // Initial setup
    p.setup = function () {
        // Create the canvas
        var canvas = p.createCanvas(450, 450);

        // Prepare the first set of points
        var nPoints1 = stepsPerCycle / 10;
        var points1 = [];

        for (i = 0; i < nPoints1; i++) {
            points1[i] = calculatePoint(step, stepsPerCycle, scale);
            step = (clockwise) ? step + 1 : step - 1;
        }

        lastStepTime = p.millis();

        // Prepare the second set of points
        var nPoints2 = stepsPerCycle + 1;
        var points2 = [];

        for (i = 0; i < nPoints2; i++) {
            points2[i] = calculatePoint(i, stepsPerCycle, 0.9 * scale);
        }

        // Create the plot
        plot = new GPlot(p);
        plot.setPos(25, 25);
        plot.setDim(300, 300);
        // or all in one go
        // plot = new GPlot(p, 25, 25, 300, 300);

        // Set the plot limits (this will fix them)
        plot.setXLim(-1.2 * scale, 1.2 * scale);
        plot.setYLim(-1.2 * scale, 1.2 * scale);

        // Set the plot title and the axis labels
        plot.setTitleText("Clockwise movement");
        plot.getXAxis().setAxisLabelText("x axis");
        plot.getYAxis().setAxisLabelText("y axis");

        // Activate the panning effect
        plot.activatePanning();

        // Add the two set of points to the plot
        plot.setPoints(points1);
        plot.addLayer("surface", points2);

        // Change the second layer line color
        plot.getLayer("surface").setLineColor(p.color(100, 255, 100));
    };

    // Execute the sketch
    p.draw = function () {
        // Clean the canvas
        p.background(150);

        // Draw the plot
        plot.beginDraw();
        plot.drawBackground();
        plot.drawBox();
        plot.drawXAxis();
       ...