var angle = 0; // 角度

var r = 100; // 円周の半径

function setup() { // 最初に実行される関数

    createCanvas(640, 480); // canvasの作成

    noStroke();

}

 

function draw() { // 毎フレーム実行される関数

    background(255); // canvasの塗りつぶし

    push(); // 座標をcanvasの中心にするため一時的に保存

    translate(width / 2, height / 2);

    fill(127);

    ellipse(0, 0, r * 2, r * 2); // 円周の描画

    x = sin(radians(angle)) * r; // 円周上のX座標の位置

    y = cos(radians(angle)) * r; // 円周上のY座標の位置

    fill(0);

    ellipse(x, y, 20, 20); // アニメーションする円の描画

    pop();

    angle += 1;

}