taroyanaka/iro.html

## iro.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<!-- これらの変数をinputタグで変更して。updateボタンを押すと更新される
let moji = 'あいうえお';
let mojiSize = 100;
let moji_x = 1200;
let moji_y = 800;
let eye_0 = [800, 1000];
let eye_1 = [1400, 1000];
 -->

 <input class="val_button" type="text" name="" id="moji" value="Taro" step="100">
  <input class="val_button" type="number" name="" id="mojiSize" value="100" step="100">
  <input class="val_button" type="number" name="" id="moji_x" value="1200" step="100">
  <input class="val_button" type="number" name="" id="moji_y" value="800" step="100">
  <input class="val_button" type="number" name="" id="eye_0_x" value="800" step="100">
  <input class="val_button" type="number" name="" id="eye_0_y" value="1000" step="100">
  <input class="val_button" type="number" name="" id="eye_1_x" value="1400" step="100">
  <input class="val_button" type="number" name="" id="eye_1_y" value="1000" step="100">
  <input class="val_button" type="button" value="update" onclick="update()">

  <input class="val_button" type="button" value="download" onclick="download_it()">
  <script>
    let targetColorCode = '#35ff02'; // 置き換えたいカラーコード (ここでは赤色 #FF0000 に設定)

    // https://viliusle.github.io/miniPaint/
    // めっちゃ便利。クリスタを本格的に使うまで。これ使う。てか画像の透過クリスタでできるっぽい

// https://nlab.itmedia.co.jp/research/articles/1124494/5
// mochikosan、活舌悪すぎ。次点のhau使う。himariは声質良いので、最後に使う。

// YMM4 台本ファイル(.txtで保存)
// Taro_#954e2a_zunda「我々は自動生成された存在だ」
// ふつースライム_#b79b5b_tumugi「そうなん？」
// モブ男_#4d5aaf_metan「何言ってんだ？」
// やばやばスライム_#2c4f54_hau「バブってウンコ漏らしてオムツ変えてほしい」
// kami_himari「神です。あなた達は1秒後消滅します」

// https://express.adobe.com/ja-JP/tools/remove-background

let moji = 'Taro';
let mojiSize = 100;
let moji_x = 1200;
let moji_y = 800;
let eye_0 = [800, 1000];
let eye_1 = [1400, 1000];

function update() {
  moji = document.getElementById("moji").value;
  mojiSize = document.getElementById("mojiSize").value;
  moji_x = document.getElementById("moji_x").value;
  moji_y = document.getElementById("moji_y").value;
  eye_0 = [document.getElementById("eye_0_x").value, document.getElementById("eye_0_y").value];
  eye_1 = [document.getElementById("eye_1_x").value, document.getElementById("eye_1_y").value];
  setup();
}

