作品 ID: 2794
★ぬり絵アプリ★（アニメーション制作用）

公開
☑黒い線で囲まれた部分を、クリックでベタ塗りできます。　／画像がない場合→「サンプル画像」のボタンクリック！　／　広い面積を塗る場合、ラグ有り⌛️。（ただいまアルゴリズム改良中）
ソース
プログラム

!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。
WINDOWへドロップ禁止。
#-----------------------------------------------------------------------
操作キャンバスx＝300
操作キャンバスy＝0

画像幅=100
画像高=0

画像データマップ横＝0
画像データマップ縦＝0

キャンバス比横＝0
キャンバス比縦＝0

処理範囲=[]

A=0
変化A=[]
色データ＝[]
ベタ塗りデータ=[]

マップ1=[]

画像URL１＝「https://n3s.nadesi.com/image.php?f=526.png」
画像１＝画像URL１を画像読み待つ。


「body」の「背景色」に黒色をDOMスタイル設定。

＃ 画像
DOM親要素に「<IMG id="result"></IMG>」をHTML設定。＃改行作成。＃←参照https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E8%A6%81%E7%B4%A0ID%E5%8F%96%E5%BE%97&show
DOM親要素に{
　　"position":"relative",
　　"幅":"{画像幅}px",
　　"高さ":"{画像高さ}px",
}をDOMスタイル一括設定。

＃色確認用のキャンバス作成
[60,60]のキャンバス作成して色窓に代入。

＃色選択ボックス作成して色選択に代入。
R=[0,255,150]の値指定バー作成。改行作成。
G=[0,255,150]の値指定バー作成。改行作成。
B=[0,255,150]の値指定バー作成。改行作成。
「←しくみを見る」のチェックボックス作成してストッパーに代入。
T=[0,255,255]の値指定バー作成。改行作成。

「#nako3_canvas」の描画開始
改行作成。改行作成。

「色塗りする画像が手元にない場合には、
    『サンプル画像を利用』ボタンを押してください。」と言う


　「サンプル画像を利用」のボタン作成してサンプルに代入。　＃＃サンプル使用時
　
#「☆画像ファイルを選択してください。または、キャンバスにドロップしてください。」のラベル作成。改行作成。
ファイル選択作成して画像ファイル選択に代入。
　画像ファイル選択の「accept」に『image/*』をDOM属性設定。　//固有ファイル型指定子*/
//　画像ファイル選択の「multiple」に、はいをDOM属性設定。　 //複数選択出来るようにする
　画像ファイル選択の「change」に、「選択画像取得」をDOMイベント追加。
　


「#nako3_canvas」にファイルドロップした時には、
　　画像ファイル選択["files"]＝対象。
　　選択画像取得。
ここまで。

●選択画像取得
　選択ファイルリスト＝画像ファイル選択["files"]。
　ファイル＝選択ファイルリスト[0]

　「名前：{ファイル["name"]}」を表示　//ファイル名（パス無し）
　「サイズ：｛ファイル["size"]｝」を表示　//ファイルサイズ（バイト）
　「拡張子：｛ファイル["type"]｝」を表示　//ファイルタイプ（image/jpegとか）
　
　ファイルの画像ファイル開いた時には
　　　　img＝対象。
　　　　操作キャンバスy＝img["height"]/(img["width"]/操作キャンバスx) 

	　 「高さ：{img["height"]｝」を表示　　＃←追加した。
　　　　「幅：｛img["width"]｝」を表示
　　　　＃img["src"]を表示　　　＃←これをやると意味不明のデータ取得
　　　　img["height"]を画像データマップ縦に代入
　　　　img["width"]を画像データマップ横に代入
　　　　
　　　　「#nako3_canvas」の「幅」に画像データマップ横をDOM属性設定。
　　　　「#nako3_canvas」の「高さ」に画像データマップ縦をDOM属性設定。
　　　　[0,0,画像データマップ横,画像データマップ縦]にimgを画像描画。
　　　　
　　　　Rに{
　　　　#"size":"500"
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+90}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+20}px"
　　　　"width":"200px" 
　　　　"background-color": "#eee"
　　　　"font-size": "14"px
　　　　"progress/color": "#33"
　　　　"cursor": "pointer"
　　　　}をDOMスタイル一括設定
　　　　
　　　　Gに{
　　　　"size":"500px"
　　　　"width":"200px" 
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+90}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+20}px"
　　　　}をDOMスタイル一括設定
　　　　
　　　　Bに{
　　　　"幅":"500"
　　　　"幅":"200px" 
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+90}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+20}px"
　　　　}をDOMスタイル一括設定
　　　　
　　　　ストッパーに{
　　　　"幅":"500"
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+90}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+20}px"
　　　　}をDOMスタイル一括設定
　　　　
　　　　色窓に{
　　　　"幅":"500"
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+20}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+80}px"
　　　　}をDOMスタイル一括設定
　　　　
　　　　200で画像モノクロ。　＃＃ここでマップ１を作成。
　　　　「🌟塗りたい部分をクリックすると色が塗れます。
    （広い面積を塗るとき、時間が かかります💦）」と言う。
    
　　　　
