2021-05-18

三角関数

javascript

中心角とsin/cosの値を表示するアプリを作成

JavaScriptでは、Math.sin(),Math.cos()という関数が用意されているので、それを利用させてもらった。

中心角=0度

以下ソース


<p><input id="theta" max="360" min="0" type="range" value="0" /> 中心角=<span id="degree">0</span>度<br /> <canvas id="graph" width="600" height="600">キャンバスの表示内容を説明する代替テキストです。</canvas></p>
<script>// <![CDATA[
let ctx,
 degree = 0;

function init() {
 let canvas = document.getElementById("graph");
 ctx = canvas.getContext("2d");
 ctx.font = "24px sans-serif";
 paint();
 }
let input = document.querySelector("input");
 input.onchange = update;

function update() {
 degree = document.getElementById("theta").value;
 document.getElementById("degree").textContent = degree;
 paint();
 }

function drawLine(x0, y0, x1, y1, color) {
 ctx.strokeStyle = color;
 ctx.beginPath();
 ctx.moveTo(x0, y0);
 ctx.lineTo(x1, y1);
 ctx.closePath();
 ctx.stroke();
 }

function paint() {
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, 600, 600);
 ctx.save(); // コンテキストを保存
 ctx.translate(300, 300); //(300,300)を原点へ

// 座標軸
 drawLine(0, -300, 0, 300, "black");
 drawLine(-300, 0, 300, 0, "black");

let s0 = Math.sin((degree * Math.PI) / 180).toFixed(3);
 let c0 = Math.cos((degree * Math.PI) / 180).toFixed(3);
 let c = c0 * 200,
 s = s0 * -200;

drawLine(0, 0, c, s, "red");
 ctx.arc(0, 0, 200, 0, Math.PI * 2);
 ctx.stroke();

// ラベル
 drawLine(c, s, c, 0, "blue");
 ctx.strokeText("cos:" + c0, c - 10, 20);
 drawLine(c, s, 0, s, "green");
 ctx.strokeText("sin:" + s0, -40, s - 10);

ctx.restore(); // コンテキストを復元
 }
 window.onload = init;
// ]]></script>

Enjoy!!

utthi_fumi is JavaScript Programmer.

2021-05-17

シンプルゲーム(重力加速度)

javascript

前回のjavascriptの重力加速度を参考にシンプルなゲームを作成しました。

マウスを押すと対象物が上に上がり、マウスを離すと対象物が下がるというシンプルなものです

以下ソース

let ctx,
        isFlying = false,
        timer;
      let posY = 300,
        offset = 0,
        speed = 10,
        velocityY = -20,
        accelY = 5;

      function init() {
        ctx = document.getElementById("viewer").getContext("2d");
        ctx.font = "24px sans-serif";
        onmousedown = function () {
          isFlying = true;
        };
        onmouseup = function () {
          isFlying = false;
        };
        timer = setInterval(tick, 100);
      }

      function tick() {
        velocityY += isFlying ? -accelY : accelY;
        posY += velocityY;
        offset += speed;
        if (offset % 100 == 0) {
          speed += 2;
        }
        paint();
      }

      function paint() {
        ctx.fillStyle = "green";
        ctx.fillRect(0, 0, 600, 600);

        ctx.fillStyle = "brown";
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for (let i = 0; i <= 600; i += 10) {
          let up = 200 + Math.sin(((i + offset) * Math.PI) / 360) * 80;
          ctx.lineTo(i, up);
          if (i === 10 && posY < up) {
            clearInterval(timer);
          }
        }
        ctx.lineTo(600, 0);
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(0, 600);
        for (let i = 0; i <= 600; i += 10) {
          let down = 400 + Math.sin(((i + offset) * Math.PI) / 340) * 80;
          ctx.lineTo(i, down);
          if (i === 10 && posY + 10 > down) {
            clearInterval(timer);
          }
        }
        ctx.lineTo(620, 600);
        ctx.fill();

        ctx.fillStyle = "white";
        ctx.fillRect(10, posY, 10, 10);
        ctx.fillText(offset, 500, 50);
      }
      window.onload = init;

Enjoy!!

utthi_fumi is javascript programmer.

2021-05-16

重力加速度(javascriptで実装)

javascript

重力には逆らえない。
遠投した時の軌道を書いてみた。

2021-05-12

加速度(javascriptで実装)

javascript

加速度とは「単位時間あたりにどのくらい速度が変化するか」を表します。
加速度をjavascriptで実装してみます。

2021-05-10

速度2(javascript実装)

javascript

前回に引き続き、速度の計算をjavascriptで実装してみる。

2021-05-09

速度(javascript実装)

javascript

canvasの知識やゲーム作成の勉強を兼ねて、ブログに残しておきます。
まずは速度から。
一定の速度で右方向へ移動する単純なアプリからはじめよう。

2021-04-25

円周率

php

円周率をプログラミングで出してみます。
phpだと、

<?php
echo pi();

もしくは

<?php
echo M_PI;

で求められます。
今回はアルゴリズムで円周率を求めてみたいと思います。
使用するのはマチンの公式

π / 4 = 4 arctan 1/ 5 - arctan 1/ 239

但し、arctan x = x - x ^ 3 / 3 + x ^ 5 / 5 - x ^7 / 7 + ・・・

です。
以下ソース

<?php

$p = 0;
$k = 1;
$t = 16 / 5;
do{
    $last = $p;
    $p += $t /$k;
    $t /= -5 * 5;
    $k += 2;
}while($p != $last);

$k = 1;
$t = 4 / 239;
do{
    $last = $p;
    $p -= $t / $k;
    $t /= -239 * 239;
    $k += 2;
}while($p != $last);
echo $p . "\n";

実行してみます。

php pi1.php 
3.1415926535898

求めることが出来ました。