forked: マンデルブロ集合をjqueryで(canvas未使用)

README

黒歴史の一環
http://jsdo.it/jag/mCgR/

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #aaa;
  font: 15px sans-serif;
}

div {
    display: inline-block;
    _display: inline;
}

jsdoit.html

    繰り返し回数<input type="text" id="ite_max" value="3"/><br>
    解像度<input type="text" id="i_max" value="20"/>x<input type="text" id="j_max" value="20"/><br>

scale<input type="text" id="scale" value="0.1"/><br>
<div id="finer">[ + ]</div> <div id="coarser">[ - ]</div><br>

    中心座標(<input class="ord" type="text" id="s_x" value="0"/>,<input class="ord" type="text" id="s_y" value="0"/>)<br>
<div id="status"></div>
<br>
<div id='box' class='box'></div>

jsdoit.js

// forked from jag's "マンデルブロ集合をjqueryで(canvas未使用)" http://jsdo.it/jag/hDWI
/* 入力窓サイズ */
$("input").attr("size","1");
$("input.ord").attr("size","4");

/* 描画 */
var drawM = function(){

$("#box").html("");
$("#status").html("calculating");
var my_offset = $("#box").offset();
var ite_max = parseInt($("#ite_max").val());
var scale = parseFloat($("#scale").val());
var i_max = parseInt($("#i_max").val());
var j_max = parseInt($("#j_max").val());
var p_h = parseInt(150/i_max);
var p_w = parseInt(150/j_max);
var s_x = parseFloat($("#s_x").val());
var s_y = parseFloat($("#s_y").val());

/* 各ピクセル */
setPx = function(x,y,p_i,p_j) {    
    var tmpX = 0.0; 
    var tmpY = 0.0;
    var max = 16*4;
    for (var k = 0; (k < ite_max)&&(tmpX < max); k++){
        tmpX = tmpX*tmpX - tmpY*tmpY + x;
        tmpY = 2*tmpX*tmpY + y;
    }
    var tmpZ = tmpX*tmpX + tmpY*tmpY;
    if (!(tmpZ < 16*16*16)){ tmpZ = 16*16*16-1; console.log("over");}
    var tmpColor = ("00"+parseInt(tmpZ).toString(16)).slice(-3);
    var $e = $('<div>',{
                    val_x: x,
                    val_y: y
            });
    $e.css({
                position : 'absolute',
                top :  p_j + my_offset.top + 'px',
                left : p_i + my_offset.left + 'px',
                fontSize : '1px',
                border : 'none',
                padding : '0px',
                margin : '0px',
                height : p_h + 'px',
                width :  p_w + 'px',
                backgroundColor : '#' + tmpColor
            });
    /* 画像をクリックした時の動作 */
    $e.click(function(){
        //$("#scale").val(parseFloat($("#scale").val())/2); //スケールを倍細かく
        $("#s_x").val(x); //中心位置の移動
        $("#s_y").val(y);
        drawM();
    });
    $("#box").append($e);
}

/* 全体を描画 */
for (var i = 0; i < 2*i_max; i++ ){
    for (var j = 0; j < 2*j_max; j++ ){
        setPx(s_x+(i-i_max)*scale,s_y+(j-j_max)*scale,i*p_w,j*p_h);
    }
}

/* 終了 */
$("#status").html("finished");
}//drawM end


function hoge(code)
{
    console.log("pushed");
    console.log(code);
	//エンターキー押下なら
	if(13 === code)
	{
		drawM();
	}
}
$("input").attr("onkeypress","hoge(event.keyCode);");
$(document).ready(drawM);
$("#finer").click(function(){$("#scale").val(parseFloat($("#scale").val())/2);drawM();});
$("#coarser").click(function(){$("#scale").val(parseFloat($("#scale").val())*2);drawM();});