~firefox
24 items • Download ./*
24 items • Download ./*

..
stylish
circuit-canvas.html
gamemaker.html
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
homepage-stars.html
mailorder.html
noise.html
noise2.html
noise3.html
noise3.jpg
remoteButter.html
simple-homepage.html
slideshow.html
template.ajax.php
template.html
template.min.html
trigonometry.html
videoeditor.html

firefoxnoise3.html
939•  2 years ago•  DownloadRawClose
2 years ago•  939

{}
<!DOCTYPE html>
<!--

    Author:        Twily 2022
    Website:       http://twily.info/

-->
<html>
<head>
<title>TwilyNoise3</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name='viewport' content='width=device-width,initial-scale=1'>

<link id="favicon" rel="shortcut icon" href="./favicon.ico" />

<style type="text/css">
html,body {
	background: #FFF; color: #000;
    margin: 0; padding: 0; overflow: hidden;
}

#cnv {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
    background: #000;
    z-index: 1;
}

#c_wrap {
    display: flex; position: absolute; 
    top: 0; left: 0;
    height: 100%;
}
#controls {
    background: #000; color: #FFF;
    margin: auto; display: inline-block; position: relative;
    padding: 8px;
    text-align: center;
}
.tbl { display: table; table-layout: fixed; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: middle; }
.td:nth-child(1) { text-align: left; }
.td:nth-child(2) { text-align: left; }
.td:nth-child(3) { text-align: left; }
.small_txt {
    max-width: 40px;
}
input[type="text"] {
    text-align: center;
}
#cursor {
    width: 50px; height: 50px;
    border: 5px solid #f00;
    border-radius: 50px;
    box-shadow: 0 0 5px 5px #f00;
    background: #000;
    margin-left: -24px; margin-top: -20px;
    position: fixed;
    top: 100px; left: 100px;
    /*display: none;*/
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}
</style>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
var rndMinMax=function(min,max) { return Math.floor(Math.random() * (max - min + 1) + min); };
var IsJsonString=function(str) { try { JSON.parse(str); } catch(e) { return false; } return true; }

function init() {
    loadinit();

    if($('noise')) {
		cnv=$('noise');
		ctx=cnv.getContext('2d');
		
		//loop(); from newsize
	}
	
	newsize();
}

function isEven(n) {
    return n % 2 == 0;
}


function clearCanvas() {
    ctx.clearRect(0,0,winW,winH);
}


var printDots=10000;
var dotSize=80;
var fps=60;
var fjumpX="1.00";
var fjumpY="1.00";
var fsizeMulti="1.30";
var multiSelect="#000";

var addRed=0;
var addGreen=0;
var addBlue=0;

function loadinit() {
    $('txt_fps').value=fps;
    $('rng_fps').value=fps;

    $('txt_sizestep').value=nStepSize;
    //$('rng_sizestep').value=nStepSize;

    $('txt_size').value=dotSize;
    $('rng_size').value=dotSize;

    $('txt_print').value=printDots;
    $('rng_print').value=printDots;

    $('txt_jumpx').value=fjumpX;
    $('rng_jumpx').value=fjumpX;

    $('txt_jumpy').value=fjumpY;
    $('rng_jumpy').value=fjumpY;

    $('txt_multistep').value=nStepMulti;
    //$('rng_multistep').value=nStepMulti;

    $('txt_multi').value=fsizeMulti;
    $('rng_multi').value=fsizeMulti;
}

