Hello! p5.js. - 動かしてみよう!
表示できたので次は動かします。
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
circle(100,200,50)
}
これを実行すると真ん中左よりに丸が出てきます。
circle(x,200,50)
として、これを右側に動かすと擦れば、左右の座標はx座標を変化させれば動きます。
例えばxの値を200にして
これを実行すると少し右側にずれて表示されます。これを連続させれば右に動くものを作れそうです。
このx座標の数字をいろいろ変化させたいので変数に置き換えます。
まず初期値を宣言します。初期値を100とするには
とすればOKです。この宣言をする場所ですがfunction{}の外で行います。
そして
circle(x,200,50)
x = x + 1
とすれば右側にゆっくり動きます。
使っている数字、例えば"x + 1"を"x + 10"にするなど、いろいろ変えてみるとスピード、表示場所など変わるので面白いと思います。
この記事が気に入ったらサポートをしてみませんか?