DEV Community

Cover image for How to use p5.js with TypeScript and webpack
H
H

Posted on • Edited on

How to use p5.js with TypeScript and webpack

#p5js #typescript #webpack #javascript

This post is about creating a p5.js development using webpack and typescript. (Please install Node.js beforehand and make sure npm is available.)

Step 1: Install libraries

First, create a project directory and install libraries.

mkdir p5-project
cd p5-project
npm init -y
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader @types/p5
npm i p5
Enter fullscreen mode Exit fullscreen mode

Delete "main":"index.js" in package.json and add "private":true

{
  "name": "p5-project",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/p5": "^1.4.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "p5": "^1.4.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

According to webpack documentation, this is to prevent an accidental publication of your code.

Step 2: Create directories and files

Create src and dist directories, webpack.config.js, tsconfig.json and global.d.ts files under the project directory.

The dist directory contains index.html, and the src directory contains index.ts.

p5-project
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- tsconfig.json
  |- /dist
    |- index.html
  |- /src
    |- index.ts
Enter fullscreen mode Exit fullscreen mode

Each file should be written with reference to the following.

webpack.config.js

const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        static: './dist',
    }
};
Enter fullscreen mode Exit fullscreen mode

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}
Enter fullscreen mode Exit fullscreen mode

global.d.ts

import module = require('p5');
export = module;
export as namespace p5;
Enter fullscreen mode Exit fullscreen mode

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P5 Project</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

index.ts

import * as p5 from 'p5';

export const sketch = (p: p5) => {
    p.setup = () => {
        p.createCanvas(400, 400);
    }

    p.draw = () => {
        p.background(220);
        p.ellipse(50,50,80,80);
    }
}

export const myp5 = new p5(sketch, document.body);
Enter fullscreen mode Exit fullscreen mode

Using the p5 instance mode to avoid possible conflicts with your own function names or other libraries.

Step 3: Add npm scripts and try to build

Add "start": "webpack serve --open" in package.json and type npm run start in a terminal.

{
  "name": "p5-project",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open" //add
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/p5": "^1.4.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "p5": "^1.4.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

You can see the circle in the canvas on the browser.
Circle in the canvas on the browser
I hope you find this article helpful!
Happy Creative Coding!

Resource refrences:

Top comments (0)

Read next

harshboricha98 profile image

Cloud Computing Beyond Containers: How Cloudflare’s Isolates Are Changing the Game

Harsh boricha -

usluer profile image

Building a High-Performance Cache Manager in Node.js with TypeScript and ioredis

... -

anwarhossain1 profile image

Why Strong DSA Knowledge is Essential for Software Engineers

Anwar Hossain -

amaresh_adak profile image

Creating a Dynamic Product Showcase Carousel with React and Tailwind CSS

Amaresh Adak -