2019/01/25

Canvasで任意の色に近い色をカラーパレットから取得し画像を減色する

Labels: ,
Canvasで表現できる色は、RGBがそれぞれ0〜255の値を取るので、256*256*256の16,777,216種類ある。（※Alphaについては考えない）
そのまま表示すれば実物に近い画像になるのだが、減色したいときもある。（レトロ感をだす画像処理フィルターとか）

そこで、任意の色に近い色をカラーパレットから取得し画像を減色する方法をまとめる。
続きを読む »
時刻: 0 件のコメント :
Labels: ,

2019/01/16

Canvasでカメラの映像に画像処理フィルターをかけて表示する方法

Labels: , ,
カメラの映像をリアルタイムに処理しドット絵っぽくしたくて、年末から画像処理学んでいき欲が再燃した。
今回はWebカメラやラップトップパソコンのカメラを使って映像を取得し、適当な画像処理フィルターをかけ、ブラウザに表示する方法をまとめる。（筆者環境はMBP）


基本: カメラの映像をブラウザに表示する


単純に表示するだけの場合は、video要素（HTMLMediaElement）とMediaStreamを使う。
<video id="camera"></video>
async function main() {
  const video = document.querySelector("video#camera");
  // MediaStreamを取得する（Promiseが返る）
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });

  video.srcObject = stream;
  // MediaStreamが取得できたら再生する
  video.onloadedmetadata = () => video.play();
}

main();
今回は映像だけを使いたいので、mediaDevices.getUserMediaに{video: true}を指定したが、音声も使いたい場合は{video: true, audio: true}のように指定する。

詳細はMediaDevices.getUserMediaを参照してください。
※ 執筆時点では日本語ドキュメントが古いため、英語ドキュメントを読んだほうが良い。
続きを読む »
時刻: 0 件のコメント :
Labels: , ,

2019/01/10

[golang]任意の値、要素数で配列を初期化する方法

Labels:
Go言語の練習がてら「プログラマ脳を鍛える 数学パズル」をやっていた。

そこでひとつの疑問が生まれた。
一発で任意の値、要素数で配列を初期化できないのか？

そんなことをツイートしたらリプライをいただいたので実際に試してみた。


任意の要素数の配列を生成する


make関数を使って配列（正確にはslice）を生成する。
// すべてfalseの配列ができる
list := make([]bool, 1000)

// すべて0の配列ができる
list := make([]int, 1000)

make(型, 要素数, 容量)で任意の型と要素数でsliceを生成する。しかし型がboolならすべてfalse、intならすべで0のスライスができる。
続きを読む »
時刻: 0 件のコメント :
Labels:

2019/01/09

Chromeでボタンの背景色を白(fff)にできないときの対処法

Labels:
NES.cssを開発しているときに、Chromeだけなぜかボタンの背景色（background-color）に白(#fff)が指定できないことに気づいた。FirefoxやSafariだと問題ない。
いろいろ実験したので、ボタンの背景色を白するための対処法をまとめる。


続きを読む »
時刻: 0 件のコメント :
Labels:

2019/01/08

2018年活動報告と2019年行動指針

Labels:
2018年はお世話になりました。
2019年もひきつづきダーシノ、当ブログともによろしくお願いします。

過去の記事


2018年のBlack Everyday Company


まずは当ブログについての総括を。

ブログ 96.6万PV

2018年の1年間で、966,291PVあった。

前半は副業、後半はOSS活動などで忙しかったため投稿数は過去最少の33記事。PVはほぼ横ばいだ。ありがたいことに書いた記事がバズることが数回あり、3月、10月、11月は 約8.9万PV/月まで伸びた。
続きを読む »
時刻: 0 件のコメント :
Labels:
登録: 投稿 ( Atom )