Still setting up environments. This sketch uses P5 in instance mode, including it as a module for a Parcel build, along with an optional p5 library. (p5 dom and sound libraries are included with the npm module but must be imported separately.)

import p5 from 'p5';
import 'p5/lib/addons/p5.dom';
import Star from './star';

const s = (p) => {
    p.setup = function () {
        let myCanvas = p.createCanvas(w, h);
        for (let i = 0; i < 800; i++) {
            stars[i] = new Star(p);
    p.draw = function () {
        p.translate(p.width / 2, p.height / 2);
        for (let i = 0; i < stars.length; i++) {
let myp5 = new p5(s);

This will set the ground for playing well with other modules in the future.

The Star class is a custom module and uses some p5 functions so a reference to the Processing name and function space is passed on the constructor.

export default class Star {
    constructor(p) {
        this.p = p;
    update() {
    show() {

Touch functions in p5 handle both mouse clicks and screen touches and registers both to the mouseX and mouseY properties

    p.touchMoved = function () {
        return false; // prevent default behavior

    p.touchStarted = function () {
        return false;

The location of the click/touch on the x axis tweaks the speed and the y tweaks the rotation

    function tweak() {
        speed =, 0, p.width, 0, 50);
        r_inc =, 0, p.height, 0.01, 0.1);

Page Layout

The layout expands the canvas to fill as much of the screen as it can. Using flexbox makes this fairly straight-forward

    <div id="page">
        <div id="header">
            <h3>Day 2 - Seeing Stars</h3>
        <div id="paint">
        <div id="footer">
            ©2019 kentskyo
    <script src="index.js"></script>
body {
    margin: 0;
    padding: 0;

    height: 100vh;
    display: flex;
    flex-direction: column;

#header {
    text-align: center;
    background-color: black;
    color:rgb(153, 155, 155);

#footer {
    text-align: center;
    background-color: black;
    color: rgb(153, 155, 155);
    font-size: 10pt;

canvas {
    display: block;

#paint {
    display: flex;
    flex-grow: 1;
    background: black;

Resizing the Canvas

During p5 setup or window resize events a setSize function is called. This function uses the P5 dom addon, included as a module above

    let c, w, h;

    function setSize() {
        if (!c) c ='#paint');
        w = c.elt.clientWidth;
        h = c.elt.clientHeight;

    p.windowResized = function () {
        p.resizeCanvas(w, h);

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.