コアダンプの数だけ強くなれるよ

見習いエンジニアの備忘log

2017-08-01から1ヶ月間の記事一覧

canvasで少しずつ作るブロック崩し(2/5)

前回はマウスで動くバーを作成しました。今回はボールを打てるようにしていきます。 バーとボール 追加要素 ソースコード 関連ページ バーとボール (function() { var canvas; var ctx; var width; var height; var mouseX; var mouseY; var BAR = { 'HEIGHT…

canvasで少しずつ作るブロック崩し(1/5)

HTML5のcanvasとJavascriptで少しづつブロック崩しを作っていこうと思います。目標はぶろっくでポン!みたいに重力+複数のボールを扱えるブロック崩しにすること。だいたい5回分ぐらいで完成を想定。 初回はとりあえずマウスで動かせるバーを作ります。 マウ…

HTML5/Javascriptで糸通し風アプリを作る(改良)

前回に作成したアプリでは何点か不満な箇所があったのでよりゲームっぽくなるように改良してみた。 改善点 ・スマホ/タブレット対応 ・曲線をより滑らかに描画 ・障害物を出現 ・経過時間を左上に表示 完成品 設計図 糸(曲線)の速度方式 糸(曲線)の描画 障害…

HTML5/Javascriptで糸通し風アプリを作る

今回はHTML5のcanvasを使って、ガラケー時代の名作ゲームである糸通しっぽい動きをする曲線を作ってみた。 即席で作ったのでソースコードは改良が必要。スマホでは恐らく正常に動かない。 www.appdime.jp 完成品 ソースコード全体 完成品 (function() { var …

Web Audio APIで任意の周波数の正弦波を鳴らす(HTML5/Javascript)

HTML5のWeb Audio APIを使って任意の周波数で正弦波を鳴らす電子音叉的なものを作ってみる。 HTML5のサウンド処理 完成品 ソースコード HTML5のサウンド処理 HTML5ではこんな風にAudioタグを使って簡単に音を出す事が出来る。 <audio src="<オーディオファイル" contorols></audio> Audioタグは簡単に使える反面…

Javascriptでマウス追従

Javascriptでマウスを追従する夏っぽいボールを作ってみた。 addEventListenerでマウスの座標を取得、setIntervalで追従するボールを描画ことで実現。 完成品 マウスを追従する円の描画 マウスの座標取得 マウスの追従を遅延 ソースコード全体 完成品 (funct…

Share LaTeXで数学の図形・グラフを作成

オンラインでTeXスクリプトを編集、コンパイルできるサービスShareLaTeXを使って簡単なグラフと図形を書いてみた。 ja.sharelatex.com Shared LaTeXの使い方 サンプル 二次関数 単位円 点の回転 参考 Shared LaTeXの使い方 Shared LaTeXは無料と有料のプラン…

Javascriptで8パズル

前回の画像データを分割+シャッフルして表示する処理に機能を追加してパズルゲームにしてみた。 www.segmentation-fault.xyz 完成品 シャッフル処理の変更 変更前 変更後 ソースコード 完成品 canvasで図形を描く var blocks = []; var canvas; var img; va…

Javascriptのcanvasと遅延処理でアニメーション

Javascriptのcanvasと遅延処理を組み合わせて簡単なアニメーションを描画してみる。夏なので簡単な花火っぽいアニメを作ってみた。 完成品 花火風アニメの作り方 花火の描画 遅延処理 ソースコード 完成品 点火ボタンを押すとお粗末な花火が描画される(た~…

Javascriptで画像を分割してシャッフルする

HTML5のcanvasとJavascriptを使って画像データを9つのブロックに分割し、ブロックをシャッフルして表示してみる。 シャッフル前 シャッフル後 ソースコード 参照 画像を分割してシャッフル表示 function resize(x, y) { document.orig.width = x; document.o…

coincheckのAPIで仮想通貨の販売レートを表示する

※2017/11/12 販売レートを表示する仮想通貨のペアにltc_jpy、bch_jpyを追加。 下記で提供されているAPIを使ってpythonで仮想通貨の販売レートを表示してみる。coincheck.com 事前準備 ソースコード 結果 その他 事前準備 外部モジュールのrequestsが必要にな…

Python3サンプルコード集(その1)

最近はC言語ばっかりでしたが、今後もソフトウェア屋をやるのであればPythonかRubyは慣れておきたいところ。Pythonを新たに始めるならPython3一択らしい(Python2は必要になったら調べれば事足りるため)。個人的に新しい言語を覚えるときは短いサンプルコード…

WAVE音声にdelayをかける

前回はWAVEの楽曲からボーカル成分だけを消してみました。www.segmentation-fault.xyz今回はWAVE音声にdelay(残響系)のエフェクトをかけてます。ディレイはある時刻 n における値 S(n) に過去時刻の値 S(n-m) を加算合成(やまびこ)していくことで実現できま…

位相反転でボーカルを消す(WAVEファイル)

WAVEファイルのいじり方が段々分かってきたので今回は歌入り楽曲データのボーカルを抜くプログラムを作成してみる。環境はLinux(CentOS7)、言語はC言語。 はじめに 対象の楽曲 ソースコード 実行結果 はじめに 音楽プレーヤー等にイヤホンを半挿しにするとボ…

WAVEファイルのノコギリ波を作って再生してみる

前回はWAVEファイルからデータを抽出し波形をプロットしてグラフ化した。www.segmentation-fault.xyz 今回は逆にWAVEファイルを作成してちゃんと再生できるか試してみる。 ノコギリ波の作成 ノコギリ波生成プログラム 波形表示と再生 ノコギリ波の作成 下記…

WAVEファイルの波形をgnuplotで表示してみる

サウンドエフェクト、信号処理に興味があるが前提知識が全く無い状態。とっかかりとして、まずはWAVEファイルを理解することから初めてみることにした。今回はかじり得た知識を使ってWAVEファイルから音データを抜き出して波形を表示してみた。実行環境はLin…

netstat -s コマンドっぽい表示をシェルで実現する

最近のLinuxはデフォルトではnet-toolsのコマンド(ifconfig、netstat等)はインストールされておらず、代わりにiproute2(ip、ss等)の使用を推奨していたりする。多くの先人の方がnet-toolsからiproute2へ移行する人向けにコマンド対応の一覧まとめて展開して…

Linuxのbcコマンドで高校数学

bcは四則演算や三角関数を使った計算をすることができるコマンド。対話モードで電卓のように使用したり、数式を記載したファイルを食わせて計算したりできる。使いどころが難しいけど覚えると何かと楽しいので軽くおさらいしてみた。 使い方 使用頻度が高い…