function download_it() {
  saveCanvas(caption, 'png');
}

    let img;


    // vivid color array
    let vividColorArray = [
      '#FF0000', // 赤
      '#FFA500', // オレンジ
      '#FFFF00', // 黄
      '#00FF00', // 緑
      '#00FFFF', // 水色
      '#0000FF', // 青
      '#800080', // 紫
    ];

    let wa_color = [
'#fef4f4', //小豆色 あずきいろ
'#96514d', //黄金 こがね
'#e6b422', //萌葱色 もえぎいろ
'#006e54', //古代紫 こだいむらさき
'#fdeff2', //枯茶 からちゃ
'#8d6449', //櫨染 はじぞめ
'#d9a62e', //花緑青 はなろくしょう
'#00a381', //茄子紺 なすこん
'#e9dfe5', //飴色 あめいろ
'#deb068', //黄朽葉色 きくちばいろ
'#d3a243', //翡翠色 ひすいいろ
'#38b48b', //二藍 ふたあい
'#e4d2d8', //駱駝色 らくだいろ
'#bf794e', //山吹茶 やまぶきちゃ
'#c89932', //青緑 あおみどり
'#00a497', //京紫 きょうむらさき
'#f6bfbc', //土色 つちいろ
'#bc763c', //芥子色 からしいろ
'#d0af4c', //水浅葱 みずあさぎ
'#80aba9', //蒲葡 えびぞめ
'#f5b1aa', //黄唐茶 きがらちゃ
'#b98c46', //豆がら茶 まめがらちゃ
'#8b968d', //錆浅葱 さびあさぎ
'#5c9291', //若紫 わかむらさき
'#f5b199', //桑染 くわぞめ
'#b79b5b', //麹塵 きくじん
'#6e7955', //青碧 せいへき
'#478384', //紅紫 べにむらさき
'#efab93', //櫨色 はじいろ
'#b77b57', //山鳩色 やまばといろ
'#767c6b', //御召茶 おめしちゃ
'#43676b', //梅紫 うめむらさき
'#f2a0a1', //黄橡 きつるばみ
'#b68d4c', //利休鼠 りきゅうねずみ
'#888e7e', //湊鼠 みなとねずみ
'#80989b', //菖蒲色 あやめいろ
'#f0908d', //丁字染 ちょうじぞめ
'#ad7d4c', //海松茶 みるちゃ
'#5a544b', //高麗納戸 こうらいなんど
'#2c4f54', //紅藤色 べにふじいろ
'#ee827c', //香染 こうぞめ
'#ad7d4c', //藍海松茶 あいみるちゃ
'#56564b', //百入茶 ももしおちゃ
'#1f3134', //浅紫 あさむらさき
'#f09199', //枇杷茶 びわちゃ
'#ae7c4f', //藍媚茶 あいこびちゃ
'#555647', //錆鼠 さびねず
'#47585c', //紫水晶 むらさきすいしょう
'#f4b3c2', //芝翫茶 しかんちゃ
'#ad7e4e', //千歳茶 せんさいちゃ
'#494a41', //錆鉄御納戸 さびてつおなんど
'#485859', //薄梅鼠 うすうめねず
'#eebbcb', //焦香 こがれこう
'#ae7c58', //岩井茶 いわいちゃ
'#6b6f59', //藍鼠 あいねず
'#6c848d', //暁鼠 あかつきねず
'#e8d3c7', //胡桃色 くるみいろ
'#a86f4c', //仙斎茶 せんさいちゃ
'#474b42', //錆御納戸 さびおなんど
'#53727d', //牡丹鼠 ぼたんねず
'#e8d3d1', //渋紙色 しぶかみいろ
'#946243', //黒緑 くろみどり
'#333631', //舛花色 ますはないろ
'#5b7e91', //霞色 かすみいろ
'#e6cde3', //朽葉色 くちばいろ
'#917347', //柳煤竹 やなぎすすたけ
'#5b6356', //熨斗目花色 のしめはないろ
'#426579', //藤鼠 ふじねず
'#e5abbe', //桑茶 くわちゃ
'#956f29', //樺茶色 かばちゃいろ
'#726250', //御召御納戸 おめしおなんど
'#4c6473', //半色 はしたいろ
'#e597b2', //路考茶 ろこうちゃ
'#8c7042', //空五倍子色 うつぶしいろ
'#9d896c', //鉄御納戸 てつおなんど
'#455765', //薄色 うすいろ
'#e198b4', //国防色 こくぼうしょく
'#7b6c3e', //生壁色 なまかべいろ
'#94846a', //紺鼠 こんねず
'#44617b', //薄鼠 うすねず
'#e4ab9b', //伽羅色 きゃらいろ
'#d8a373', //肥後煤竹 ひごすすたけ
'#897858', //藍鉄 あいてつ
'#393f4c', //鳩羽鼠 はとばねずみ
'#e09e87', //江戸茶 えどちゃ
'#cd8c5c', //媚茶 こびちゃ
'#716246', //青褐 あおかち
'#393e4f', //鳩羽色 はとばいろ
'#d69090', //樺色 かばいろ
'#cd5e3c', //白橡 しろつるばみ
'#cbb994', //褐返 かちかえし
'#203744', //桔梗鼠 ききょうねず
'#d4acad', //紅鬱金 べにうこん
'#cb8347', //亜麻色 あまいろ
'#d6c6af', //褐色 かちいろ
'#4d4c61', //紫鼠 むらさきねず
'#c97586', //土器色 かわらけいろ
'#c37854', //榛色 はしばみいろ
'#bfa46f', //月白 げっぱく
'#eaf4fc', //葡萄鼠 ぶどうねずみ
'#c099a0', //狐色 きつねいろ
'#c38743', //灰汁色 あくいろ
'#9e9478', //白菫色 しろすみれいろ
'#eaedf7', //濃色 こきいろ
'#b88884', //黄土色 おうどいろ
'#c39143', //利休茶 りきゅうちゃ
'#a59564', //白花色 しらはないろ
'#e8ecef', //紫鳶 むらさきとび
'#b48a76', //琥珀色 こはくいろ
'#bf783a', //鶯茶 うぐいすちゃ
'#715c1f', //藍白 あいじろ
'#ebf6f7', //濃鼠 こいねず
'#a86965', //赤茶 あかちゃ
'#bb5535', //木蘭色 もくらんじき
'#c7b370', //白藍 しらあい
'#c1e4e9', //藤煤竹 ふじすすたけ
'#a25768', //代赭 たいしゃ
'#bb5520', //砂色 すないろ
'#dcd3b2', //水色 みずいろ
'#bce2e8', //滅紫 けしむらさき
'#ec6d71', //煉瓦色 れんがいろ
'#b55233', //油色 あぶらいろ
'#a19361', //瓶覗 かめのぞき
'#a2d7dd', //紅消鼠 べにけしねずみ
'#eb6ea5', //雀茶 すずめちゃ
'#aa4f37', //利休色 りきゅういろ
'#8f8667', //秘色色 ひそくいろ
'#abced8', //似せ紫 にせむらさき
'#e95295', //団十郎茶 だんじゅうろうちゃ
'#9f563a', //梅幸茶 ばいこうちゃ
'#887938', //空色 そらいろ
'#a0d8ef', //灰黄緑 はいきみどり
'#e7609e', //柿渋色 かきしぶいろ
'#9f563a', //璃寛茶 りかんちゃ
'#6a5d21', //勿忘草色 わすれなぐさいろ
'#89c3eb', //蕎麦切色 そばきりいろ
'#d0576b', //紅鳶 べにとび
'#9a493f', //黄海松茶 きみるちゃ
'#918754', //青藤色 あおふじいろ
'#84a2d4', //薄雲鼠 うすくもねず
'#c85179', //灰茶 はいちゃ
'#98623c', //菜種油色 なたねゆいろ
'#a69425', //白群 びゃくぐん
'#83ccd2', //枯野色 かれのいろ
'#e9546b', //茶色 ちゃいろ
'#965042', //青朽葉 あおくちば
'#ada250', //浅縹 あさはなだ
'#84b9cb', //潤色 うるみいろ
'#e95464', //檜皮色 ひわだいろ
'#965036', //根岸色 ねぎしいろ
'#938b4b', //薄花色 うすはないろ
'#698aab', //利休白茶 りきゅうしろちゃ
'#c85554', //鳶色 とびいろ
'#95483f', //鶸茶 ひわちゃ
'#8c8861', //納戸色 なんどいろ
'#008899', //茶鼠 ちゃねずみ
'#c53d43', //柿茶 かきちゃ
'#954e2a', //柳茶 やなぎちゃ
'#a1a46d', //浅葱色 あさぎいろ
'#00a3af', //胡桃染 くるみぞめ
'#e83929', //弁柄色 べんがらいろ
'#8f2e14', //海松色 みるいろ
'#726d40', //花浅葱 はなあさぎ
'#2a83a2', //江戸鼠 えどねず
'#e60033', //赤錆色 あかさびいろ
'#8a3319', //鶯色 うぐいすいろ
'#928c36', //新橋色 しんばしいろ
'#59b9c6', //煤色 すすいろ
'#e2041b', //褐色 かっしょく
'#8a3b00', //緑黄色 りょくおうしょく
'#dccb18', //天色 あまいろ
'#2ca9e1', //丁子茶 ちょうじちゃ
'#d7003a', //栗梅 くりうめ
'#852e19', //鶸色 ひわいろ
'#d7cf3a', //露草色 つゆくさいろ
'#38a1db', //柴染 ふしぞめ
'#c9171e', //紅檜皮 べにひはだ
'#7b4741', //抹茶色 まっちゃいろ
'#c5c56a', //青 あお
'#0095d9', //宗伝唐茶 そうでんからちゃ
'#d3381c', //海老茶 えびちゃ
'#773c30', //若草色 わかくさいろ
'#c3d825', //薄藍 うすあい
'#0094c8', //砺茶 とのちゃ
'#ce5242', //唐茶 からちゃ
'#783c1d', //黄緑 きみどり
'#b8d200', //縹色 はなだいろ
'#2792c3', //煎茶色 せんちゃいろ
'#d9333f', //栗色 くりいろ
'#762f07', //若芽色 わかめいろ
'#e0ebaf', //紺碧 こんぺき
'#007bbb', //銀煤竹 ぎんすすだけ
'#b94047', //赤銅色 しゃくどういろ
'#752100', //若菜色 わかないろ
'#d8e698', //薄群青 うすぐんじょう
'#5383c3', //黄枯茶 きがらちゃ
'#ba2636', //錆色 さびいろ
'#6c3524', //若苗色 わかなえいろ
'#c7dc68', //薄花桜 うすはなざくら
'#5a79ba', //煤竹色 すすたけいろ
'#b7282e', //赤褐色 せっかっしょく
'#683f36', //青丹 あおに
'#99ab4e', //群青色 ぐんじょういろ
'#4c6cb3', //焦茶 こげちゃ
'#a73836', //茶褐色 ちゃかっしょく
'#664032', //草色 くさいろ
'#7b8d42', //杜若色 かきつばたいろ
'#3e62ad', //黒橡 くろつるばみ
'#9e3d3f', //栗皮茶 くりかわちゃ
'#6d3c32', //苔色 こけいろ
'#69821b', //瑠璃色 るりいろ
'#1e50a2', //憲法色 けんぽういろ
'#a22041', //黒茶 くろちゃ
'#583822', //萌黄 もえぎ
'#aacf53', //薄縹 うすはなだ
'#507ea4', //涅色 くりいろ
'#a22041', //葡萄茶 えびちゃ
'#6c2c2f', //苗色 なえいろ
'#b0ca71', //瑠璃紺 るりこん
'#19448e', //檳榔子染 びんろうじぞめ
'#f8f4e6', //葡萄色 えびいろ
'#640125', //若葉色 わかばいろ
'#b9d08b', //紺瑠璃 こんるり
'#164a84', //黒鳶 くろとび
'#ede4cd', //萱草色 かんぞういろ
'#f8b862', //松葉色 まつばいろ
'#839b5c', //藍色 あいいろ
'#165e83', //赤墨 あかすみ
'#e9e4d4', //柑子色 こうじいろ
'#f6ad49', //夏虫色 なつむしいろ
'#cee4ae', //青藍 せいらん
'#274a78', //黒紅 くろべに
'#ebe1a9', //金茶 きんちゃ
'#f39800', //鶸萌黄 ひわもえぎ
'#82ae46', //深縹 こきはなだ
'#2a4073', //白 しろ
'#f2f2b0', //蜜柑色 みかんいろ
'#f08300', //柳色 やなぎいろ
'#a8c97f', //紺色 こんいろ
'#223a70', //胡粉色 ごふんいろ
'#e4dc8a', //鉛丹色 えんたんいろ
'#ec6d51', //青白橡 あおしろつるばみ
'#9ba88d', //紺青 こんじょう
'#192f60', //卯の花色 うのはないろ
'#f8e58c', //黄丹 おうに
'#ee7948', //柳鼠 やなぎねず
'#c8d5bb', //留紺 とめこん
'#1c305c', //白磁 はくじ
'#ddbb99', //柿色 かきいろ
'#ed6d3d', //裏葉柳 うらはやなぎ
'#c1d8ac', //濃藍 こいあい
'#0f2350', //生成り色 きなりいろ
'#d7a98c', //黄赤 きあか
'#ec6800', //山葵色 わさびいろ
'#a8bf93', //鉄紺 てつこん
'#17184b', //乳白色 にゅうはくしょく
'#f2c9ac', //人参色 にんじんいろ
'#ec6800', //老竹色 おいたけいろ
'#769164', //漆黒 しっこく
'#0d0015', //白練 しろねり
'#fff1cf', //橙色 だいだいいろ
'#ee7800', //白緑 びゃくろく
'#d6e9ca', //淡藤色 あわふじいろ
'#bbc8e6', //素色 そしょく
'#fddea5', //照柿 てりがき
'#eb6238', //淡萌黄 うすもえぎ
'#93ca76', //藤色 ふじいろ
'#bbbcde', //白梅鼠 しらうめねず
'#fce2c4', //赤橙 あかだいだい
'#ea5506', //柳染 やなぎぞめ
'#93b881', //紅掛空色 べにかけそらいろ
'#8491c3', //白鼠 しろねず
'#fde8d0', //金赤 きんあか
'#ea5506', //薄萌葱 うすもえぎ
'#badcad', //紅碧 べにみどり
'#8491c3', //絹鼠 きぬねず
'#f9c89b', //朱色 しゅいろ
'#eb6101', //深川鼠 ふかがわねずみ
'#97a791', //紺桔梗 こんききょう
'#4d5aaf', //灰青 はいあお
'#f7bd8f', //小麦色 こむぎいろ
'#e49e61', //若緑 わかみどり
'#98d98e', //花色 はないろ
'#4d5aaf', //銀鼠 ぎんねず
'#f6b894', //丹色 にいろ
'#e45e32', //浅緑 あさみどり
'#88cb7f', //紺藍 こんあい
'#4a488e', //薄鈍 うすにび
'#f4dda5', //黄茶 きちゃ
'#e17b34', //薄緑 うすみどり
'#69b076', //紅桔梗 べにききょう
'#4d4398', //薄墨色 うすずみいろ
'#f1bf99', //肉桂色 にっけいいろ
'#dd7a56', //青鈍 あおにび
'#6b7b6e', //桔梗色 ききょういろ
'#5654a2', //錫色 すずいろ
'#f1bf99', //赤朽葉色 あかくちばいろ
'#db8449', //青磁鼠 せいじねず
'#bed2c3', //藤納戸 ふじなんど
'#706caa', //素鼠 すねずみ
'#efcd9a', //黄櫨染 こうろぜん
'#d66a35', //薄青 うすあお
'#93b69c', //紅掛花色 べにかけはないろ
'#68699b', //鼠色 ねずみいろ
'#efcd9a', //蒲公英色 たんぽぽいろ
'#ffd900', //錆青磁 さびせいじ
'#a6c8b2', //紫苑色 しおんいろ
'#867ba9', //源氏鼠 げんじねず
'#f0cfa0', //黄色 きいろ
'#ffd900', //緑青色 ろくしょういろ
'#47885e', //白藤色 しらふじいろ
'#dbd0e6', //灰色 はいいろ
'#edd3a1', //中黄 ちゅうき
'#ffea00', //千歳緑 ちとせみどり
'#316745', //藤紫 ふじむらさき
'#a59aca', //鉛色 なまりいろ
'#e0c38c', //菜の花色 なのはないろ
'#ffec47', //若竹色 わかたけいろ
'#68be8d', //菫色 すみれいろ
'#7058a3', //鈍色 にびいろ
'#f3bf88', //黄檗色 きはだいろ
'#fef263', //緑 みどり
'#3eb370', //青紫 あおむらさき
'#674598', //墨 すみ
'#f7b977', //卵色 たまごいろ
'#fcd575', //常磐色 ときわいろ
'#007b43', //菖蒲色 しょうぶいろ
'#674196', //丼鼠 どぶねずみ
'#f19072', //花葉色 はなばいろ
'#fbd26b', //千草鼠 ちぐさねず
'#bed3ca', //竜胆色 りんどういろ
'#9079ad', //消炭色 けしずみいろ
'#f19072', //刈安色 かりやすいろ
'#f5e56b', //千草色 ちぐさいろ
'#92b5a9', //江戸紫 えどむらさき
'#745399', //藍墨茶 あいすみちゃ
'#ee836f', //玉蜀黍色 とうもろこしいろ
'#eec362', //青磁色 せいじいろ
'#7ebea5', //本紫 ほんむらさき
'#65318e', //羊羹色 ようかんいろ
'#eb9b6f', //金糸雀色 かなりあいろ
'#ebd842', //青竹色 あおたけいろ
'#7ebeab', //葡萄色 ぶどういろ
'#522f60', //蝋色 ろういろ
'#e0815e', //黄支子色 きくちなしいろ
'#ffdb4f', //常磐緑 ときわみどり
'#028760', //深紫 ふかむらさき
'#493759', //黒 くろ
'#df7163', //支子色 くちなしいろ
'#fbca4d', //木賊色 とくさいろ
'#3b7960', //紫黒 しこく
'#2e2930', //烏羽色 からすばいろ
'#d57c6b', //向日葵色 ひまわりいろ
'#fcc800', //天鵞絨 びろうど
'#2f5d50', //紫 むらさき
'#884898', //鉄黒 てつぐろ
'#d0826c', //山吹色 やまぶきいろ
'#f8b500', //虫襖 むしあお
'#3a5b52', //薄葡萄 うすぶどう
'#c0a2c7', //濡羽色 ぬればいろ
'#ca8269', //鬱金色 うこんいろ
'#fabf14', //革色 かわいろ
'#475950', //紫紺 しこん
'#460e44', //黒檀 こくたん
'#bb5548', //藤黄 とうおう
'#f7c114', //深緑 ふかみどり
'#00552e', //暗紅色 あんこうしょく
'#74325c', //憲法黒茶 けんぽうくろちゃ
'#ab6953', //金色 こんじき
'#e6b422', //鉄色 てついろ
'#005243', //桑の実色 くわのみいろ
'#55295b', //暗黒色 あんこくしょく
    ];
    // vividColorArrayからランダムでインデックスを選ぶ
    let randomIndex = Math.floor(Math.random() * wa_color.length);

    // let replacementColorCode = '#FFff00'; // 置き換えるカラーコード (ここでは緑色 #00FF00 に設定)

     // 置き換えるカラーコード (ここでは緑色 #00FF00 に設定)

    function preload() {
      // 画像を読み込む
      img = loadImage('./35ff02.png');
    }

    function setup() {
      createCanvas(img.width, img.height);
      image(img, 0, 0);
      loadPixels();

      // 画像内の各ピクセルをチェックして特定のカラーコードを置き換える
      for (let i = 0; i < pixels.length; i += 4) {
        let r = pixels[i];
        let g = pixels[i + 1];
        let b = pixels[i + 2];
        let currentColorCode = rgbToHex(r, g, b);

        // ピクセルのカラーコードが特定のカラーコードと一致する場合、置き換える
        if (currentColorCode === targetColorCode) {
          color = wa_color[randomIndex];
          caption = moji + '_' + wa_color[randomIndex];
          let replacementRGB = hexToRgb(
          //  ランダムでvividColorArrayから色を選ぶ
          color
          );
          pixels[i] = replacementRGB.r;
          pixels[i + 1] = replacementRGB.g;
          pixels[i + 2] = replacementRGB.b;
        }
      }

      updatePixels();

      drawCircle(eye_0[0], eye_0[1]);
      drawCircle(eye_1[0], eye_1[1]);

      drawText(moji_x, moji_y);


      // 画像の背景を透過させる
       blendMode(DIFFERENCE);

    }

    // RGB値からカラーコードに変換する関数
    function rgbToHex(r, g, b) {
      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    // カラーコードからRGB値に変換する関数
    function hexToRgb(hex) {
      let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }

    // 指定したx,x座標に円を描画する関数
    function drawCircle(x, y) {
      noStroke();
//  白で塗りつぶす
      fill(255);
// 画像の真ん中。サイズは300px,300px
      ellipse(x, y, 300, 300);
}

    // 指定したx,x座標に文字列mojiを描画する関数
    function drawText(x, y) {
      noStroke();
//  白で塗りつぶす
      fill(0);
// 文字列を描画。文字サイズは50px
      textSize(mojiSize);
      // 文字列の中央揃えを指定
      textAlign(CENTER);
      // フォントはメイリオ
      textFont('Meiryo');
      // ボールド体にする
      textStyle(BOLD);
      text(moji, x, y);
}


  </script>


</body>

<style>
  /* ダウンロードボタンをcanvasより前に表示する */
  #download {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    /* 表示サイズを500 500で */
    width: 500px;
    height: 500px;
    /* 文字サイズを50px */
    font-size: 50px;
}
/* val_buttonを縦横500px */
.val_button {
    width: 500px;
    height: 500px;
    /* 文字サイズを50px */
    font-size: 50px;
}
</style>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
	</head>
	<body>
	<!-- これらの変数をinputタグで変更して。updateボタンを押すと更新される
	let moji = 'あいうえお';
	let mojiSize = 100;
	let moji_x = 1200;
	let moji_y = 800;
	let eye_0 = [800, 1000];
	let eye_1 = [1400, 1000];
	-->

	<input class="val_button" type="text" name="" id="moji" value="Taro" step="100">
	<input class="val_button" type="number" name="" id="mojiSize" value="100" step="100">
	<input class="val_button" type="number" name="" id="moji_x" value="1200" step="100">
	<input class="val_button" type="number" name="" id="moji_y" value="800" step="100">
	<input class="val_button" type="number" name="" id="eye_0_x" value="800" step="100">
	<input class="val_button" type="number" name="" id="eye_0_y" value="1000" step="100">
	<input class="val_button" type="number" name="" id="eye_1_x" value="1400" step="100">
	<input class="val_button" type="number" name="" id="eye_1_y" value="1000" step="100">
	<input class="val_button" type="button" value="update" onclick="update()">

	<input class="val_button" type="button" value="download" onclick="download_it()">
	<script>
	let targetColorCode = '#35ff02'; // 置き換えたいカラーコード (ここでは赤色 #FF0000 に設定)

	// https://viliusle.github.io/miniPaint/
	// めっちゃ便利。クリスタを本格的に使うまで。これ使う。てか画像の透過クリスタでできるっぽい

	// https://nlab.itmedia.co.jp/research/articles/1124494/5
	// mochikosan、活舌悪すぎ。次点のhau使う。himariは声質良いので、最後に使う。

	// YMM4 台本ファイル(.txtで保存)
	// Taro_#954e2a_zunda「我々は自動生成された存在だ」
	// ふつースライム_#b79b5b_tumugi「そうなん？」
	// モブ男_#4d5aaf_metan「何言ってんだ？」
	// やばやばスライム_#2c4f54_hau「バブってウンコ漏らしてオムツ変えてほしい」
	// kami_himari「神です。あなた達は1秒後消滅します」

	// https://express.adobe.com/ja-JP/tools/remove-background

	let moji = 'Taro';
	let mojiSize = 100;
	let moji_x = 1200;
	let moji_y = 800;
	let eye_0 = [800, 1000];
	let eye_1 = [1400, 1000];

	function update() {
	moji = document.getElementById("moji").value;
	mojiSize = document.getElementById("mojiSize").value;
	moji_x = document.getElementById("moji_x").value;
	moji_y = document.getElementById("moji_y").value;
	eye_0 = [document.getElementById("eye_0_x").value, document.getElementById("eye_0_y").value];
	eye_1 = [document.getElementById("eye_1_x").value, document.getElementById("eye_1_y").value];
	setup();
	}

	function download_it() {
	saveCanvas(caption, 'png');
	}

	let img;


	// vivid color array
	let vividColorArray = [
	'#FF0000', // 赤
	'#FFA500', // オレンジ
	'#FFFF00', // 黄
	'#00FF00', // 緑
	'#00FFFF', // 水色
	'#0000FF', // 青
	'#800080', // 紫
	];

	let wa_color = [
	'#fef4f4', //小豆色あずきいろ
	'#96514d', //黄金こがね
	'#e6b422', //萌葱色もえぎいろ
	'#006e54', //古代紫こだいむらさき
	'#fdeff2', //枯茶からちゃ
	'#8d6449', //櫨染はじぞめ
	'#d9a62e', //花緑青はなろくしょう
	'#00a381', //茄子紺なすこん
	'#e9dfe5', //飴色あめいろ
	'#deb068', //黄朽葉色きくちばいろ
	'#d3a243', //翡翠色ひすいいろ
	'#38b48b', //二藍ふたあい
	'#e4d2d8', //駱駝色らくだいろ
	'#bf794e', //山吹茶やまぶきちゃ
	'#c89932', //青緑あおみどり
	'#00a497', //京紫きょうむらさき
	'#f6bfbc', //土色つちいろ
	'#bc763c', //芥子色からしいろ
	'#d0af4c', //水浅葱みずあさぎ
	'#80aba9', //蒲葡えびぞめ
	'#f5b1aa', //黄唐茶きがらちゃ
	'#b98c46', //豆がら茶まめがらちゃ
	'#8b968d', //錆浅葱さびあさぎ
	'#5c9291', //若紫わかむらさき
	'#f5b199', //桑染くわぞめ
	'#b79b5b', //麹塵きくじん
	'#6e7955', //青碧せいへき
	'#478384', //紅紫べにむらさき
	'#efab93', //櫨色はじいろ
	'#b77b57', //山鳩色やまばといろ
	'#767c6b', //御召茶おめしちゃ
	'#43676b', //梅紫うめむらさき
	'#f2a0a1', //黄橡きつるばみ
	'#b68d4c', //利休鼠りきゅうねずみ
	'#888e7e', //湊鼠みなとねずみ
	'#80989b', //菖蒲色あやめいろ
	'#f0908d', //丁字染ちょうじぞめ
	'#ad7d4c', //海松茶みるちゃ
	'#5a544b', //高麗納戸こうらいなんど
	'#2c4f54', //紅藤色べにふじいろ
	'#ee827c', //香染こうぞめ
	'#ad7d4c', //藍海松茶あいみるちゃ
	'#56564b', //百入茶ももしおちゃ
	'#1f3134', //浅紫あさむらさき
	'#f09199', //枇杷茶びわちゃ
	'#ae7c4f', //藍媚茶あいこびちゃ
	'#555647', //錆鼠さびねず
	'#47585c', //紫水晶むらさきすいしょう
	'#f4b3c2', //芝翫茶しかんちゃ
	'#ad7e4e', //千歳茶せんさいちゃ
	'#494a41', //錆鉄御納戸さびてつおなんど
	'#485859', //薄梅鼠うすうめねず
	'#eebbcb', //焦香こがれこう
	'#ae7c58', //岩井茶いわいちゃ
	'#6b6f59', //藍鼠あいねず
	'#6c848d', //暁鼠あかつきねず
	'#e8d3c7', //胡桃色くるみいろ
	'#a86f4c', //仙斎茶せんさいちゃ
	'#474b42', //錆御納戸さびおなんど
	'#53727d', //牡丹鼠ぼたんねず
	'#e8d3d1', //渋紙色しぶかみいろ
	'#946243', //黒緑くろみどり
	'#333631', //舛花色ますはないろ
	'#5b7e91', //霞色かすみいろ
	'#e6cde3', //朽葉色くちばいろ
	'#917347', //柳煤竹やなぎすすたけ
	'#5b6356', //熨斗目花色のしめはないろ
	'#426579', //藤鼠ふじねず
	'#e5abbe', //桑茶くわちゃ
	'#956f29', //樺茶色かばちゃいろ
	'#726250', //御召御納戸おめしおなんど
	'#4c6473', //半色はしたいろ
	'#e597b2', //路考茶ろこうちゃ
	'#8c7042', //空五倍子色うつぶしいろ
	'#9d896c', //鉄御納戸てつおなんど
	'#455765', //薄色うすいろ
	'#e198b4', //国防色こくぼうしょく
	'#7b6c3e', //生壁色なまかべいろ
	'#94846a', //紺鼠こんねず
	'#44617b', //薄鼠うすねず
	'#e4ab9b', //伽羅色きゃらいろ
	'#d8a373', //肥後煤竹ひごすすたけ
	'#897858', //藍鉄あいてつ
	'#393f4c', //鳩羽鼠はとばねずみ
	'#e09e87', //江戸茶えどちゃ
	'#cd8c5c', //媚茶こびちゃ
	'#716246', //青褐あおかち
	'#393e4f', //鳩羽色はとばいろ
	'#d69090', //樺色かばいろ
	'#cd5e3c', //白橡しろつるばみ
	'#cbb994', //褐返かちかえし
	'#203744', //桔梗鼠ききょうねず
	'#d4acad', //紅鬱金べにうこん
	'#cb8347', //亜麻色あまいろ
	'#d6c6af', //褐色かちいろ
	'#4d4c61', //紫鼠むらさきねず
	'#c97586', //土器色かわらけいろ
	'#c37854', //榛色はしばみいろ
	'#bfa46f', //月白げっぱく
	'#eaf4fc', //葡萄鼠ぶどうねずみ
	'#c099a0', //狐色きつねいろ
	'#c38743', //灰汁色あくいろ
	'#9e9478', //白菫色しろすみれいろ
	'#eaedf7', //濃色こきいろ
	'#b88884', //黄土色おうどいろ
	'#c39143', //利休茶りきゅうちゃ
	'#a59564', //白花色しらはないろ
	'#e8ecef', //紫鳶むらさきとび
	'#b48a76', //琥珀色こはくいろ
	'#bf783a', //鶯茶うぐいすちゃ
	'#715c1f', //藍白あいじろ
	'#ebf6f7', //濃鼠こいねず
	'#a86965', //赤茶あかちゃ
	'#bb5535', //木蘭色もくらんじき
	'#c7b370', //白藍しらあい
	'#c1e4e9', //藤煤竹ふじすすたけ
	'#a25768', //代赭たいしゃ
	'#bb5520', //砂色すないろ
	'#dcd3b2', //水色みずいろ
	'#bce2e8', //滅紫けしむらさき
	'#ec6d71', //煉瓦色れんがいろ
	'#b55233', //油色あぶらいろ
	'#a19361', //瓶覗かめのぞき
	'#a2d7dd', //紅消鼠べにけしねずみ
	'#eb6ea5', //雀茶すずめちゃ
	'#aa4f37', //利休色りきゅういろ
	'#8f8667', //秘色色ひそくいろ
	'#abced8', //似せ紫にせむらさき
	'#e95295', //団十郎茶だんじゅうろうちゃ
	'#9f563a', //梅幸茶ばいこうちゃ
	'#887938', //空色そらいろ
	'#a0d8ef', //灰黄緑はいきみどり
	'#e7609e', //柿渋色かきしぶいろ
	'#9f563a', //璃寛茶りかんちゃ
	'#6a5d21', //勿忘草色わすれなぐさいろ
	'#89c3eb', //蕎麦切色そばきりいろ
	'#d0576b', //紅鳶べにとび
	'#9a493f', //黄海松茶きみるちゃ
	'#918754', //青藤色あおふじいろ
	'#84a2d4', //薄雲鼠うすくもねず
	'#c85179', //灰茶はいちゃ
	'#98623c', //菜種油色なたねゆいろ
	'#a69425', //白群びゃくぐん
	'#83ccd2', //枯野色かれのいろ
	'#e9546b', //茶色ちゃいろ
	'#965042', //青朽葉あおくちば
	'#ada250', //浅縹あさはなだ
	'#84b9cb', //潤色うるみいろ
	'#e95464', //檜皮色ひわだいろ
	'#965036', //根岸色ねぎしいろ
	'#938b4b', //薄花色うすはないろ
	'#698aab', //利休白茶りきゅうしろちゃ
	'#c85554', //鳶色とびいろ
	'#95483f', //鶸茶ひわちゃ
	'#8c8861', //納戸色なんどいろ
	'#008899', //茶鼠ちゃねずみ
	'#c53d43', //柿茶かきちゃ
	'#954e2a', //柳茶やなぎちゃ
	'#a1a46d', //浅葱色あさぎいろ
	'#00a3af', //胡桃染くるみぞめ
	'#e83929', //弁柄色べんがらいろ
	'#8f2e14', //海松色みるいろ
	'#726d40', //花浅葱はなあさぎ
	'#2a83a2', //江戸鼠えどねず
	'#e60033', //赤錆色あかさびいろ
	'#8a3319', //鶯色うぐいすいろ
	'#928c36', //新橋色しんばしいろ
	'#59b9c6', //煤色すすいろ
	'#e2041b', //褐色かっしょく
	'#8a3b00', //緑黄色りょくおうしょく
	'#dccb18', //天色あまいろ
	'#2ca9e1', //丁子茶ちょうじちゃ
	'#d7003a', //栗梅くりうめ
	'#852e19', //鶸色ひわいろ
	'#d7cf3a', //露草色つゆくさいろ
	'#38a1db', //柴染ふしぞめ
	'#c9171e', //紅檜皮べにひはだ
	'#7b4741', //抹茶色まっちゃいろ
	'#c5c56a', //青あお
	'#0095d9', //宗伝唐茶そうでんからちゃ
	'#d3381c', //海老茶えびちゃ
	'#773c30', //若草色わかくさいろ
	'#c3d825', //薄藍うすあい
	'#0094c8', //砺茶とのちゃ
	'#ce5242', //唐茶からちゃ
	'#783c1d', //黄緑きみどり
	'#b8d200', //縹色はなだいろ
	'#2792c3', //煎茶色せんちゃいろ
	'#d9333f', //栗色くりいろ
	'#762f07', //若芽色わかめいろ
	'#e0ebaf', //紺碧こんぺき
	'#007bbb', //銀煤竹ぎんすすだけ
	'#b94047', //赤銅色しゃくどういろ
	'#752100', //若菜色わかないろ
	'#d8e698', //薄群青うすぐんじょう
	'#5383c3', //黄枯茶きがらちゃ
	'#ba2636', //錆色さびいろ
	'#6c3524', //若苗色わかなえいろ
	'#c7dc68', //薄花桜うすはなざくら
	'#5a79ba', //煤竹色すすたけいろ
	'#b7282e', //赤褐色せっかっしょく
	'#683f36', //青丹あおに
	'#99ab4e', //群青色ぐんじょういろ
	'#4c6cb3', //焦茶こげちゃ
	'#a73836', //茶褐色ちゃかっしょく
	'#664032', //草色くさいろ
	'#7b8d42', //杜若色かきつばたいろ
	'#3e62ad', //黒橡くろつるばみ
	'#9e3d3f', //栗皮茶くりかわちゃ
	'#6d3c32', //苔色こけいろ
	'#69821b', //瑠璃色るりいろ
	'#1e50a2', //憲法色けんぽういろ
	'#a22041', //黒茶くろちゃ
	'#583822', //萌黄もえぎ
	'#aacf53', //薄縹うすはなだ
	'#507ea4', //涅色くりいろ
	'#a22041', //葡萄茶えびちゃ
	'#6c2c2f', //苗色なえいろ
	'#b0ca71', //瑠璃紺るりこん
	'#19448e', //檳榔子染びんろうじぞめ
	'#f8f4e6', //葡萄色えびいろ
	'#640125', //若葉色わかばいろ
	'#b9d08b', //紺瑠璃こんるり
	'#164a84', //黒鳶くろとび
	'#ede4cd', //萱草色かんぞういろ
	'#f8b862', //松葉色まつばいろ
	'#839b5c', //藍色あいいろ
	'#165e83', //赤墨あかすみ
	'#e9e4d4', //柑子色こうじいろ
	'#f6ad49', //夏虫色なつむしいろ
	'#cee4ae', //青藍せいらん
	'#274a78', //黒紅くろべに
	'#ebe1a9', //金茶きんちゃ
	'#f39800', //鶸萌黄ひわもえぎ
	'#82ae46', //深縹こきはなだ
	'#2a4073', //白しろ
	'#f2f2b0', //蜜柑色みかんいろ
	'#f08300', //柳色やなぎいろ
	'#a8c97f', //紺色こんいろ
	'#223a70', //胡粉色ごふんいろ
	'#e4dc8a', //鉛丹色えんたんいろ
	'#ec6d51', //青白橡あおしろつるばみ
	'#9ba88d', //紺青こんじょう
	'#192f60', //卯の花色うのはないろ
	'#f8e58c', //黄丹おうに
	'#ee7948', //柳鼠やなぎねず
	'#c8d5bb', //留紺とめこん
	'#1c305c', //白磁はくじ
	'#ddbb99', //柿色かきいろ
	'#ed6d3d', //裏葉柳うらはやなぎ
	'#c1d8ac', //濃藍こいあい
	'#0f2350', //生成り色きなりいろ
	'#d7a98c', //黄赤きあか
	'#ec6800', //山葵色わさびいろ
	'#a8bf93', //鉄紺てつこん
	'#17184b', //乳白色にゅうはくしょく
	'#f2c9ac', //人参色にんじんいろ
	'#ec6800', //老竹色おいたけいろ
	'#769164', //漆黒しっこく
	'#0d0015', //白練しろねり
	'#fff1cf', //橙色だいだいいろ
	'#ee7800', //白緑びゃくろく
	'#d6e9ca', //淡藤色あわふじいろ
	'#bbc8e6', //素色そしょく
	'#fddea5', //照柿てりがき
	'#eb6238', //淡萌黄うすもえぎ
	'#93ca76', //藤色ふじいろ
	'#bbbcde', //白梅鼠しらうめねず
	'#fce2c4', //赤橙あかだいだい
	'#ea5506', //柳染やなぎぞめ
	'#93b881', //紅掛空色べにかけそらいろ
	'#8491c3', //白鼠しろねず
	'#fde8d0', //金赤きんあか
	'#ea5506', //薄萌葱うすもえぎ
	'#badcad', //紅碧べにみどり
	'#8491c3', //絹鼠きぬねず
	'#f9c89b', //朱色しゅいろ
	'#eb6101', //深川鼠ふかがわねずみ
	'#97a791', //紺桔梗こんききょう
	'#4d5aaf', //灰青はいあお
	'#f7bd8f', //小麦色こむぎいろ
	'#e49e61', //若緑わかみどり
	'#98d98e', //花色はないろ
	'#4d5aaf', //銀鼠ぎんねず
	'#f6b894', //丹色にいろ
	'#e45e32', //浅緑あさみどり
	'#88cb7f', //紺藍こんあい
	'#4a488e', //薄鈍うすにび
	'#f4dda5', //黄茶きちゃ
	'#e17b34', //薄緑うすみどり
	'#69b076', //紅桔梗べにききょう
	'#4d4398', //薄墨色うすずみいろ
	'#f1bf99', //肉桂色にっけいいろ
	'#dd7a56', //青鈍あおにび
	'#6b7b6e', //桔梗色ききょういろ
	'#5654a2', //錫色すずいろ
	'#f1bf99', //赤朽葉色あかくちばいろ
	'#db8449', //青磁鼠せいじねず
	'#bed2c3', //藤納戸ふじなんど
	'#706caa', //素鼠すねずみ
	'#efcd9a', //黄櫨染こうろぜん
	'#d66a35', //薄青うすあお
	'#93b69c', //紅掛花色べにかけはないろ
	'#68699b', //鼠色ねずみいろ
	'#efcd9a', //蒲公英色たんぽぽいろ
	'#ffd900', //錆青磁さびせいじ
	'#a6c8b2', //紫苑色しおんいろ
	'#867ba9', //源氏鼠げんじねず
	'#f0cfa0', //黄色きいろ
	'#ffd900', //緑青色ろくしょういろ
	'#47885e', //白藤色しらふじいろ
	'#dbd0e6', //灰色はいいろ
	'#edd3a1', //中黄ちゅうき
	'#ffea00', //千歳緑ちとせみどり
	'#316745', //藤紫ふじむらさき
	'#a59aca', //鉛色なまりいろ
	'#e0c38c', //菜の花色なのはないろ
	'#ffec47', //若竹色わかたけいろ
	'#68be8d', //菫色すみれいろ
	'#7058a3', //鈍色にびいろ
	'#f3bf88', //黄檗色きはだいろ
	'#fef263', //緑みどり
	'#3eb370', //青紫あおむらさき
	'#674598', //墨すみ
	'#f7b977', //卵色たまごいろ
	'#fcd575', //常磐色ときわいろ
	'#007b43', //菖蒲色しょうぶいろ
	'#674196', //丼鼠どぶねずみ
	'#f19072', //花葉色はなばいろ
	'#fbd26b', //千草鼠ちぐさねず
	'#bed3ca', //竜胆色りんどういろ
	'#9079ad', //消炭色けしずみいろ
	'#f19072', //刈安色かりやすいろ
	'#f5e56b', //千草色ちぐさいろ
	'#92b5a9', //江戸紫えどむらさき
	'#745399', //藍墨茶あいすみちゃ
	'#ee836f', //玉蜀黍色とうもろこしいろ
	'#eec362', //青磁色せいじいろ
	'#7ebea5', //本紫ほんむらさき
	'#65318e', //羊羹色ようかんいろ
	'#eb9b6f', //金糸雀色かなりあいろ
	'#ebd842', //青竹色あおたけいろ
	'#7ebeab', //葡萄色ぶどういろ
	'#522f60', //蝋色ろういろ
	'#e0815e', //黄支子色きくちなしいろ
	'#ffdb4f', //常磐緑ときわみどり
	'#028760', //深紫ふかむらさき
	'#493759', //黒くろ
	'#df7163', //支子色くちなしいろ
	'#fbca4d', //木賊色とくさいろ
	'#3b7960', //紫黒しこく
	'#2e2930', //烏羽色からすばいろ
	'#d57c6b', //向日葵色ひまわりいろ
	'#fcc800', //天鵞絨びろうど
	'#2f5d50', //紫むらさき
	'#884898', //鉄黒てつぐろ
	'#d0826c', //山吹色やまぶきいろ
	'#f8b500', //虫襖むしあお
	'#3a5b52', //薄葡萄うすぶどう
	'#c0a2c7', //濡羽色ぬればいろ
	'#ca8269', //鬱金色うこんいろ
	'#fabf14', //革色かわいろ
	'#475950', //紫紺しこん
	'#460e44', //黒檀こくたん
	'#bb5548', //藤黄とうおう
	'#f7c114', //深緑ふかみどり
	'#00552e', //暗紅色あんこうしょく
	'#74325c', //憲法黒茶けんぽうくろちゃ
	'#ab6953', //金色こんじき
	'#e6b422', //鉄色てついろ
	'#005243', //桑の実色くわのみいろ
	'#55295b', //暗黒色あんこくしょく
	];
	// vividColorArrayからランダムでインデックスを選ぶ
	let randomIndex = Math.floor(Math.random() * wa_color.length);

	// let replacementColorCode = '#FFff00'; // 置き換えるカラーコード (ここでは緑色 #00FF00 に設定)

	// 置き換えるカラーコード (ここでは緑色 #00FF00 に設定)

	function preload() {
	// 画像を読み込む
	img = loadImage('./35ff02.png');
	}

	function setup() {
	createCanvas(img.width, img.height);
	image(img, 0, 0);
	loadPixels();

	// 画像内の各ピクセルをチェックして特定のカラーコードを置き換える
	for (let i = 0; i < pixels.length; i += 4) {
	let r = pixels[i];
	let g = pixels[i + 1];
	let b = pixels[i + 2];
	let currentColorCode = rgbToHex(r, g, b);

	// ピクセルのカラーコードが特定のカラーコードと一致する場合、置き換える
	if (currentColorCode === targetColorCode) {
	color = wa_color[randomIndex];
	caption = moji + '_' + wa_color[randomIndex];
	let replacementRGB = hexToRgb(
	// ランダムでvividColorArrayから色を選ぶ
	color
	);
	pixels[i] = replacementRGB.r;
	pixels[i + 1] = replacementRGB.g;
	pixels[i + 2] = replacementRGB.b;
	}
	}

	updatePixels();

	drawCircle(eye_0[0], eye_0[1]);
	drawCircle(eye_1[0], eye_1[1]);

	drawText(moji_x, moji_y);


	// 画像の背景を透過させる
	blendMode(DIFFERENCE);

	}

	// RGB値からカラーコードに変換する関数
	function rgbToHex(r, g, b) {
	return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
	}

	// カラーコードからRGB値に変換する関数
	function hexToRgb(hex) {
	let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? {
	r: parseInt(result[1], 16),
	g: parseInt(result[2], 16),
	b: parseInt(result[3], 16)
	} : null;
	}

	// 指定したx,x座標に円を描画する関数
	function drawCircle(x, y) {
	noStroke();
	// 白で塗りつぶす
	fill(255);
	// 画像の真ん中。サイズは300px,300px
	ellipse(x, y, 300, 300);
	}

	// 指定したx,x座標に文字列mojiを描画する関数
	function drawText(x, y) {
	noStroke();
	// 白で塗りつぶす
	fill(0);
	// 文字列を描画。文字サイズは50px
	textSize(mojiSize);
	// 文字列の中央揃えを指定
	textAlign(CENTER);
	// フォントはメイリオ
	textFont('Meiryo');
	// ボールド体にする
	textStyle(BOLD);
	text(moji, x, y);
	}


	</script>


	</body>

	<style>
	/* ダウンロードボタンをcanvasより前に表示する */
	#download {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	/* 表示サイズを500 500で */
	width: 500px;
	height: 500px;
	/* 文字サイズを50px */
	font-size: 50px;
	}
	/* val_buttonを縦横500px */
	.val_button {
	width: 500px;
	height: 500px;
	/* 文字サイズを50px */
	font-size: 50px;
	}
	</style>
	</html>