npm i --save p5

import "../scss/style.scss";//index.htmlで使うcssを定義
import P5 from "p5";//p5.jsのライブラリを呼び出す
import "p5/lib/addons/p5.sound";//音声ファイルを使うならp5.sound.jsも呼んでおく

const sketch = p => {
    p.preload = function() {
        //初期化処理をここに書く
        //このメソッド内に記述された処理が完了するまで画面(p5.jsで生成したcanvas)の描画処理は行われないので、
        //アプリ実行に必須な外部ファイル(画像とか音声とか)の読み込みをここに書いておくと良いです
    };

    p.setup = function() {
        //初期化処理その２(preloadが完了したら呼ばれます)
        //canvasの初期化処理をここに書いておく
        p.createCanvas(p.windowWidth, p.windowHeight);//キャンバスを画面サイズに合わせる
        p.frameRate(60);//フレームレートの設定
    }

    p.draw = function() {
        //画面描画処理(setupが完了すると呼ばれます)
        //このメソッド内の処理を毎フレーム実行します
    }
};

//上記のsketch内に定義した描画処理を実行
new P5(sketch);

    function throwStome(){
        //画面をクリック(タップ)したときの投石開始処理を書く
    }
    //ユーザーエージェントに応じて使用するイベントの変更
    if (
        navigator.userAgent.indexOf("iPhone") > 0 ||
        navigator.userAgent.indexOf("iPad") > 0 ||
        navigator.userAgent.indexOf("iPod") > 0
    ) {
        //iOSの場合はtouchStartedイベントを使う
        p.touchStarted = throwStone;
    } else {
        //それ以外の場合はmouseClickedを使う
        p.mouseClicked = throwStone;
    }

    //画面描画用バッファ
    let bufferedImage;

    p.setup = function() {
        //キャンバス生成
        p.createCanvas(p.windowWidth, p.windowHeight);
        //キャンバスと同じサイズで画像データ生成
        bufferedImage = p.createGraphics(p.windowWidth, p.windowHeight);
        //以下、bufferedImageに対して画面描画用の設定を入れていく
        bufferedImage.noStroke();
        bufferedImage.ellipseMode(p.CENTER);
        bufferedImage.imageMode(p.CENTER);
        //...など

        p.frameRate(60);
    }

    p.draw = function() {
        //バッファに背景描画(前フレームの描画内容を塗りつぶす)
        bufferedImage.background(200);

        //バッファに矩形を描画
        bufferedImage.rect(30, 20, 55, 55);

        //バッファに円を描画
        bufferedImage.ellipse(56, 46, 55, 55);

        //バッファに画像を描画
        //imgObjectにはloadImageメソッドで読み込んだ画像データが入っているものとする
        bufferedImage.image(imgObject, 0, 0);

        //バッファに出力した描画内容をcanvasに表示
        p.image(bufferedImage, 0, 0);
    }

    p.windowResized = function() {
        //変更されたウィンドウサイズに合わせてキャンバスのサイズを更新
        p.resizeCanvas(p.windowWidth, p.windowHeight);
        bufferedImage.resizeCanvas(p.windowWidth, p.windowHeight);
    };

    function getPointBezierCurve(t, x1, y1, x2, y2, x3, y3) {
        const px = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;
        const py = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3;
        return { x: px, y: py };
    }

    <div id="tweetBtn"></div>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

    function createClearMessage() {
        const clearMessage = "あなたが社会に" + stoneCount + "石を投じた結果、社会は" +
            clearSecond + "秒後に倒れました。";

        //ツイートボタンのDOM生成
        document.getElementById("tweetBtn").innerHTML =
            '<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"data-text="' +
            clearMessage + '" data-hashtags="社会に一石を投じるアプリ">Tweet</a>';

        //ツイートボタン再構築
        twttr.widgets.load();
    }