function drawDots() {
    var rndX,rndY;

    // jump dist
    //var jumpY=Math.round(dotSize/2);
    //var jumpX=Math.round(dotSize/2);
    //var jumpY=dotSize;
    //var jumpX=dotSize;
    var jumpX=Math.round(dotSize*parseFloat(fjumpX));
    var jumpY=Math.round(dotSize*parseFloat(fjumpY));
    //if(!isEven(jumpX) && jumpX>1) jumpX--;
    //if(!isEven(jumpY) && jumpY>1) jumpY--;

    // random or uniform
    var firstX=rndMinMax(0,dotSize);
    if($('chk_firstx_fixed').checked) {
        firstX=Math.round(dotSize/2);
    }
    var firstY=rndMinMax(0,dotSize);
    if($('chk_firsty_fixed').checked) {
        firstY=Math.round(dotSize/2);
    }

    // clear on redraw
    //ctx.fillStyle="#fff";
    //ctx.fillRect(0,0,winW,winH);
    //
    if($('chk_clear_every').checked) {
        ctx.clearRect(0,0,winW,winH);
    }

    var drawT="arc";
    if($('chk_draw_rect').checked) {
        drawT="rect";
    }
    var strokeOn=$('chk_stroke').checked;
    var fillOn=$('chk_fill').checked;

    var colorMode=false;
    if(addBlue>0 || addGreen>0 || addRed>0) {
        colorMode=true;
    }
    var greyscale=false;
    if($('chk_greyscale').checked) {
        greyscale=true;
    }

    var maxDots=Math.round(winW/jumpX) * Math.round(winH/jumpY);
    var skipPercent=Math.round((parseInt(printDots)*100)/maxDots);

    var chkAlign=$('chk_alignm_hex').checked;
    
    var randomangle=$('chk_random_angle').checked;

    var multiF=parseFloat(fsizeMulti);

    var pixelDraw=false;
    if(dotSize==1) {
        canvasData = ctx.getImageData(0, 0, winW, winH);
        pixelDraw=true; 

        jumpX=1;
        jumpY=1;

        chkAlign=false;
        // pixelDraw disables Jump, First, Align and Multi as based on dotSize !
        // hint: up the printDots to 1 000 000 in pixelDraw mode
    }


    var ctxFill;
    var layerY=0;
    var setCol;
    var color=[0,0,0];
    var halfColor,rndHalf;
    var redTune,greenTune,blueTune;
    for(var x=firstX;x<=winW;x+=jumpX) {
        for(var y=firstY;y<=winH;y+=jumpY) {

            var tipX=x;
            if(chkAlign) {
                if(isEven(layerY)) {
                    tipX+=Math.round(dotSize/2) // alignment
                }
            }

            if(tipX<=winW && y<=winH) {
                ctx.beginPath();

                if(rndMinMax(1,100)<=skipPercent) { // skip % of maxDots per frame
                    if(rndMinMax(1,2)==1) {
                        ctxFill="#fff";
                        color=[255,255,255];
                    } else {
                        ctxFill="#000";
                        color=[0,0,0];
                    }

                    var sizeMulti=1;
                    if(ctxFill==multiSelect) sizeMulti=multiF; // indifference

                    if(colorMode) {
                        blueTune=color[2];
                        greenTune=color[1];
                        redTune=color[0];

                        if(addBlue>1) {
                            halfColor=Math.ceil(addBlue/2);
                            rndHalf=rndMinMax(0,halfColor);
                            if(color[2]==0) { // dark
                                blueTune+=rndHalf;
                            } else { // light
                                if(redTune==0) redTune=255;
                                if(greenTune==0) greenTune=255;

                                redTune-=rndHalf;
                                greenTune-=rndHalf;
                            }
                            if(blueTune>255) blueTune=255;
                            if(blueTune<0) blueTune=0;
                        }
                        if(addGreen>1) {
                            halfColor=Math.ceil(addGreen/2);
                            rndHalf=rndMinMax(0,halfColor);
                            if(color[1]==0) { // dark
                                greenTune+=rndHalf;
                            } else { // light
                                if(redTune==0) redTune=255;
                                if(blueTune==0) blueTune=255;

                                blueTune-=rndHalf;
                                redTune-=rndHalf;
                            }
                            if(greenTune>255) greenTune=255;
                            if(greenTune<0) greenTune=0;
                        }
                        if(addRed>1) {
                            halfColor=Math.ceil(addRed/2);
                            rndHalf=rndMinMax(0,halfColor);
                            if(color[0]==0) { // dark
                                redTune+=rndHalf;
                            } else { // light
                                if(greenTune==0) greenTune=255;
                                if(blueTune==0) blueTune=255;

                                blueTune-=rndHalf;
                                greenTune-=rndHalf;
                            }
                            if(redTune>255) redTune=255;
                            if(redTune<0) redTune=0;
                        }

                        if(greyscale) {
                            var greyTune=Math.round((redTune+greenTune+blueTune)/3);
                            redTune=greyTune;
                            greenTune=greyTune;
                            blueTune=greyTune;
                        }
                        
                        color[0]=redTune;
                        color[1]=greenTune;
                        color[2]=blueTune;
                    }

                    if(pixelDraw) { // draw data
                        setCol="black";
                        if(ctxFill=="#fff") setCol="white";
                        
                        index = (x + y * winW) * 4;
	    
	                    canvasData.data[index + 0] = color[0]; // r
	                    canvasData.data[index + 1] = color[1]; // g
	                    canvasData.data[index + 2] = color[2]; // b
                        canvasData.data[index + 3] = 255; // a
                    } else { // draw dots
                        //ctx.strokeStyle=ctxFill;
                        //ctx.strokeStyle="#f00";
                        //ctx.fillStyle=ctxFill;
                        ctx.strokeStyle='rgba('+color[0]+','+color[1]+','+color[2]+',1)';
                        ctx.fillStyle='rgba('+color[0]+','+color[1]+','+color[2]+',1)';

                        if(drawT=="arc") {
                            var abegin=0;
                            var aend=2;
                            if(randomangle) {
                                abegin=(rndMinMax(0,200)/100);
                                aend=(rndMinMax(0,200)/100);
                            }

                            //ctx.arc(rndX, rndY, 200, 0, 2 * Math.PI, true);
                            //
                            //ctx.arc(tipX, y, dotSize * (sizeMulti*2), abegin * Math.PI, aend * Math.PI, true);
                            ctx.arc(tipX , y , (dotSize/2) * sizeMulti, abegin * Math.PI, aend * Math.PI, true);

                            if(strokeOn) {
                                ctx.stroke();
                            }
                            if(fillOn) {
                                ctx.fill(); // enable solid
                            }
                        } else if(drawT=="rect") {
                            if(fillOn) {
                                //ctx.fillRect(tipX - ((dotSize * sizeMulti)/2), y - ((dotSize * sizeMulti)/2), (dotSize * sizeMulti), (dotSize * sizeMulti));
                                ctx.fillRect(tipX - ((dotSize * (sizeMulti/2))), y - ((dotSize * (sizeMulti/2))), (dotSize * (sizeMulti)), (dotSize * (sizeMulti)));
                            }
                            if(strokeOn) {
                                //ctx.strokeRect(tipX - ((dotSize * sizeMulti)/2), y - ((dotSize * sizeMulti)/2), (dotSize * sizeMulti), (dotSize * sizeMulti));
                                ctx.strokeRect(tipX - ((dotSize * (sizeMulti/2))), y - ((dotSize * (sizeMulti/2))), (dotSize * (sizeMulti)), (dotSize * (sizeMulti)));
                            }
                            //
                        }
                    }
                }

                //alert('x = '+x+', y = '+y+' | jumpX = '+jumpX+' jumpY = '+jumpY);
            }
            layerY++;
            //break;
        }
    }
    if(pixelDraw) {
        ctx.putImageData(canvasData, 0, 0);
    }
}

