JavaScript で渦巻きを描く

渦巻きの作り方

CSS に依存している部分もあるのですが、すべて JavaScipt で処理してしまっています。uzumaki 関数として定義してみました。

JavaScript

function uzumaki(element, rotation, width, diameter, direction, color) {

    //初期値
    element = element ? element : document.body;
    rotation = rotation ? rotation : 5;
    width = width ? width : 5;
    diameter = diameter ? diameter : 1;
    direction = direction ? direction : 1;
    color = color ? color : "#333";

    //渦を入れる要素を position: relative に
    element.style.position = "relative";

    //渦巻きを作る div にスタイルをあてる
    var elm = document.createElement("div");
    elm.style.width = width + "px";
    elm.style.height = width + "px";
    elm.style.backgroundColor = color;
    elm.style.position = "absolute";
    elm.style.borderRadius = "50%";

    //度数とラジアンの変換処理定数
    var p = 2 * Math.PI / 360;

    //渦の回転数分 for で繰り返し処理
    for (var i = 0; i < rotation * 360; i++) {
        var elmClone = elm.cloneNode();
        elmClone.style.top = "calc(50% + " + direction * diameter * i / 10 * Math.sin(i * p) + "px)";
        elmClone.style.left = "calc(50% + " + diameter * i / 10 * Math.cos(i * p) + "px)";
        element.appendChild(elmClone);
    };
};

div の座標の設定に calc を使って面倒な計算を省いているところがポイントかもしれないです。極座標みたいなイメージで座標を決めています。

デモ

しっかり渦巻きに見えます。

uzumaki 関数の使い方

引数を指定してあげれば好きな場所に好きな感じの渦巻きを設置することが出来ます。

uzumaki(element, rotation, width, diameter, direction, color)

のそれぞれの引数の役割について説明します。

element

element は渦巻きを中に表示させたい要素を指定します。例えば id が box の要素の中に入れてあげたいなら、

uzumaki(document.getElementById("box"))

としてあげれば OK です。設定しない場合の初期値を一応 body に設定しているので、引数を何も書かなくても渦巻きを生成はします。

渦を入れる要素の width、height はあらかじめ CSS で指定してあげてください。

rotation

rotation は回転数を指定します。4回転させたのであれば「4」と数値で指定します。小数や分数で「3.2」や「10/3」などの指定も可能です。ピッタリ何周でなくても大丈夫という事になります。

何も指定しない場合の初期値は5で、5周します。

width

width は渦巻きの線の幅を指定します。10px と指定したい場合は数値のみ「10」と指定します。単位はいりません。

初期値は5で、5px の線で渦巻きを書きます。

diameter

diameter は倍率です。ある程度普通に見えるように渦巻きの密度を調整してますので、もっと密集した渦巻きにしたいなら1より小さく「0.8」などを指定、緩い渦巻きにしたいなら「1.5」など指定します。数値で指定します。

初期値は1です。

direction

渦巻きの方向を指定します。初期値は右巻きになっていいます。左巻きにしたい場合は「-1」と指定します。初期値は右巻きで１です。

color

渦巻きの色を指定します。色は文字列扱いになるので「"#333"」などダブルコーテーションで囲って指定するようにしてください。初期値は「"#333"」です。

全ての引数を指定したサンプルが下のデモになります。

デモ

uzumaki(document.getElementById("box"), 32/3, 12, 0.5, -1, "#0ff")

まとめ

canvas 要素での渦巻き作成関数はたくさんありそうでしたので、あえて div で作ってみました。ただ渦巻きが5周するだけで1800個 div 要素を作成するシステムなので重たいです。

何に使うのかわかりませんが、ジェネレーターが楽しいので、遊んでみてください。