P5jsで遊んでみった

まずp5jsって？
p5jsは、processingをjavascriptに移植したものらしい。
環境構築に時間がかからないので、めちゃめちゃ楽。そんでもってめちゃ楽しい。

webサイトですぐにコードを実行して結果を確認することができるので、
本当に何も用意しなくても画面が動くのを見れる！！！
下のサイトで実行ができるよ！

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

環境構築して自分のPCでやりたいよぉって言う人はこちらからダウンロードしてください。
https://p5js.org/download/

私はダウンロードページにあるp5.min.jsをDLして、
表示するHTML、実際の処理を書くJsを１つのファイルの中にまとめました。
構造はこんな感じ。

chibi_file
– index.html
– myscript.js
– p5.min.js

index.html

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
        <script src="myscript.js"></script>
    </body>
</html>

myscript.js


function setup(){
    createCanvas(640, 480);
    background(255);
    noStroke();
}

function draw(){
    fill(random(255), random(255), random(255), 70);
    ellipse(random(width), random(height), random(100));
}

これだけで実際動いてる画面が見れるなんて神すぎる・・・。

ちなみにさっきのコードでできる画面はこんな感じ。
たった数行でこんな感じで遊べるのは神すぎる。