文字と色を指定するだけ！ファビコンジェネレーター

はい、こんにちは！僕です。
最近faviconを作る機会が多かったのですが、大抵は文字を１文字＋背景透過で作ることが多くて、どうせならと思って簡単なスクリプトを書いてみました。
Google Chromeで動作を確認しています。Safariではちゃんと動作しない事を確認していますが、最初の背景色と文字色を入力する欄に、カラーコードを直接入れていただければ動かないこともないです。

どうぞ、Favicon Generatorお使いください

背景色を選択してください

文字色を選択してください

透明度を選択してください

使用したい文字を一文字だけ入力してください

左右の位置を微調整してください

上下の位置を微調整してください

↑アイコンをクリックするとダウンロード出来ます。
32px * 32pxです。

ところでfaviconって？

faviconというのは、ブラウザのタブの左上にあるアイコンのこと。
ブックマークされたりすると、このアイコンがブックマークの頭に入りますよね。
Drip'n'Snipでは、DSという感じのアイコンをfaviconにしています。

このファビコンジェネレーター、どうやって作ってる？

さて、ようやく本題です。
実はこの記事はp5.jsの記事だったのです！

p5.jsってナニ？という方はこちらをどうぞ！
p5.jsでwebページにアニメーションを作ろう - 01

このファビコンジェネレーターはp5.jsで作られています。
内容はこんな感じ。

function setup() {
    var canvas = createCanvas(32, 32,P2D);
    canvas.parent("p5Canvas");
    smooth();
}
function draw() {
    clear();
    var bgcol = color(document.getElementById("bgcol").value);
    var wordcol = document.getElementById("wordcol").value;
    var alpha = int(document.getElementById("alpha").value);
    var name = document.getElementById("name").value;
    var ypos = int(document.getElementById("ypos").value);
    var xpos = int(document.getElementById("xpos").value);

    fill(red(bgcol),green(bgcol),blue(bgcol),alpha);
    noStroke();
    rect(0,0,width,height);

    fill(wordcol);
    noStroke();
    textFont("游ゴシック",29);

    textAlign(CENTER);
    text(name,width/2 + xpos,height - 3 - ypos);
}

function mousePressed(){
    if(mouseX < width & mouseX > 0 & mouseY > 0 & mouseY < height) {
        saveCanvas("favicon", "png");
    }
}

まず最初のclear()で一旦Canvas上の全ての内容を一度消し去ります。結果、Canvasは透過された何かになります。
次に、HTML上に配置された要素の中に入力された値を document.getElementById("")によって取得します。
取得された要素の中からvalueの値をさらに取り出し、必要なものはそれをint型の値にキャストしています。
何故キャストするかというと、input要素を通じて入ってくる要素は全てString型で、そのままでは計算に使えないからです。

最後に取得した値を使って背景を塗り、文字の色を決め、文字を配置しています。

まとめ

このページをブックマークに入れて、簡単なファビコンが必要なときにお使いください。

p5.jsでもそこそこ実用的なものが作れるんだぞ！というところをお見せしたかったので書きました。
以上です！

                           

  関連記事