HAKUTAI Tech Notes

IT関連、数学のことなどを主として思いつきで色々書き溜めていきます

確率計算だけでカタールW杯優勝国を予想する

先日、サッカーのカタールW杯に出場する日本代表のメンバーが発表され、いよいよ開催の気運が高まってきた。ということでW杯に絡めて何かやりたいなと思い、今大会でどこが優勝しそうかを予想するシミュレーションをやってみた。予想とは言っても真面目にチ…

matter.jsの基本的な機能を使ったサンプル集

matter.jsはWEBブラウザ上で2次元の物理演算と描画を行うことができるjavascriptのライブラリである。 brm.io 公式リファレンスが整備されているので各モジュールに含まれるプロパティやメソッドなどを確認することができるが、具体的にどのように使っていけ…

ポケモンのアイコンで物理演算

WEBブラウザ上でできる物理演算について色々と調べていたら、絵文字で物理演算を実現している方の記事を見つけた。この記事を読んでいるうちにおぼろげながら浮かんできたんです、ポケモンのアイコンでも同じことができて面白いんじゃないかと。 この記事で…

【Selenium】動的なWEBページのスクレイピング

前回の記事で静的なWEBサイトに対するスクレイピングのやり方について書いたが、「静的」があるということは当然ながら「動的」もある。 今回は動的なWEBサイトに対してスクレイピングを行う方法についてまとめた。 静的なページと同じ感覚でスクレイピング…

【urllib / BeautifulSoup】静的なWEBページのスクレイピングの基本について

人は皆ネット上に転がっている様々なデータを利用して何か分析したり作ったりしたいと思う時があるだろう、たぶん。 そういう時に、データベースを公開しているサービスがデータ提供のAPIを用意してくれていればそれを利用すればいいのだが、必ずしもそうな…

Vuexを使ったサンプル色々【後編】

Vuexを使ったサンプル色々【前編】からの続きということで、残り一つの機能「天気予報の取得」weatherForecastを作成する。 ディレクトリ構成 3. 天気予報取得機能の実装 実装の準備 weatherモジュールの定義 コンポーネントの実装 おわりに ディレクトリ構…

Vuexを使ったサンプル色々【前編】

最近Vuexを使う必要が出てきたので公式ドキュメントなどを読んでいたのだが、習うより慣れろということでVuexを利用した簡単なアプリケーションをいくつか作ってみた。 今回は、二次関数の実数解を計算する機能solveEquation、カウントダウンタイマーtimer、…

【Vue.js / Typescript】画像一覧+ページネーションを実装する(フロント側のみ)

ライブラリなどを利用せず自力でVueのページネーション処理を実装したのでその手順や考え方などを書いておく。 特にここでは、数十枚の画像がグリッド状に並んでいるような画面でのページネーションを想定しており、ページ番号ボタンなどをクリックすると表…

ProcessingとPythonで雪を降らせる

『Pythonではじめる数学の冒険』(Peter Farrell 著 / 鈴木 幸敏 訳 O’Reilly Japan)という本を見つけて面白そうだったので購入した。 この本を一通り読んでみてProcessingとPythonと数学的処理を利用して色々描画する方法を知ったので、本で扱われている一…

Typescriptで中身が複雑なオブジェクトの型を定義する

最近TypescriptベースのVueで簡単なアプリを色々作ろうとしている。 あるアプリの作成を進めている中で、割と複雑な中身(関数や別のオブジェクトが含まれている)のオブジェクトを返す関数を実装することがあり、Missing return type on function.の警告が…

AngularとPaper.jsで簡易なデジタイザを作る5

概要 完成イメージ 実装 CSV出力処理 おわりに 概要 ここまでデジタイザを作ってきたが、そもそもデジタイザというものはプロットによって明らかにした座標の数値データを何かに利用するためにあるのだから、画面上でプロットしたデータをファイル出力して扱…

AngularとPaper.jsで簡易なデジタイザを作る4

概要 完成イメージ 実装 パスの描画 プロットの中断、再開 座標点の移動、追加と削除 パスの選択と削除 おわりに 概要 これまで実装してきたのは、Viewの操作や座標変換といった下準備のものである。いよいよ本題の座標点のプロット機能を実装していくことに…

AngularとPaper.jsで簡易なデジタイザを作る3

概要 完成イメージ 実装 レイヤー分割 座標軸設定パスの描画 座標軸設定用パスの再描画 基準軸の最大値、最小値の設定 座標値の変換 おわりに 概要 最終的にデジタイザとして機能させるためには、自分で設定した任意の座標系で点をプロット(座標を取得)可…

AngularとPaper.jsでデジタイザを作る2

概要 完成イメージ 実装 拡大縮小処理 ズーム処理 その1(準備) ズーム処理 その2(メイン部分) Viewのリセット おわりに 概要 前回は画像を読み込んでキャンバスに表示するところまでを実装したので、今回は画像の平行移動・ズーム機能を実装していく。開…

AngularとPaper.jsでデジタイザを作る1

散布図や折れ線グラフなどの画像しかない時に、そのグラフの値を数値化(デジタイズ)したい場合がある。大抵の場合、「その画像を読み込む→座標軸を合わせる→グラフの線などに沿って自分で点をプロットする」といった手順を踏んで数値化していくことになる…

AngularとPaper.jsでパス描画ツールを作る3

ここまで実装してきたパス描画ツールに最後にもう少し機能を追加していく。 パスが既に閉じられた多角形に対して、任意の辺に頂点を追加したり任意の頂点を削除できるようにする。 開発環境やディレクトリ構成は前回、前々回と変わらないので省略する。これ…

AngularとPaper.jsでパス描画ツールを作る2

前回の記事ではパス描画ツールの基本的な処理を実装した。今回はさらに機能を拡張し、パスの交差制御と頂点マーカーのドラッグ移動を実装していく。 完成イメージ 実装 パスの交差を制限する 頂点のドラッグ移動を可能にする セグメント上でマウスカーソルの…

AngularとPaper.jsでパス描画ツールを作る1

Angularを利用してパス描画ツールを作成したので実装過程をまとめてみる。 WEBアプリケーションで描画処理といえばHTML5のCanvasを利用することが多いと思われるが、今回はCanvasをベースにPaper.jsというフレームワークを利用して実装した。当初は純粋にCan…