三角関数スクラッチ / P5.js

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

ブロック

三角関数サイン 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>

<html>

<head>

</head>

<body>

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>

この記事が気に入ったら
いいね！しよう

最新情報をお届けします

Twitter でCoderdojokumaをフォローしよう！

Follow @Coderdojokuma

三角関数スクラッチ / P5.js

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

三角関数サイン P5.js版

最近の投稿

カテゴリー

CoderDojo熊本情報集

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

三角関数 サイン P5.js版

最近の投稿

カテゴリー

CoderDojo熊本情報集

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

三角関数サイン P5.js版