JavaScript

スポンサーリンク
HTML

MonacoEditor + Vue を使ってエディタを実装

概要 Vue + MonacoEditorでJSのデバッガを作ってみました。 標準入出力(?)をサポートしています。とりあえず意味がわからないと思うのでデモをみてください。 紹介 デモ GitHub セットアップ Vue Vueプ...
HTML

async awaitで画像を読み込み canvasに描画 JavaScript

概要 async await Promise を使ってブラウザにアップロードした画像をcanvasに非同期で描画するサンプルの紹介です。 onloadメソッド縛りで実装すると非同期地獄になりますが、async await を使うことによりす...
HTML

JSで画像をまとめて読み込む(プリロードする)

概要 JSで画像をまとめて読み込む方法(プリロード)の紹介 JSのImageAPIのonloadを使って、複数の画像の読み込み完了時にイベントを発火させる方法です。 サンプルコード let imagesUrl = [ "/path/to...
JavaScript

JavaScriptで多次元配列の初期化を行う

概要 JavaScript(ES2015)で多次元配列を任意の値で初期化する方法について。 1次元配列 例えば、 let arr = new Array(5) と宣言した場合 console.log(arr) // undefined とな...
JavaScript

ブラウザで動くAtCoder用のデバッガを作ってみた (JSのみ)

概要 ブラウザで完結するAtCoder用のデバッガを作ってみました。 対応言語は(JS)のみになっています。 というのも、書いたコードをブラウザ上でeval関数に突っ込んでいるだけの実装だからです。 ブラウザ上で他の言語をサポートする仕組み...
JavaScript

画像の減色処理 サンプルコードとデモ JavaScript + canvas

概要 画像の減色処理を行ってみた。 サンプルコードとデモの紹介。 環境は JavaScript + Canvas。 減色処理について 通常、Canvas上での画像のRGBそれぞれの値は0〜255までの256^3で表現していますが、 この...
JavaScript

画像のHSV変換 JavaScript + canvas

概要 画像のHSV変換を行うサンプルコードとデモの紹介 デモ 以下のリンクでデモを動かしています。 デモの内容はRGB画像をHSVに変換し、色相(H)を反転(180を加算)した後、再びRGBに戻すとい処理を行なっています。 ...
JavaScript

大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】

概要 大津の二値化で画像を2値化するサンプルコード ↑のサンプルコードでは閾値を128として決め打ちで2値化していますが、画像のヒストグラムの分散から適切な閾値を求める方法(判別分析法)の1つです。 ここでは、そのサンプルコードとデ...
JavaScript

画像を2値化する JavaScript + canvas 【画像処理】

概要 JavaScriptで画像を2値化するサンプルコードの紹介。 デモ 実行すると以下のような画像が生成されます。 サンプルソース グレースケールに変換された画像の各画素の値が閾値未満であれば0、閾値以上であれば255に変換します...
JavaScript

画像をグレースケールに変換する JavaScript + canvas 【画像処理】

概要 JavaScriptで画像をグレースケールに変換するサンプルコードの紹介。 グレースケール変換式 ここではグレースケール画像変換式は次のように定義しています。 Y = 0.2126 * R + 0.7152 * G + 0.0722 ...
JavaScript

画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】

概要 JavaScriptで画像のチャンネルを入れ替えるコードについての紹介。 やりたいことは、通常、RGBで並んでいる画像の配列をBGRに変換するというもの。 変換すると以下のような画像になります。 環境はJavaScript + Can...
JavaScript

Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【JS】

概要 以前書いた「【JavaScript】AtCoderとかでも利用したい、ブラウザで動くエディタ + デバッグ環境を作る」を流用して、エディタ機能に「Monaco Editor」を利用した、AtCoder用のデバッグ環境を作りました。...
JavaScript

OpenCVをEmscriptenでwasmにビルドする!Webブラウザから呼び出す。OpenCV.js

概要 OpenCVをLLVM→EmscriptenでWebAssembly(以下、wasm)をビルドする。 JavaScriptからOpenCVを呼び出す。 環境 使用するもの OpenCV4.0.0(pre) Emscripten L...
JavaScript

【JavaScript】角度を16方位に変換するソースコード

概要 与えられたある角度を16方位に変換する。 よくありがちな処理としてこんなものがあります。 var dname = ; var dindex = Math.round( degree / 22.5 ) alert("方角は" + ...
HTML

JavaScript + canvasで画像変換処理をするときのスニペット

概要 canvasはJSによって図形などを描画する際に使われます。 canvasに描画された画像はピクセルに対して参照・操作することが可能なので、 これを用いて画像変換処理を行うことができます。 デモ画像 この記事では自分がよく使うス...
CSS

JSでルーレットを作った。

概要 だいぶ前にJSで作ったルーレットを公開します。 特にフレームワークとか使っていません。 DEMO デモ | 別ウィンドウで開く 以上。 追記 2019/01/20 ↑これだと流石にお粗末すぎるので、回転するルーレットを作りました...
競技プログラミング

初めて参加したAtCoderで惨敗した話

7/21についに初めてatcoderに軽いノリで参戦した。で、惨敗した。敗因と対策を書きます。
  • 標準入出力に手間取りロジックを考える時間が奪われてしまったこと。
  • 綺麗に書くことは捨てる
  • 3の問題が時間オーバしてしまう
  • 配列操作に手こずった
pup push shift map などの機能を完璧に押さえておけばググる時間を省くことができたんじゃないかな...と思った
JavaScript

【Python】顔画像をPOST 、 顔検出 、 canvasで顔にお絵かき【JS】

概要 「顔検出をして、顔に絵を描く」というもの。 具体的には、 顔写真の画像をAPIサーバへアップロードし、顔検出を行う。 サーバは顔座標を返し、それを元にcanvasでお絵かきする。 環境 フロント html + JS + canvas...
CSS

【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした|その1

K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした|その1 + canavsの勉強も兼ねて機械学習とかで使われるk-meansによるクラスタリングを可視化してみたそしたら、ちょっと気持ち悪い蜘蛛みたいな動きをするようになっ...
スポンサーリンク
タイトルとURLをコピーしました