如何使 p5 中的滑块与 webpack 一起使用？

Question

I am using p5.js library with webpack and it works just fine. However when I try to import createSlider from p5.dom it fails

import p5 from "./p5";
import * as dom from './addons/p5.dom'
import {createSlider} from './addons/p5.dom'


const s = (p) => {
    p.setup = function () {
        p.createCanvas(200,200);
        slider = createSlider(0, 360, 60, 40);
        slider.position(10, 10);
        slider.style('width', '80px');
    };

};

let myp5 = new p5(s, 'p5cont');

I tried with dom.createSlider() with no success. In both cases the console reports createSlider is not a function . What's wrong?

Answer 1

As of the latest p5.js (v1.1.9 at the time of writing), p5.dom is a part of the main p5.js library. In other words, you don't need to import p5.dom separately to use createSlider() .

The following code makes p5's slider work with webpack.

import p5 from "./p5.min.js"

let sketch = function(p){
    p.setup=function(){
        p.createCanvas(500,500)
        p.background('blue')
        p.createSlider(0,100)
    }
}

let myp5 = new p5(sketch)