var cnv=null;
var ctx;
var canvasData;
var running=false;
var nlT;
var xPos=0;
var yPos=0;
var drawState="paused";
var frozen=false;
function loop() {
    clearTimeout(nlT);
 
    if(!frozen) {
        drawDots(); 
    }
	
	nlT=setTimeout(function() { loop(); },1000/fps);
}

var winW=800;
var winH=600;
function newsize() {
	winW=window.innerWidth;
	winH=window.innerHeight;
	
	
	if(cnv!=null) {
		cnv.width=winW
		cnv.height=winH;
		
		drawState="preready";
	
		if(!running) {
			running=true;
			loop();
		}
	}
}

var rwT;
window.onresize=function() {
	//clearTimeout(rwT);
	
	//rwT=setTimeout(function() { newsize(); },100);
}

var opacity_box=100;
var fBT;
function fadeBox(y) {
    clearTimeout(fBT);
    var id="c_wrap";
    var step=3;
    var mfps=30;

    if(y=="in") {
        hideMouseOn=false;

        opacity_box+=step;
        if(opacity_box<100) {
            $(id).style.opacity=(opacity_box/100);

            fBT=setTimeout(function() { fadeBox('in'); },1000/mfps);
        } else {
            $(id).style.opacity=1;
        }
    } else if(y=="out") {
        hideMouseOn=true;

        opacity_box-=step;
        if(opacity_box>0) {
            $(id).style.opacity=(opacity_box/100);

            fBT=setTimeout(function() { fadeBox('out'); },1000/mfps);
        } else {
            $(id).style.opacity=0;
        }
    }
}

