粒子的代码不起作用。绘图时出错？

Question

Hi there :) just trying to finish this little test with particles, but i'm getting some "extrange" behavior. 嗨，你好:)只是试图用粒子完成这个小测试，但是我得到了一些“额外的”行为。 I will let you two "versions" of the code. 我将为您提供代码的两个“版本”。 It works like this: -I create a particle, passing a "particle settings", it means a particle configuration for liferate, color, spawntype, etc. For now, i only have one particle type "AcidQuads". 它的工作方式如下：-我创建一个粒子，并传递“粒子设置”，它表示生命率，颜色，生成类型等的粒子配置。目前，我只有一个粒子类型“ AcidQuads”。 They are intended to be rects (wich its working ok) but with random initial color if "rndiColor" value is set to true. 它们旨在用作rect（正常工作），但如果将“ rndiColor”值设置为true，则具有随机的初始颜色。 If it is, the color is generated by passing the list contained on "iRed", "iGreen" and "iBlue" (same stands for iAlpha) to a function (rndbtw). 如果是，则通过将包含在“ iRed”，“ iGreen”和“ iBlue”（与iAlpha相同的意思）上的列表传递给函数（rndbtw）来生成颜色。 It works fine (or that's what i see). 它工作正常（或者就是我所看到的）。 The PARTICLES_SETTINGS properties that have a "list" as a value, means that the particle value will be generated by rndbtw(), which returns a value between propertie's 1 element and 0 (a iRed: [255, 0] will return a number between 0 and 255). 具有“列表”作为值的PARTICLES_SETTINGS属性意味着粒子值将由rndbtw（）生成，该值返回属性1到0之间的值（iRed：[255，0]将返回介于0和255）。 I've put an alert to see the values generated for each particle, and they are ok. 我发出了警报，以查看为每个粒子生成的值，它们还可以。 Color values are correct (between 0 and 255) and everything looks fine... but, the only way i can get particles drawed is by settings iRed/iGreen/iBlue to [0, 255] which generates white particles always, with different alpha. 颜色值是正确的（0到255之间），一切看起来都很好...但是，我可以绘制颗粒的唯一方法是将iRed / iGreen / iBlue设置为[0，255]，该颜色始终生成白色颗粒，并且具有不同的alpha 。 The "working" code is the next: 下一个“有效”代码：

    </head>
<body>
    <canvas ID="test" width="640" height="480"></canvas>
    <script>

var QUAD    = 1,
    GRAVITY = 0.3;  

var mouse;
    mouse = {x: 0, y: 0};
document.addEventListener('mousemove', function(e){ 
                           mouse.x = e.clientX - 12; 
                           mouse.y = e.clientY - 23 //Fix poco decente! no hagan esto en casa.
                         }, false);

function rndbtw(range)       { return (Math.random()*range[0])+range[1] }
function getRGBA(R, G, B, A) { return 'rgba('+R+','+G+','+B+','+A+')' }




var PARTICLES_SETTINGS = {
    'AcidQuads': {
        //Shape and size related
        shape: QUAD,
        rndSize: true,
        size: {width:  [10, 2],
               height: [10, 2]
              },
        //Color related
        rndiColor: true,
        iRed:   [0, 255], //Here are the color values
        iGreen: [0, 255],
        iBlue:  [0, 255],
        // Alpha
        rndiAlpha: true,
        iAlpha: [1, 0.1],
        // Velocity related
        rndVelocityX: true,
        rndVelocityY: true,
        iVelx: [10, -5],
        iVely: [10, -5],
        // Position related
        xfollowMouse: true,
        yfollowMouse: true,
        // Life related
        rndLiferate: true,
        liferate: [100, 30]
    }
}

