Skip to content

Instantly share code, notes, and snippets.

Matt DesLauriers mattdesl

Block or report user

Report or block mattdesl

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
npm install electron electron-rebuild serialport --save


npx electron-rebuild -f -w serialport
mattdesl / sketch.js
Created Nov 9, 2019
canvas-sketch + dat.gui
View sketch.js
const canvasSketch = require("canvas-sketch");
const { GUI } = require("dat.gui");
const data = {
background: "#de6060",
number: 0.35
const settings = {
dimensions: [2048, 2048],
mattdesl / controller.html
Created Nov 4, 2019
window / parent / child
View controller.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

Modules for Creative Coding

This workshop encourages students to make use of npm modules to build complex and interesting artworks.

If you find a module you want to use, like riso-colors, you can install it from your project folder like so:

npm install riso-colors
View p5-global.js
const canvasSketch = require("canvas-sketch");
const triangulate = require("delaunay-triangulate");
const p5 = require("p5");
new p5();
const settings = {
p5: true,
dimensions: [2048, 2048]

high res tiled rendering with canvas-sketch

Copy these files in the gist to a new folder. Generate a package.json:

cd folder-with-code
npm init -y

Then install deps:


quick start

  • Copy launch.js into your local/offline project folder
  • Within terminal, run npm install open in the project folder
  • Then quit all Chrome tabs/windwos/apps etc and run node launch.js from the project folder

It should launch in full screen mode.

custom flags

View svg-parsing.js
var parse = require("parse-svg-path");
var contours = require("svg-path-contours");
var normalizePathScale = require("normalize-path-scale");
var getBounds = require("bound-points");
const defs = require("./svg-defs.js");
const shapes = [];
module.exports.settings = {
View background.hlsl
float2 background(float2 uv, float2 resolution, float2 texResolution) {
float tAspect = texResolution.x / texResolution.y;
float pAspect = resolution.x / resolution.y;
float pwidth = resolution.x;
float pheight = resolution.y;
float width = 0.0;
float height = 0.0;
if (tAspect > pAspect) {
You can’t perform that action at this time.