var hideMouseOn=false;
var hCT;
function hideCursor() {
    //$('cursor').style.display="none";
    $('cursor').style.opacity="0";

    if(hideMouseOn) {
        $('noise').style.cursor="none";
    }
}
function showCursor(e) {
    clearTimeout(hCT);
    //$('cursor').style.display="block";
    $('cursor').style.opacity="0.50";

    $('noise').style.cursor="default";

    var mX=e.clientX;
    var mY=e.clientY;

    $('cursor').style.top=mY+"px";
    $('cursor').style.left=mX+"px";

    hCT=setTimeout(function() { hideCursor(); },200);
}
</script>
</head>
<body onload="init();" onmousemove="showCursor(event);">

<canvas id="noise"></canvas>

<div id="cursor"></div>

<div id="c_wrap" onmouseleave="fadeBox('out');" onmouseenter="fadeBox('in');">
<div id="controls">

<div class="tbl">
    <div class="tr">
        <div class="td">
fps:&nbsp;
        </div>
        <div class="td">
<input type="text" value="60" class="small_txt" id="txt_fps" onchange="updateScene(event,'fps',this.value); "onkeypress="updateScene(event,'fps',this.value);" />
        </div>
        <div class="td">
<input type="range" min="1" max="120" value="12" id="rng_fps" onchange="updateSlide('fps',this.value);" />
        </div>
    </div>
    
    <div class="tr">
        <div class="td">
nStepSize*:&nbsp;
        </div>
        <div class="td">
<input type="text" value="3" class="small_txt" id="txt_sizestep" onchange="updateScene(event,'sizestep',this.value); "onkeypress="updateScene(event,'sizestep',this.value);" />
        </div>
        <div class="td" style="">
<!--<input type="range" min="1" max="100" value="3" id="rng_sizestep" onchange="updateSlide('sizestep',this.value);" />-->
        </div>
    </div>
    <div class="tr">
        <div class="td">
dotSize:&nbsp;
        </div>
        <div class="td">
<input type="text" value="2" class="small_txt" id="txt_size" onchange="updateScene(event,'size',this.value); "onkeypress="updateScene(event,'size',this.value);" />
        </div>
        <div class="td" style="">
<input type="range" min="1" max="1000" value="10" id="rng_size" onchange="updateSlide('size',this.value);" />
<input type="button" value="-" onclick="stepSize(-1);" />
<input type="button" value="+" onclick="stepSize(1);" />
        </div>
    </div>

    <div class="tr">
        <div class="td">
printDots:&nbsp;
        </div>
        <div class="td">
<input type="text" value="10000" class="small_txt" id="txt_print" onchange="updateScene(event,'print',this.value); "onkeypress="updateScene(event,'print',this.value);" />
        </div>
        <div class="td">
<input type="range" min="1" max="100000" value="10000" id="rng_print" onchange="updateSlide('print',this.value);" />
        </div>
    </div>
</div>

<br />

<div class="more" style="text-align: left;">
<input type="checkbox" id="chk_lock_jump" checked><label for="chk_lock_jump">Jump lock</label>
</div>
<div class="tbl">
    <div class="tr">
        <div class="td">
jumpX:&nbsp;
        </div>
        <div class="td">
{dotSize} *&nbsp;
        </div>
        <div class="td">
<input type="text" value="0.50" class="small_txt" id="txt_jumpx" onchange="updateScene(event,'jumpx',this.value); "onkeypress="updateScene(event,'jumpx',this.value);" />
        </div>
        <div class="td">
<input type="range" min="0.10" max="10.00" value="0.50" step="0.01" id="rng_jumpx" onchange="updateSlide('jumpx',this.value);" />
        </div>
    </div>

    <div class="tr">
        <div class="td">
