p5 + es6 - KITASENJU DESIGN BLOG

HTML

<!DOCTYPE html>
<html lang="en">
<title>p5</title>
<head>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <script src="./p5.min.js"></script>  
  <script src="./index.js" type="module"></script>
</body>
</html>

main

import {Hoge} from './Hoge.js';

new p5(function(p5){
    
    p5.setup=function(){
        this.hoge = new Hoge(p5);
        p5.frameRate(1);
        p5.createCanvas(p5.windowWidth, p5.windowHeight);
    }

    p5.draw = function(){
        p5.background(220);
        this.hoge.drawCircle();
    }

});

import用

export class Hoge {
    
    constructor(p5) {
        this.p5 = p5;
    }

    drawCircle(){
        this.p5.fill(255,255,0);
        this.p5.circle(50,50,100);
    }

}