var Particle = function(settings, spawnPosition) {
    this.settings = PARTICLES_SETTINGS[settings]
    if (this.settings.rndiColor) {
        //Get random initial color
        //If the color must be random, call rndbtw() passing the two-values list
        this.R = rndbtw(this.settings.iRed);
        this.G = rndbtw(this.settings.iGreen);
        this.B = rndbtw(this.settings.iBlue);
    } else {
        //Or get the specified initial color
        this.R = this.settings.iRed;
        this.G = this.settings.iGreen;
        this.B = this.settings.iBlue;
    }
    this.A = (this.settings.rndiAlpha) ? rndbtw(this.settings.iAlpha):this.settings.iAlpha;
    this.color = getRGBA(this.R, this.G, this.B, this.A); //rgba string for canvas.
    //
    this.velx = (this.settings.rndVelocityX) ? rndbtw(this.settings.iVelx):this.settings.iVelx;
    this.vely = (this.settings.rndVelocityY) ? rndbtw(this.settings.iVely):this.settings.iVely;
    //
    this.x = (this.settings.xfollowMouse) ? mouse.x:spawnPosition[0];
    this.y = (this.settings.yfollowMouse) ? mouse.y:spawnPosition[1];
    //
    this.maxLife = (this.settings.rndLiferate) ? rndbtw(this.settings.liferate):this.settings.liferate;
    //-
    this.shape = this.settings.shape;
    this.size = (this.settings.shape == QUAD) ? {
                                                     width:  (this.settings.rndSize) ? rndbtw(this.settings.size.width):this.settings.size.width,
                                                     height: (this.settings.rndSize) ? rndbtw(this.settings.size.height):this.settings.size.height
                                                  }:(this.settings.shape.POINT)  ? 
                                                    {radius: (this.settings.rndSize) ? rndbtw(this.settings.size.radius):this.settings.size.radius}:'Another shapetype';
    //-
    this.life = 0;
    //
    this.id = particleIndex;
    particles[particleIndex] = this;
    particleIndex++;
    test = 'Color: '+this.color+' /vel(x,y) '+this.velx+','+this.vely+' /type '+this.shape+' /size '+this.size+' /settings '+this.settings+' /id '+this.id;
    alert(test);
}
Particle.prototype.live = function() {
    //Kill?
    if (this.life == this.maxLife) {
        delete particles[this.id];
    }
    //Draw
    ctx.fillStyle = this.color;
    alert(this.color);
    switch (this.shape) {
        case QUAD:
            ctx.fillRect(this.x, this.y, this.size.width, this.size.height);
            break;
    }

    //Update
    this.x += this.velx;
    this.y += this.vely;
    this.vely += GRAVITY;
    this.life++;
    return
}


//--------------------------------------------------//
var particles,
    particleIndex,
    canvas,
    ctx;

canvas = document.getElementById('test');
ctx    = canvas.getContext('2d');
particles = [];
particleIndex = 0;

setInterval(function() {
    for (var i=0; i<=10; i++) {
        new Particle('AcidQuads');
    }
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, 640, 480);
    for (var i in particles) {
        particles[i].live();
    }
}, 30)

    </script>


</body>
</html>

Only white particles with random alpha are drawn. 仅绘制具有随机alpha的白色粒子。 You can see in the alert, that values are only (255,255,255,random). 您可以在警报中看到，值仅为（255,255,255，random）。 For changing that, and generating random values between 0 and 255, the code will change this: 为了更改它并生成介于0到255之间的随机值，代码将对此进行更改：

rndiColor: true,
iRed:   [0, 255],
iGreen: [0, 255],
iBlue:  [0, 255],

to this: rndiColor: true, iRed: [255, 0], iGreen: [255, 0], iBlue: [255, 0], 为此：rndiColor：true，iRed：[255，0]，iGreen：[255，0]，iBlue：[255，0]，

In the alert, you will se that values will be ok, R,G,B are between 0 and 255, and alpha between 0.1 and 1... But if i change this, i don't see any particle drawn. 在警报中，您将看到值可以，R，G，B在0到255之间，而alpha在0.1到1之间...但是，如果我更改此设置，则看不到任何粒子。 A few days ago, i made particles with random colors by setting, for example, iRed: function() {return Math.random()*255+0}, and calling "settings.iRed();" 几天前，我通过设置iRed来制作具有随机颜色的粒子，例如，设置iRed：function（）{return Math.random（）* 255 + 0}，然后调用“ settings.iRed（）;”。 to get a random value for red color, but it's a little tedious to make new particles that way... i prefer to put only a list for a range of values. 以获得红色的随机值，但是以这种方式制作新粒子有点繁琐...我更喜欢只列出一系列值。 Why, if values are generated ok (between 0 and 255) are not drawn while if i put [min, max] they are but only of one color for every particle? 为什么如果生成的值确定（0到255之间），而我放置[min，max]却不绘制，则每个粒子只有一种颜色？ All the other stuff are working fine (velocity, liferate, alpha, and size). 所有其他东西都工作正常（速度，寿命，alpha和大小）。

Advanced thanks for help, and please, excuse for my bad english. 非常感谢您的帮助，请原谅我的英语不好。

By the way... i will replace the setInterval for RequestAnimation, it freeze my browser if i have another web page open xD 顺便说一句...我将为RequestAnimation替换setInterval，如果我有另一个打开xD的网页，它将冻结我的浏览器

Thanks! 谢谢！ :) :)

Answer 1

First : get your head away from any wall before reading this ;-) 首先：在阅读本文之前，请先将头移开墙壁；-)

You're using ad DOM 'rgb(,,)' string to define the colors : it expects integer R,G,B in 0..255. 您正在使用广告DOM'rgb（,,）'字符串定义颜色：它期望整数 R，G，B为0..255。

So just changing rndbtw to : 因此，只需将rndbtw更改为：

function rndbtw(range) { return  Math.floor((Math.random()*range[0])+range[1]) ; }

should bring back the colors !! 应该带回颜色！

粒子的代码不起作用。绘图时出错？

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-08-19 12:19:07

粒子的代码不起作用。 绘图时出错？

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-08-19 12:19:07

粒子的代码不起作用。绘图时出错？

解决方案1
0 已采纳 2014-08-19 12:19:07