jumpY:&nbsp;
        </div>
        <div class="td">
{dotSize} *&nbsp;
        </div>
        <div class="td">
<input type="text" value="0.50" class="small_txt" id="txt_jumpy" onchange="updateScene(event,'jumpy',this.value); "onkeypress="updateScene(event,'jumpy',this.value);" />
        </div>
        <div class="td">
<input type="range" min="0.10" max="10.00" value="0.50" step="0.01" id="rng_jumpy" onchange="updateSlide('jumpy',this.value);" />
        </div>
    </div>
</div>

<br />

<div class="more" style="text-align: left;">
<input type="checkbox" id="chk_lock_first" checked><label for="chk_lock_first">First lock</label>
</div>
<div class="tbl">
    <div class="tr">
        <div class="td">
firstX:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="radio" name="chk_firstx" id="chk_firstx_rando" checked onclick="changeFirst('y','rando');" /><label for="chk_firstx_rando">Randomized</label>
<input type="radio" name="chk_firstx" id="chk_firstx_fixed" onclick="changeFirst('y','fixed');" /><label for="chk_firstx_fixed">Fixed</label>&nbsp;
        </div>
    </div>
    <div class="tr">
        <div class="td">
firstY:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="radio" name="chk_firsty" id="chk_firsty_rando" checked onclick="changeFirst('x','rando');" /><label for="chk_firsty_rando">Randomized</label>
<input type="radio" name="chk_firsty" id="chk_firsty_fixed" onclick="changeFirst('x','fixed');" /><label for="chk_firsty_fixed">Fixed</label>&nbsp;
        </div>
    </div>
    <div class="tr">
        <div class="td">
Alignment:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="radio" name="chk_alignm" id="chk_alignm_hex" checked /><label for="chk_alignm_hex">Hex</label>
<input type="radio" name="chk_alignm" id="chk_alignm_grid" /><label for="chk_alignm_grid">Grid</label>&nbsp;
        </div>
    </div>
</div>

<br />
<div class="tbl">
    <div class="tr">
        <div class="td">
nStepMulti*:&nbsp;
        </div>
        <div class="td">
<input type="text" value="0.3" class="small_txt" id="txt_multistep" onchange="updateScene(event,'multistep',this.value); "onkeypress="updateScene(event,'multistep',this.value);" />
        </div>
        <div class="td" style="">
<!--<input type="range" min="1" max="100" value="3" id="rng_multistep" onchange="updateSlide('multistep',this.value);" />-->
        </div>
    </div>
    <div class="tr">
        <div class="td">
sizeMulti:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="text" value="1.30" class="small_txt" id="txt_multi" onchange="updateScene(event,'multi',this.value); "onkeypress="updateScene(event,'multi',this.value);" />
        </div>
        <div class="td">
<input type="range" min="0.01" max="10.00" value="1.30" step="0.01" id="rng_multi" onchange="updateSlide('multi',this.value);" />
<input type="button" value="-" onclick="stepMulti(-1);" />
<input type="button" value="+" onclick="stepMulti(1);" />
        </div>
    </div>
    <div class="tr">
        <div class="td">
sizeMulti&nbsp;
        </div>
        <div class="td">
select =&gt;&nbsp;
        </div>
        <div class="td">
<select onchange="changeMulti(this.value);" id="sel_multifor">
    <option value="#000">Dark</option>
    <option value="#fff">Light</option>
</select>
        </div>
    </div>
</div>

<br />

<div class="tbl">
    <div class="tr">
        <div class="td">
color Red:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="text" value="0" class="small_txt" id="txt_red" onchange="updateScene(event,'red',this.value); "onkeypress="updateScene(event,'red',this.value);" />
        </div>
        <div class="td">
<input type="range" min="0" max="255" value="0" id="rng_red" onchange="updateSlide('red',this.value);" />
        </div>
    </div>
    <div class="tr">
        <div class="td">
color Green:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="text" value="0" class="small_txt" id="txt_green" onchange="updateScene(event,'green',this.value); "onkeypress="updateScene(event,'green',this.value);" />
        </div>
        <div class="td">
