p5.js绘制一个动态的自画像

p5.js绘制一个动态的自画像

第二次使用p5.js，用代码绘制一个自画像（当然，肯定不是自画像。）这是一个非常简单的任务，主要用贝塞尔曲线来绘制。
我们把整个图像分为动态刷新的背景、静态（每一帧重绘的）人像以及叠加在最上方的动态的雨点。

背景

我希望能够拥有一块能够在随机位置生成随机颜色色条并保留的背景画布，这需要我们每一帧计算色块需要被绘制的位置和长度，并判断是否重新绘制一条新的。
这里的思路是，设置一个全局的变量用来记录是否一条色块已经被绘制完。它每一帧增加1，当增加到画布的宽（或高）时重新置为0。每一次对它进行判断，若是小于800，则继续绘制上一个色块。
代码如下：

function drawRects()
{
   
    push();
    if(paintRect >800)//画完了
    {
   
        paintRect = 0;
        //新的一个
        for(var i =0;i<4;i++)
        {
   
            ranR[i] = Math.ceil(Math.random()*(255-180)+180);
            ranG[i] = Math.ceil(Math.random()*(255-180)+180);
            ranB[i] = Math.ceil(Math.random()*(255-180)+180);
            ranX[i] = Math.ceil(Math.random()*800);
            ranY[i] = Math.ceil(Math.random()*800);
            ranW[i] = Math.ceil(Math.random()*(100-20)+20)