　ここまで。
ここまで。


サンプルをクリックした時には
    「#nako3_canvas」の描画開始
    「#nako3_canvas」の「幅」に388をDOM属性設定。
    「#nako3_canvas」の「高さ」に386をDOM属性設定。
    388を画像データマップ縦に代入
    386を画像データマップ横に代入
    [0,0]へ画像１を画像描画
    １秒待つ
    200で画像モノクロ。　＃＃ここでマップ１を作成。
    
    
    Rに{
　　　　#"size":"500"
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+90}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+20}px"
　　　　"width":"200px" 
　　　　"background-color": "#eee"
　　　　"font-size": "14"px
　　　　"progress/color": "#33"
　　　　"cursor": "pointer"
　　　　}をDOMスタイル一括設定
　　　　
　　　　Gに{
　　　　"size":"500px"
　　　　"width":"200px" 
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+90}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+20}px"
　　　　}をDOMスタイル一括設定
　　　　
　　　　Bに{
　　　　"幅":"500"
　　　　"幅":"200px" 
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+90}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+20}px"
　　　　}をDOMスタイル一括設定
　　　　
　　　　色窓に{
　　　　"幅":"500"
　　　　"position":　"relative",//相対位置への配置
　　　　"左":"{画像データマップ横+20}px"　//メインキャンバスの幅だけ左に
　　　　"top":"{-画像データマップ縦+80}px"
　　　　}をDOMスタイル一括設定
　　　　
    「🌟塗りたい部分をクリックすると色が塗れます。
    （広い面積を塗るとき、時間が かかります💦）」と言う。
    
ここまで

/*==============================================================

ここから
画像CSV化―編集プログラム
--------------------------------------------------------------
===============================================================*/
改行作成。
改行作成。

●指定色取得
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    [赤,緑,青]の色混ぜして指定色に代入
    指定色で戻る
ここまで

●(xywhの|xywhを)色データ取得
　描画中コンテキストの「getImageData」をxywhでJSメソッド実行して、それ["data"]で戻る。
ここまで。
　　　　
●(xywhを色データで|xywhに)画像処理反映
『(function (xywh,color,ctx){
const [x,y,w,h]=xywh;
const img = ctx.getImageData(x,y,w,h);
let data = img.data;
for (let i=0; i<data.length;i++){data[i]=color[i]}
ctx.putImageData(img,x,y);
})』を[xywh,色データ,描画中コンテキスト]でJS関数実行。
ここまで。


//標準値は(0-255)。二値化。
●(標準値で)画像モノクロ
　もし、標準値＜０ならば、標準値＝０。
　もし、標準値＞２５５ならば、標準値＝２５５。
　
　処理範囲=[0,0,画像データマップ横,画像データマップ縦]
　色データ=処理範囲の色データ取得。
　＃色データを表示
　(画像データマップ横*画像データマップ縦)を画素数に代入
　カウンタを0から(画素数-1)まで繰り返す
　    RGB番号=カウンタ*4
　    色平均とは変数＝(色データ[カウンタ*4] + 色データ[カウンタ*4+1] + 色データ[カウンタ*4+2])/3。
　    ＃＃標準値を堺に、白と黒を分ける
　　　もし、標準値＜色平均ならば、
　　　　マップ１[カウンタ]＝1。
　　　　3回。色データ[RGB番号+回数-1]＝255。ここまで。
　　　違えば、
　　　　マップ１[カウンタ]＝0。
　　　　3回。色データ[RGB番号+回数-1]＝0。ここまで。
　　　ここまで
　　　
　　　＃＃マップ１の画像の端のピクセルだけ０にして囲う。
　　　もし、(カウンタ%画像データマップ横)=0または(カウンタ%画像データマップ横)=画像データマップ横-1ならば　＃＃横(右･左)を囲う
　　　    マップ1[カウンタ]=0
　　　ここまで
　　　もし、カウンタ>0かつカウンタ<画像データマップ横ならば　＃＃下のみを囲う
　　　    マップ1[カウンタ]=0
　　　ここまで
　　　もし、カウンタ>画像データマップ横*(画像データマップ縦-1)ならば　＃＃上のみを囲う
　　　    もし、カウンタ<(画像データマップ横*画像データマップ縦)ならば
　　　        マップ1[カウンタ]=0
　　　 　　ここまで
　　　 ここまで
　　　 
　　ここまで
　　　「#nako3_canvas」の描画開始
　　　[0,0,画像データマップ横,画像データマップ縦]を色データで画像処理反映
ここまで



スタック=[]

データ＝[]

#マウス用のイベント
Rの「mousemove」がDOMイベント発火した時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで

Gの「mousemove」がDOMイベント発火した時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで

Bの「mousemove」がDOMイベント発火した時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで

Tの「mousemove」がDOMイベント発火した時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで

