Processingの本のニュートン力学をCanvasで作ってみた

最近JavaScriptのCanvasを勉強しています。
主に本で勉強しているのですが、Canvasの本がかなり少ないです。なので、Processingの本も活用しつつやっています。

ニュートン力学

今回は「Processing クリエイティブ・コーディング入門 ―コードが生み出す創造表現」の第6章の「ニュートン力学でリアルな表現」をCanvasで作ってみました。

Processing クリエイティブ・コーディング入門 ―コードが生み出す創造表現

「ニュートン力学でリアルな表現」とは、モノが落ちていく状態だと思います。もっと細かな定義があるのですが、私はあまり理解できていないので書籍の引用を貼っておきます。

ニュートン力学の3つの法則
第1法則（完成の法則）
- 物体（質点）は、力が作用しない限り、静止または等速直線運動する
第2法則（ニュートンの運動方程式）
- 物体（質点）の加速度は、そのとき物体に作用する力に比例し、物体の質量に反比例する
第3法則（作用・反作用の法則）
- 2つの物体（質点）の間に相互に力が働くとき、物体2から物体1に作用する力と、物体1から物体2に作用する力は大きさが等しく逆向きである

X

作ったものをXにアップしています。

JSのCanvasで制作 pic.twitter.com/UmGrmVTjaj

— yusaku (@yusaku_radio) 2026年1月29日

コード

コードは以下となります。
すごくわかりづらいですが仕組みはわかりやすいと思います。わかりづらい部分は、classで書き換えてスッキリさせる予定です。

let canvas, ctx;
let loc, vel, force, mass, accel, gravity, friction;
let radius = 100;

window.addEventListener("load", init, false);

function init() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");

  setup();
  loop();
}

function setup() {
  loc = { x: 0, y: 0 };
  vel = { x: 0, y: 0 };
  gravity = { x: 0, y: 0.3 };
  force = { x: 5, y: 3 };
  mass = 0.8;
  friction = 0.01;
  accel = { x: force.x * mass, y: force.y * mass };
}

function loop() {
  // background
  ctx.fillStyle = "rgb(240, 240, 240)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // set
  accel.x += gravity.x;
  accel.y += gravity.y;
  vel.x += accel.x;
  vel.y += accel.y;
  vel.x *= 1 - friction;
  vel.y *= 1 - friction;
  loc.x += vel.x;
  loc.y += vel.y;
  accel.x *= 0;
  accel.y *= 0;

  // getArc
  getArc(loc.x, loc.y);

  bounceOffWalls();

  requestAnimationFrame(loop);
}

function getArc(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "rgb(52, 52, 234)";
  ctx.stroke();
}

function bounceOffWalls() {
  if (loc.x > canvas.width) {
    loc.x = canvas.width;
    vel.x *= -1;
  } else if (loc.x < 0) {
    loc.x = 0;
    vel.x *= -1;
  }

  if (loc.y > canvas.height) {
    loc.y = canvas.height;
    vel.y *= -1;
  } else if (loc.y < 0) {
    loc.y = 0;
    vel.y *= -1;
  }
}

マイサイト

私のCanvas用のサイトにも残しています。

https://my-canvas-log.netlify.app/daily/260126/

ABC435のA問題の振り返り

AtCoder ABC435のA問題の振り返りです。

A - Triangular Number

この問題はいろんな書籍でも見るものだったのでOKでした。

function Main(input) {
  input = input.split("\n");
  N = parseInt(input[0]);
  console.log(((N + 1) * N) / 2);
}

Main(require("fs").readFileSync("/dev/stdin", "utf8"));

この足し算の公式の名前はあるのかな？と思い、AIに聞いてみました。 すると、この公式には一般に広く使われている固有名はありませんが「三角数（triangular number）の公式」と呼ばれることが多いです、と答えが返ってきました。 三角数をWikipediaで調べてみると「なるほど」という感じだったのですが、文章から届いてくる熱量は今の私では受け止められない感じでした。がんばって理解できるようにしようと思います。

