控制程序生成平方变量和衰减

Controlling procedural generation squares variant and decay

本文关键字：变量 衰减 程序生成 方变量 控制      更新时间：2023-09-26

我制作了一个程序来制作正方形，这些正方形在顶部和左侧产生较小的正方形，这些正方形比它们形成的形式小，但在控制其大小变体时遇到问题。

可以找到实时代码JSFIDDLE 链接

制作正方形的主要功能：

function createCubes(maxX, maxY, minX, minY,lastColor) 
{
if (maxX - minX < 50 || maxY - minY < 50 ) 
{
  return;
}
//var decayRate = .5;
var x = getNumber(minX+50, maxX-50);
var y = getNumber(minY+50, maxY-50);
var width = maxX - x;
var height = maxY - y;
var color;
do
{
        color = getNumber(0, colors.length);
}
while(color == lastColor);
var tempCube = new Cube(color, x, y, width, height);
cubes.push(tempCube);
createCubes(maxX, y, x, minY,color);
createCubes(x, maxY,minX, y,color);
}

我尝试增加最小值并减少放入 getNumber 函数的最大值，但这导致正方形超出界限。

是的，我知道我在程序中称它们为立方体。

如果您需要任何解释性评论，我将尽快解决。

感谢您的帮助！

更新：我发现，当减去最大值并将基本追逐设置为我减去的追逐有助于使它们更好时，但你没有得到那么多。

更新：

添加了颜色并尝试控制正方形。它们仍然以无法控制的速度衰减

使用 requestAnimationFrame 作为定时循环。 rAF会自动发送时间戳参数，您可以使用该参数来控制矩形的绘制速率（衰减率）。

下面是带注释的代码和演示： 

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var rectSize=100;
var rectResizing=0.75;
var rectX=0;
var nextTime=0;
var decayDelay=500;
var decayRate=0.95;
var loopCount=0;
var labelY=150;
requestAnimationFrame(decayLoop);
function decayLoop(time){
    // wait for elapsed time
    if(time<nextTime){requestAnimationFrame(decayLoop);return;}
    // reset for nextTime
    nextTime=time+decayDelay;
    // update the decay
    decayDelay*=decayRate;
    // draw the decayed rect
    ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
    ctx.fillRect(rectX,20,rectSize,rectSize);
    rectX+=rectSize;
    rectSize*=rectResizing;
    // display current decayDelay & rectSize
    //ctx.clearRect(0,0,cw,40);
    ctx.fillStyle='black';
    ctx.fillText('Loop count: '+(loopCount++)+', RectSize: '+parseInt(rectSize)+', DecayDelay: '+decayDelay,10,labelY);
    labelY+=12;
    // request another loop
    if(rectSize>=1){
        requestAnimationFrame(decayLoop);
    }else{
        alert('End: Rect size has decayed below 1px');
    }
}
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas" width=512 height=512></canvas>

相关文章：