![見出し画像](https://assets.st-note.com/production/uploads/images/128388993/rectangle_large_type_2_fb7b417f413a8e0359e69daf49140657.png?width=800)
Hello! p5.js. - 動かしてみよう!
表示できたので次は動かします。
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
circle(100,200,50)
}
これを実行すると真ん中左よりに丸が出てきます。
circle(x,200,50)
として、これを右側に動かすと擦れば、左右の座標はx座標を変化させれば動きます。
例えばxの値を200にして
circle(200,200,50)
これを実行すると少し右側にずれて表示されます。これを連続させれば右に動くものを作れそうです。
このx座標の数字をいろいろ変化させたいので変数に置き換えます。
まず初期値を宣言します。初期値を100とするには
x = 100
とすればOKです。この宣言をする場所ですがfunction{}の外で行います。
そして
circle(x,200,50)
x = x + 1
とすれば右側にゆっくり動きます。
使っている数字、例えば"x + 1"を"x + 10"にするなど、いろいろ変えてみるとスピード、表示場所など変わるので面白いと思います。
プレーンなJavaScriptでは"setTimeout()"の中で関数を動きを指定し、繰り返し処理をするなど、draw()を使えば簡単に連続した動作の指定ができます。
この記事が気に入ったらサポートをしてみませんか?