JavaScript + canvasで砂嵐を描画する サンプルコード

2018-12-12
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
    

目次

概要

JSとcanvasで砂嵐を描画するサンプルコード紹介します。

動作環境

chrome 61~

デモ

外部ウィンドウで開く

サンプルコード

main()

function main() {
	var canvas1 = document.getElementById("canvas1")
	canvas1.width = 500
	canvas1.height = 200
	
	setInterval((function(){
		sandstorm1(canvas1)
	}), 100);
	
	var canvas2 = document.getElementById("canvas2")
	canvas2.width = 500
	canvas2.height = 200
	
	setInterval((function(){
		sandstorm2(canvas2)
	}), 100);
}

function sandstorm1(canvas) {
	var context = canvas.getContext("2d")
	var src = context.getImageData(0, 0, canvas.width, canvas.height);
	var dst = context.createImageData(canvas.width, canvas.height);
	for (var i = 0; i < src.data.length; i += 4) {
		dst.data[i] = Math.ceil(Math.random() * 255);
		dst.data[i + 1] = Math.ceil(Math.random() * 255);
		dst.data[i + 2] = Math.ceil(Math.random() * 255);
		dst.data[i + 3] = 255;
	}
	context.putImageData(dst, 0, 0);
}

function sandstorm2(canvas) {
	var context = canvas.getContext("2d")
	var src = context.getImageData(0, 0, canvas.width, canvas.height);
	var dst = context.createImageData(canvas.width, canvas.height);
	for (var i = 0; i < src.data.length; i += 4) {
		dst.data[i] = dst.data[i + 1] = dst.data[i + 2] = Math.ceil(Math.random() * 255)
		dst.data[i + 3] = 255;
	}
	context.putImageData(dst, 0, 0);
}

ちょっとだけ解説。

canvasの各ピクセルへの参照方法

canvasの各ピクセルへ参照するためにはまず、getImageDataを利用してImageDataオブジェクトを取得します。 ImageDataオブジェクトのdataプロパティは画像情報が格納された1次元配列になっています。 この配列の要素番号をiとした時、i%4 === 0 は R、i%4 === 1 は G、i%4 === 2 は B、i%4 === 3 は α (透明度)を表しています。かつ各要素の最小値は0、最大値が255となっています。 0 から 255までの整数の乱数は

Math.ceil(Math.random() * 255);

で取得できるので、これを使って砂嵐っぽいものが描画できます。

おまけ

外部ウィンドウで開く

main()

function main() {
	var canvas1 = document.getElementById("canvas1")
	canvas1.width = 500
	canvas1.height = 500
	
	setInterval((function(){
		sandstorm1(canvas1)
	}), 100);
}

function sandstorm1(canvas) {
	var context = canvas.getContext("2d")
	var src = context.getImageData(0, 0, canvas.width, canvas.height);
	var dst = context.createImageData(canvas.width, canvas.height);
	for (var i = 0; i < src.data.length; i += 4) {
		if (i < src.data.length * 1 / 5) {
			dst.data[i]     = Math.ceil(Math.random() * 255);
			dst.data[i + 1] = Math.ceil(Math.random() * 255);
			dst.data[i + 2] = Math.ceil(Math.random() * 255);
			
		} else if (i < src.data.length * 2 / 5) {
			dst.data[i]     = Math.ceil(Math.random() * 255);
			dst.data[i + 1] = Math.ceil(Math.random() * 255);
			dst.data[i + 2] = 255
			
		} else if (i < src.data.length * 3 / 5) {
			dst.data[i]     = 255
			dst.data[i + 1] = Math.ceil(Math.random() * 255);
			dst.data[i + 2] = Math.ceil(Math.random() * 255);
			
		} else if (i < src.data.length * 4 / 5) {
			dst.data[i]     = Math.ceil(Math.random() * 255);
			dst.data[i + 1] = 255
			dst.data[i + 2] = Math.ceil(Math.random() * 255);
		} else {
			dst.data[i] = dst.data[i + 1] = dst.data[i + 2] = Math.ceil(Math.random() * 255)
		}
		dst.data[i + 3] = 255;
	}
	console.log(i)
	context.putImageData(dst, 0, 0);
}
    

関連記事

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

最新の投稿

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

AWS Amplify で コンテナベースのデプロイを行い REST API を構築
検証した環境 やってみる 初期準備 パイプラインを確認 終了処理 参考 AWS Amplify で コンテナベースのデプロイを行い REST API を構築した際のメモです。 検証した環境 amplify 5.1.…

Pythonでソケット通信を実装しメッセージの送受信を行う
ソース server.py client.py 動かしてみる 参考 Pythonでソケット通信を実現する方法です。 ソース server.py サーバ側のソースです。 client.py…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

応用情報技術者試験の合格体験記
受験時のステータス 受験結果 対策 スケジュール 午前問題 午後問題 参考書等 令和…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV
© 2021   404 motivation not found