<input type="range" min="0" max="255" value="0" id="rng_green" onchange="updateSlide('green',this.value);" />
        </div>
    </div>
    <div class="tr">
        <div class="td">
color Blue:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="text" value="0" class="small_txt" id="txt_blue" onchange="updateScene(event,'blue',this.value); "onkeypress="updateScene(event,'blue',this.value);" />
        </div>
        <div class="td">
<input type="range" min="0" max="255" value="0" id="rng_blue" onchange="updateSlide('blue',this.value);" />
        </div>
    </div>
    <div class="tr">
        <div class="td">
greyscale:&nbsp;
        </div>
        <div class="td" style="white-space: nowrap;">
<input type="checkbox" id="chk_greyscale" />
        </div>
        <div class="td">
        </div>
    </div>
</div>

<br />

<div class="more">
    <input type="button" value="Clear canvas" onclick="clearCanvas();" />
    <input type="button" value="Freeze canvas" onclick="freezeCanvas();" id="btn_freeze" />
    <br />
    <br />
    <input type="checkbox" id="chk_clear_every"><label for="chk_clear_every">Clear canvas on every frame</label>
</div>

<br />

<div class="tbl">
<!--    <div class="tr">
        <div class="td">
Background:&nbsp;
        </div>
        <div class="td">
<select>
    <option value="#fff" selected>White</option>
    <option value="#000">Black</option>
</select>
        </div>
    </div>-->
    <div class="tr">
        <div class="td">
Draw type:&nbsp;
        </div>
        <div class="td">
<input type="radio" name="chk_draw_type" id="chk_draw_arc"  onclick="changeDraw();" checked><label for="chk_draw_arc">Arc</label>
<input type="radio" name="chk_draw_type" id="chk_draw_rect" onclick="changeDraw();"><label for="chk_draw_rect">Rect</label>
        </div>
    </div>
    <div class="tr">
        <div class="td">
Draw apply:&nbsp;
        </div>
        <div class="td">
<input type="checkbox" id="chk_stroke" checked /><label for="chk_stroke">Stroke</label>
<input type="checkbox" id="chk_fill" /><label for="chk_fill">Fill</label>
        </div>
    </div>
    <div class="tr">
        <div class="td">
Random angles:&nbsp;
        </div>
        <div class="td">
<input type="checkbox" checked id="chk_random_angle" />
        </div>
    </div>
</div>

<br />

<div class="more">
    <input type="button" value="Reload" onclick="window.location.href=window.location.href;" />
&nbsp;
    <input type="button" value="Save preset" onclick="exportJson();" />
    <input type="button" value="Load preset" onclick="importJson();" />
</div>

</div>
</div>

<script type="text/javascript">
var nStepMulti="0.3";
var nStepSize=3;

function stepMulti(x) {
    fsizem=parseFloat(fsizeMulti);
    if(x==1) {
        fsizem+=parseFloat(nStepMulti);
        $('txt_multi').value=fsizem;
        $('rng_multi').value=fsizem;
        fsizeMulti=fsizem.toString();
    } else if(x==-1) {
        fsizem-=parseFloat(nStepMulti);
        if(fsizem<0.01) {
            fsizem=0.01;
        }
        $('txt_multi').value=fsizem;
        $('rng_multi').value=fsizem;
        fsizeMulti=fsizem.toString();
    }
}
function stepSize(x) {
    fsizem=parseInt(dotSize);
    if(x==1) {
        fsizem+=parseInt(nStepSize);
        $('txt_size').value=fsizem;
        $('rng_size').value=fsizem;
        dotSize=fsizem;
    } else if(x==-1) {
        fsizem-=parseInt(nStepSize);
        if(fsizem<2) {
            fsizem=2;
        }
        $('txt_size').value=fsizem;
        $('rng_size').value=fsizem;
        dotSize=fsizem;
    }
}