#タッチパネル用のイベント
Rをタッチした時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで

Gをタッチした時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで

Bをタッチした時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで

Tをタッチした時には、
    色窓の描画開始
    赤=Rのテキスト取得
    緑=Gのテキスト取得
    青=Bのテキスト取得
    透明度=Tのテキスト取得
    「rgba({赤},{緑},{青},{透明度})」に塗色設定
    [0,0]へ150の円描画
    「#nako3_canvas」の描画開始
ここまで


ダウンロードボタン＝「画像をダウンロード」のボタン作成。
ダウンロードボタンをクリックした時には
　　描画ダウンロード。
ここまで。


「#nako3_canvas」をマウス押した時には、　　　＃＃ベタ塗りプログラム
    「#nako3_canvas」の描画開始

マウスXの整数部分を点マウスXに代入
マウスYの整数部分を点マウスYに代入
マウス＝[点マウスX,点マウスY]


スタックにマウスを配列プッシュ　　＃＃　←これで「！１」文を１回目通れる。代入したのは勝手に消費してくれる

マップ２=[]     ＃＃どこの色塗ったか記録（１クリックずつ新しものを用意）


「#nako3_canvas」の描画開始

(スタックの要素数!=0)かつ(スタックの要素数!=1)の間
[マウス[0],マウス[1],1,1]の色データ取得して現在地カラーに代入　　＃今の位置の色を取得
マウス[0]+(マウス[1]*画像データマップ横)を現在地に代入　　　　＃今の位置のマップ形式の位置

もし、マップ1[現在地]=0でなければ
  
ストッパーの「checked」をDOM属性取得。
もし、それがオンならば、
 0秒待つ
ここまで

[マウス[0],マウス[1],1,1]を色データ取得してベタ色に代入　　＃　←あらかじめ取得しないといけないそう、、、


赤=Rのテキスト取得
緑=Gのテキスト取得
青=Bのテキスト取得
透明度=Tのテキスト取得
ベタ色=[赤,緑,青,透明度]
[マウス[0],マウス[1],1,1]をベタ色で画像処理反映　 ＃現在地を塗る
マップ２[現在地]=1　＃＃現在地のマップ２を塗る
ここまで

右フラグ=オフ　　＃＃初期化します。
左フラグ=オフ
下フラグ=オフ
上フラグ=オフ　


マップ１[現在地+1]を右ビットに代入
マップ２[現在地+1]を右ベタに代入
もし、右ビット!=0かつ右ベタ!=1ならば
右フラグ=オン
ここまで


マップ１[現在地-1]を左ビットに代入
マップ２[現在地-1]を左ベタに代入
もし、左ビット!=0かつ左ベタ!=1ならば
もし、右フラグ=オンならば
[マウス[0]-1,マウス[1]]をスタックに配列プッシュ
違えば
左フラグ=オン
ここまで
違えば
ここまで


マップ１[現在地+画像データマップ横]を下ビットに代入
マップ２[現在地+画像データマップ横]を下ベタに代入
もし、下ビット!=0かつ下ベタ!=1ならば
もし、右フラグ=オンまたは左フラグ=オンならば
[マウス[0],マウス[1]+1]をスタックに配列プッシュ
違えば
下フラグ=オン
ここまで
違えば
ここまで


	
マップ１[現在地-画像データマップ横]を上ビットに代入
マップ２[現在地-画像データマップ横]を上ベタに代入
もし、上ビット=!0かつ上ベタ!=1ならば
もし、右フラグ=オンまたは左フラグ=オンまたは下フラグ=オンならば
[マウス[0],マウス[1]-1]をスタックに配列プッシュ
違えば
上フラグ=オン
ここまで
違えば
ここまで


もし右フラグ=オンならば
マウス=[マウス[0]+1,マウス[1]]
ここまで

もし左フラグ=オンならば
マウス=[マウス[0]-1,マウス[1]]
ここまで

もし下フラグ=オンならば
マウス=[マウス[0],マウス[1]+1]
ここまで

もし上フラグ=オンならば
マウス=[マウス[0],マウス[1]-1]
ここまで

もし、右フラグ=オフかつ左フラグ=オフかつ下フラグ=オフかつ上フラグ=オフならば　＃フラグが立ってないなら、スタックに移る
スタックの0を配列削除
スタック[0]をマウスに代入
ここまで

ここまで　# ←「の間」から

ここまで　＃　←「マウス押した時には」から
作品について
作品情報

作品を編集
shikiishi 作
ライセンス: MIT（改変可/表示）
形式: wnako
タグ: 画像, 画像処理, アニメーション, アニメ
利用バージョン: 3.5.3
アクセス数(累計): 181
アクセス数(今月): 108
更新日時: 2024/05/20 18:22 編集: 2025/09/29 14:17
⭐
作品公開情報
交流
コメントを取得中...
★ぬり絵 アプリ★（アニメーション制作用）

プログラム

作品情報

コメント

★ぬり絵アプリ★（アニメーション制作用）