ダンスは音楽

私はダンスの経験はないですが、昔からなぜかダンスを観るのが好きでした。

そのダンスでずっと疑問がありました。
それは、「かっこいいはずなのに魅力を感じないダンスがある」ということです。

腕の角度や身体の向きが揃っているけど魅力は感じないダンスがある一方で、一人ひとりが好きなように踊っているように見えるけど「おぉー！かっこいい！」と思うダンスがある。

私はすべてがきっちり揃っているダンスの方がプロフェッショナルだと思ってました。
けど、そんなダンスを観てもなんとも思わないことが多い。
長年の疑問でした。

最近、疑問が晴れました。
まんが「ワンダンス」にありました。

・・・形を合わせなくても
同じ音を 同じアクセントで取ればダンスは揃う
2人ともリズムを体感で受け止めて動こうとしている・・・

そもそもダンスにはこういう考え方があったんですね。

このセリフの前には主人公のセリフがあります。

「音を聴く」・・・
そうだよな
音楽があって
その後にダンスがあるんだから

踊っている感じが全然ちがう
何で今まで気付かなかっただろう

「ダンスは身体を動かすもの」という先入観があったけど、身体を動かすことの前にまず音楽がある。ダンスは「音楽を表現しているもの」と考えると、音楽が好きな私がダンスを好きなのも理解できる。

ワンダンスの主題歌のBE:FIRSTの「Stare In Wonder」のダンスは全然揃えようとしてしていないけど、揃っているしかっこいい。このダンスを観ると、曲がより好きになる。

www.youtube.com

ワンダンス（１） (アフタヌーンコミックス)

まず、書き終える

ブログを書こうとしても書けません。
このブログもずっと更新できずにいてます。なんとかしようと思っていたところ、良い言葉に出会いました。

三宅香帆さんの書籍『「好き」を言語化する技術』にこうありました。

なによりも重要なのは「まず、書き終える」こと。

これですね。書き終えないからブログにできない。
今までいろんな文章作成系の本を読んできましたが、これについて書かれているのを見たことがないです。書いてあったかもしれませんが、ここまではっきりと書いているのはなかったと思います。

書き終えるのが重要なんて、みんなが「当然でしょ」と思っているから書かないと思うんです。しかし、私は下書きだけが日々増えていき、書き終えることがむつかしいです。集中力がない、テーマが決まっていないのが原因と思っていました。

原因は、書き終えようとしていないから書けないんです。書き終えるためには考えていることをシンプルにしなければいけないですが、それができない。ごちゃごちゃと考えすぎて疲れて途中でやめてしまう。

しばらくは、とにかく書き終えることをがんばろうと思います。

「好き」を言語化する技術 推しの素晴らしさを語りたいのに「やばい！」しかでてこない (ディスカヴァー携書)

yfinanceとPythonで株データ取得方法

yfinanceを使って株のデータを取得する方法です。

私は株式投資の初心者なので、データを集めることに苦労します。ちょっとしたデータでもどこにあるのかわからずに時間がかかってしまって、それだけで疲れてしまいます。

そこで、Pythonを使ってみたところ楽に集めることができました。私のような「超」初心者でもコードは基本的なデータを集めるのは簡単でした。

とりあえず、このブログのサービス「はてなブログ」の会社のはてなの過去1ヶ月のデータを集めてみました。

次に、終値をグラフにしてみました。

このような基本的なデータでさえも初心者なのでバタバタします。けど、yfinanceとPythonだったら簡単にできました。

コード

最初にyfinanceをインポートします。

import yfinance as yf

次に、Tickerではてなの証券コードを指定して、過去1ヶ月のデータを取得します。

ticker=yf.Ticker('3930.T')
data=ticker.history(period='1mo')
data.head()

そして、表にします。

data['Close'].plot(title='HATENA')

最後にCSVにして保存します。

data.to_csv('hatena_ticker.csv',index=True)
print('csv saved')

日本株投資データ分析入門：pythonを活用してすぐできる