function exportJson() {
    var firstxm="rando";
    var firstym="rando";
    if($('chk_firstx_fixed').checked) {
        firstxm="fixed";
    }
    if($('chk_firsty_fixed').checked) {
        firstym="fixed";
    }
    var alignm="hex";
    if($('chk_alignm_grid').checked) {
        alignm="grid";
    }
    var dtype="arc";
    if($('chk_draw_rect').checked) {
        dtype="rect";
    }

    var obj={
        fps: fps,
        dotSize: dotSize,
        printDots: printDots,
        jlock: $('chk_lock_jump').checked,
        jumpx: fjumpX,
        jumpy: fjumpY,
        flock: $('chk_lock_first').checked,
        firstx: firstxm,
        firsty: firstym,
        align: alignm,
        multi: fsizeMulti,
        multifor: multiSelect,
        red: addRed,
        green: addGreen,
        blue: addBlue,
        greyscale: $('chk_greyscale').checked,
        drawtype: dtype,
        stroke: $('chk_stroke').checked,
        fill: $('chk_fill').checked,
        randoma: $('chk_random_angle').checked
    };

    var data=JSON.stringify(obj);
    prompt("JSON Data export:",data);
}
function importJson() {
    var data=prompt("JSON Data import:","");

    if(IsJsonString(data)) {
        var obj=JSON.parse(data);

        fps=obj['fps'];
        $('txt_fps').value=fps;
        $('rng_fps').value=fps;
        dotSize=obj['dotSize'];
        $('txt_size').value=dotSize;
        $('rng_size').value=dotSize;
        printDots=obj['printDots'];
        $('txt_print').value=printDots;
        $('rng_print').value=printDots;

        if(obj['jlock']) {
            $('chk_lock_jump').checked=true;
        } else {
            $('chk_lock_jump').checked=false;
        }
        fjumpX=obj['jumpx'];
        $('txt_jumpx').value=fjumpX;
        $('rng_jumpx').value=fjumpX;

        fjumpY=obj['jumpy'];
        $('txt_jumpy').value=fjumpY;
        $('rng_jumpy').value=fjumpY;

        if(obj['flock']) {
            $('chk_lock_first').checked=true;
        } else {
            $('chk_lock_first').checked=false;
        }
        if(obj['firstx']=="rando") {
            $('chk_firstx_rando').checked=true;
            $('chk_firstx_fixed').checked=false;
        } else {
            $('chk_firstx_fixed').checked=true;
            $('chk_firstx_rando').checked=false;
        }
        if(obj['firsty']=="rando") {
            $('chk_firsty_rando').checked=true;
            $('chk_firsty_fixed').checked=false;
        } else {
            $('chk_firsty_fixed').checked=true;
            $('chk_firsty_rando').checked=false;
        }
        if(obj['align']=="hex") {
            $('chk_alignm_hex').checked=true;
            $('chk_alignm_grid').checked=false;
        } else {
            $('chk_alignm_grid').checked=true;
            $('chk_alignm_hex').checked=false;
        }

        fsizeMulti=obj['multi'];
        $('txt_multi').value=fsizeMulti;
        $('rng_multi').value=fsizeMulti;
        multiSelect=obj['multifor'];        

        if(obj.hasOwnProperty('red')) {
            addRed=obj['red'];
            $('txt_red').value=addRed;
            $('rng_red').value=addRed;
        }
        if(obj.hasOwnProperty('green')) {
            addGreen=obj['green'];
            $('txt_green').value=addGreen;
            $('rng_green').value=addGreen;
        }
        if(obj.hasOwnProperty('blue')) {
            addBlue=obj['blue'];
            $('txt_blue').value=addBlue;
            $('rng_blue').value=addBlue;
        }
        if(obj.hasOwnProperty('greyscale')) {
            if(obj['greyscale']) {
                $('chk_greyscale').checked=true;
            } else {
                $('chk_greyscale').checked=false;
            }
        }

        var elms=$('sel_multifor').getElementsByTagName('option');
        for(var i=0;i<elms.length;i++) {
            if(elms[i].value==multiSelect) {
                elms[i].selected=true;
            } else {
                elms[i].selected=false;
            }
        }
        
        if(obj['drawtype']=="arc") {
            $('chk_draw_arc').checked=true;
            $('chk_draw_rect').checked=false;
        } else {
            $('chk_draw_rect').checked=true;
            $('chk_draw_arc').checked=false;
        }
        
        if(obj['stroke']) {
            $('chk_stroke').checked=true;
        } else {
            $('chk_stroke').checked=false;
        }
        if(obj['fill']) {
            $('chk_fill').checked=true;
        } else {
            $('chk_fill').checked=false;
        }
        if(obj['randoma']) {
            $('chk_random_angle').checked=true;
        } else {
            $('chk_random_angle').checked=false;
        }
    } else {
        alert("Error: invalid json data");
    }
}

