三角関数 サイン スクラッチ版

ブロック

三角関数 サイン P5.js版

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>

<script text/type="javascript">
let kakudo = 0; // 最初に角度を0にする

function setup() {
    createCanvas(600, 400); // キャンバスの大きさ (X, Y)
}

function draw() {

    background(0); // 背景の色

    let kakudo1 = radians(kakudo);  // ラジアン(角度) で正確な角度を設定できる

    let y = height / 2 + 100 * sin(kakudo1); // 画面全体の高さ / 2 で真ん中 + 100 × サイン


    fill(255, 255, 255); // 色を塗る 
    // だ円形(X、Y、横の位置、縦の位置)
    ellipse(300, y, 100, 100);  // yの場所がどんどん変わって動いているように見える

    kakudo += 2; // 角度を2ずつ増やす

    console.log(y);
}

</script>
  </body>
</html>

CoderDojo熊本情報集

各種お問い合わせ