quaintitative

I write about my quantitative explorations in visualisation, data science, machine and deep learning here, as well as other random musings.

For more about me and my other interests, visit playgrd or socials below


Categories
Subscribe

Using CCapture.js library with p5.js and three.js

A screen capture app could be used to capture visualisations in a browser.

But we may wish to either have it programmatically captured sometimes by using code. There are a number of options but the CCapture.js library works well, and provides for a number of output options.

There is also another advantage - using a screen capture app means that any stuttering on the screen would also be captured. Using CCapture.js means that we are actually capturing each frame generated by our p5.js or three.js code directly, sans the stuttering.

It’s slightly easier in p5.js than three.js.

In p5.js, we just have to instantiate the Capture instance.

var capturer = new CCapture({
    format: 'jpg',
    name: 'name'
});
var canvas;

Assign a canvas variable to whatever we are generating in the setup function.

var p5Canvas = createCanvas(800, 800);
canvas = p5Canvas.canvas;

And ask the capturer instance to capture it.

capturer.capture(canvas);

A more complete gist is available here.

And now in three.js.

We similarly declare an instance of it first. This is identical to what we did above, just with more options.

var recorder = new CCapture({
            verbose: false,
            display: true,
            framerate: 30,
            quality: 100,
            format: 'jpg',
            // workersPath: './libs/',
            timeLimit: 0,
            frameLimit: 0,
            autoSaveTime: 0
        });

Instead of capturing the canvas, we have to capture the renderer DOM element. This is the same DOM element that we usually append to the HTML page.

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

...

recorder.capture(renderer.domElement);

A more complete gist is available here.


Articles

AI and UIs
Listing NFTs
Extracting and Processing Wikidata datasets
Extracting and Processing Google Trends data
Extracting and Processing Reddit datasets from PushShift
Extracting and Processing GDELT GKG datasets from BigQuery
Some notes relating to Machine Learning
Some notes relating to Python
Using CCapture.js library with p5.js and three.js
Introduction to PoseNet with three.js
Topic Modelling
Three.js Series - Manipulating vertices in three.js
Three.js Series - Music and three.js
Three.js Series - Simple primer on three.js
HTML Scraping 101
(Almost) The Simplest Server Ever
Tweening in p5.js
Logistic Regression Classification in plain ole Javascript
Introduction to Machine Learning Right Inside the Browser
Nature and Math - Particle Swarm Optimisation
Growing a network garden in D3
Data Analytics with Blender
The Nature of Code Ported to Three.js
Primer on Generative Art in Blender
How normal are you? Checking distributional assumptions.
Monte Carlo Simulation of Value at Risk in Python
Measuring Expected Shortfall in Python
Style Transfer X Generative Art
Measuring Market Risk in Python
Simple charts | crossfilter.js and dc.js
d3.js vs. p5.js for visualisation
Portfolio Optimisation with Tensorflow and D3 Dashboard
Setting Up a Data Lab Environment - Part 6
Setting Up a Data Lab Environment - Part 5
Setting Up a Data Lab Environment - Part 4
Setting Up a Data Lab Environment - Part 3
Setting Up a Data Lab Environment - Part 2
Setting Up a Data Lab Environment - Part 1
Generating a Strange Attractor in three.js
(Almost) All the Most Common Machine Learning Algorithms in Javascript
3 Days of Hand Coding Visualisations - Day 3
3 Days of Hand Coding Visualisations - Day 2
3 Days of Hand Coding Visualisations - Day 1
3 Days of Hand Coding Visualisations - Introduction