function freezeCanvas() {
    var stat=$('btn_freeze').value;
    if(stat=="Freeze canvas") {
        frozen=true;
        $('btn_freeze').value="Unreeze canvas";
    } else {
        frozen=false;
        $('btn_freeze').value="Freeze canvas";
    }
}

function changeFirst(x,type) {
    if($('chk_lock_first').checked) {
        var id="chk_first"+x+"_"+type;
        if($(id)) {
            $(id).checked=true;
        }
    }
}

function changeMulti(value) {
    multiSelect=value;
}

function changeDraw() {
    var stat=$('chk_draw_arc').checked;
    if(!stat) {
        // disable arc stuff
        //
        //$('chk_random_angle').checked=false;
        $('chk_random_angle').disabled=true;
    } else {
        // enable arc stuff
        //
        //$('chk_random_angle').checked=true;
        $('chk_random_angle').disabled=false;
    }
}

function updateScene(e,type,value) {
    if(typeof e.keyCode!=='undefined') {
        if(e.keyCode!=13) {
            return;
        }
    }

    switch(type) {
        case "fps":
            fps=parseInt(value);
            $('rng_fps').value=value;
            break;
        case "size":
            dotSize=parseInt(value);
            $('rng_size').value=value;
            break;
        case "sizestep":
            nStepSize=parseInt(value);
            //$('rng_sizestep').value=value;
            break;
        case "print":
            printDots=parseInt(value);
            $('rng_print').value=value;
            break;
        case "jumpx":
            if(parseFloat(value)>=0.1) {
                if($('chk_lock_jump').checked) {
                    fjumpY=value.toString();
                    $('rng_jumpy').value=value;
                    $('txt_jumpy').value=value;
                }
                fjumpX=value.toString();
                $('rng_jumpx').value=value;
            }
            break;
        case "jumpy":
            if(parseFloat(value)>=0.1) {
                if($('chk_lock_jump').checked) {
                $('rng_jumpx').value=value;
                    fjumpX=value.toString();
                    $('txt_jumpx').value=value;
                }
                fjumpY=value.toString();
                $('rng_jumpy').value=value;
            }
            break;
        case "multi":
            fsizeMulti=value.toString();
            $('rng_multi').value=value;
            break;
        case "multistep":
            nStepMulti=value.toString();
            //$('rng_multistep').value=value;
            break;
        case "red":
            addRed=parseInt(value);
            $('rng_red').value=value;
            break;
        case "green":
            addGreen=parseInt(value);
            $('rng_green').value=value;
            break;
        case "blue":
            addBlue=parseInt(value);
            $('rng_blue').value=value;
            break;
        default:
    }
}
function updateSlide(type,value) {
    switch(type) {
        case "fps":
            $('txt_fps').value=value;
            break;
        case "sizestep":
            $('txt_sizestep').value=value;
            break;
        case "size":
            $('txt_size').value=value;
            break;
        case "print":
            $('txt_print').value=value;
            break;
        case "jumpx":
            $('txt_jumpx').value=value;
            if($('chk_lock_jump').checked) {
                $('txt_jumpy').value=value;
            }
            break;
        case "jumpy":
            $('txt_jumpy').value=value;
            if($('chk_lock_jump').checked) {
                $('txt_jumpx').value=value;
            }
            break;
        case "multi":
            $('txt_multi').value=value;
            break;
        case "multistep":
            $('txt_multistep').value=value;
            break;
        case "red":
            $('txt_red').value=value;
            break;
        case "green":
            $('txt_green').value=value;
            break;
        case "blue":
            $('txt_blue').value=value;
            break;
        default:
    }
        updateScene(event,type,value);
}
</script>

</body>
</html>

Top
©twily.info 2013 - 2024
twily at twily dot info



2 175 730 visits
... ^ v