書き初めwebアプリ 『 It's 書time! 』
こちらのリンク先にあるアプリで、新年の抱負を思い思いに書いてみてください！
↓↓↓↓↓↓↓↓
『 It's 書time! 』
↑↑↑↑↑↑↑↑
書き初めを自分でも実装してみたい方は以下の記事を見てください。
※本当は保存して投稿できる機能をつけたかったのですが、時間と実力の都合上無理でした....
はじめに
突然ですが、日々パソコンを使って文字を書いている皆さんは最後に書き初めをしたのはいつでしょうか？
もともと筆で字を書くことが好きな僕は久々に書き初めをやってみたい！（クリスマスよりもお正月）と思って、今回は書き初めをProcessing.jsというjsでHTMLに実装してみました。
目標
リアルな筆字をできるだけ理解しやすく、コード記述量を少なくしたwebアプリケーションを実装したい。
実装
環境
- macOS Mojave
- HTML5
- css3
- Processing.min.js v1.4.8
そもそもProcessing.jsとは
Processing.jsは画像、各種データ可視化、動的コンテンツなど描画用に設計されたプログラミング言語であるProcessingのJavaScript移植版である。 Adobe FlashやJavaアプレットを用いることなくウェブブラウザ上で動画、ゲームなどが実装できる。(参照：Processing.js - Wikipedia)
綺麗な動的なデザインをやってみたいとかプログラミング初学者にオススメな言語「Processing」の派生みたいです。
(https://www.youtube.com/watch?v=zwWZox1PKw8)
こんなアニメーションができます！
HTML
それではこれからコードを書いていきます。
まずはじめにHTML要素で書き初めに必要な「下敷き」「半紙」を追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sho-time</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="sho-time.css">
</head>
<body>
<div class="shitajiki">
<div class="title">
<h1>It's <ruby>書<rt>show</rt></ruby> time!</h1>
</div>
<div class="hanshi">
</div>
</div>
</body>
</html>
css
先程のHTML要素に対してcssで装飾します。
/*リセットcss*/
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
h1 {
font-size: 40px;
}
rt {
font-size: 20px;
}
.title{
padding: 100px 0 10px;
}
.shitajiki{
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
height: 800px;
text-align: center;
}
.hanshi {
width: fit-content;
margin: 0 auto;
border: 10px solid black;
}
Processing.jsの導入
ここで、Processing.jsをHTMLに導入をします。
まず 公式サイトからprocessing.min.jsをダウンロード します。（「processing.js」と「processing.min.js」がありますが、容量の軽い後者で今回は進めます。）
ダウンロードしたら今回使うファイルを「sho-time」というフォルダにまとめます。フォルダ構成は以下のとおりです。
| sho-time | |
|---|---|
| 1 | sho-time.html |
| 2 | sho-time.css |
| 3 | Processing.min.js |
Processing.min.jsは、Processingをjsの記述でも扱えるようにしたものです。
また、今回はProcessingを直接書くことで、jsより（個人的な感覚として）シンプルなコードにします！
ファイルを移し替えたら「sho-time.html」ファイルにProcessingのコードを書いていきます。
.
.
<link rel="stylesheet" type="text/css" href="sho-time.css">
<script src="processing.min.js"></script> ←ここも追加
</head>
.
.
<div class="hanshi">
<script type="application/processing">
//=====「各変数の定義」=====
float lineWeight = 0.6;
int i;
int count = 1;
String picture;
int R = 20; //しずくの大きさ調整用
int A = 3; //しずくの丸み調整用
//=====「初期設定」=====
void setup(){
smooth();
frameRate(60);
size(1170, 390);
background(250);
stroke( 54, 54, 54 );
fill(54, 54, 54);
}
//=====「毎回処理される箇所」=====
void draw() {
if (mousePressed) {
strokeWeight( lineWeight );
mouseDragged();
}
}
//=====「始筆」=====
void mousePressed() {
strokeWeight(2);
pushMatrix();
translate(mouseX, mouseY + 3);
rotate(radians(-150));
beginShape();
for (int theta = 10; theta < 361; theta++) {
float r = 1 / (A * sin(radians(theta)/2)+1);
vertex(R * r * cos(radians(theta)), R * r * sin(radians(theta)));
}
endShape(CLOSE);
popMatrix();
redraw();
}
//=====「運筆」=====
void mouseDragged() {
for (int i = 0; i < 10; i++) {
float x = random(i);
float y = sqrt(( sq(i) - sq(x) ));
line(pmouseX - x, pmouseY + y, mouseX, mouseY); //右下&左上
line(pmouseX - x, pmouseY - y, mouseX, mouseY); //右上&左下
line(pmouseX + x, pmouseY + y, mouseX + x, mouseY + y); //右下
line(pmouseX - x, pmouseY - y, mouseX - x, mouseY - y); //左上
line(pmouseX + x, pmouseY - y, mouseX + x, mouseY - y); //右上
line(pmouseX - x, pmouseY + y, mouseX - x, mouseY + y); //左下
line(pmouseX, pmouseY , mouseX, mouseY);
line(pmouseX, pmouseY + y, mouseX, mouseY);
}
}
//=====「筆先を整える」=====
void mouseReleased() {
lineWeight = 0.6;
}
//=====「キー操作」=====
void keyPressed() { //"スペース"を押したら「リセット」
if(key == ' ') {
background(255);
}
if(key == 'r') { //"r"を押したら墨が「朱色」になる
stroke( 235, 97, 1 );
fill( 235, 97, 1 );
}
if(key == 'b') { //"b"を押したら「墨色」になる
stroke( 54, 54, 54 );
fill(54, 54, 54);
}
}
</script>
<canvas id="canvas"></canvas>
</div>
.
.
.
ここで、jsは別のファイルに書いてコードをまとめたほうがスマートじゃん、と思った方。そのとおりです！
ですが、今回は時間の都合上HTMLファイルに直接書かせていただきます。
以上で書き初めアプリをHTMLに実装することができました！
今回はいかにリアルな筆字を再現するかに時間を費やしてしまって、webアプリケーションの実装まで解説することがありませんでしたが、ぜひ今後もProcessingで遊んでみてください！
最後までお付き合いいただきありがとうございました。