JavaScript Lnge eines Arrays (p5.js Library)

Tron36

Ensign
Registriert
Jan. 2011
Beiträge
209
Hallo Leute,

Ich versuche folgende JavaScript Datei zu analysieren:

Code:
var rockets = []; 
var sparkles = [];
var moving = true;
var gravity = 0.4;

function setup() {
    // put setup code here

    createCanvas(windowWidth, windowHeight);
    background(0);
    strokeWeight(1);

    colorMode(HSB);

    var thisRocket = new rocket();
    rockets.push(thisRocket);
    
    console.log("call setup");
}
//-----------------------------------------------------------------------------
function draw() {
//-----------------------------------------------------------------------------
    // put drawing code here
    translate(width / 2, height);
    background('rgba(0,0,0, 0.1)');
    
    for (var i = rockets.length - 1; i >= 0; i--) 
    {
        console.log(rockets.length);
        if(rockets[i].type == "Exploded")
            rockets.splice(i,1);
        else
            rockets[i].draw();
    }    
    for (var i = sparkles.length - 1; i >= 0; i--) 
    {
        if(sparkles[i].position.y > 0 || sparkles[i].brt <= 0)
            sparkles.splice(i,1);
        else
            sparkles[i].draw();
    }    

    if (int(random(0, 12)) == 0)
    {
        var thisRocket = new rocket();
        rockets.push(thisRocket);
    }
}

//-----------------------------------------------------------------------------
function rocket(position, speed, type, sparkler, afterblow)
//-----------------------------------------------------------------------------
{
//    stroke(255);

    this.position = createVector(int(random(-width / 2, width / 2)), 0);
    this.speed = createVector(random(-1,1), -random(10,22));
    this.sparkler = round(random(0,1)) == 0;
    this.afterblow = -1;
    
    this.fuse = random(-1,1);
    this.hue = round(random(0,360));

    this.type = "simple";
    //-----------------------------------------------------------------------------
    this.draw = function()
    //-----------------------------------------------------------------------------
    {
        stroke(255);
        if(this.fuse < this.speed.y || this.afterblow >= 0)
            this.explode();

        if (this.sparkler) 
        {
            sparkleDir = random(0, TWO_PI);
            sparkleVel = random(0,1);
            sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
            thisSparkle = new sparkle(createVector(this.position.x+sparkleSpd.x, this.position.y+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
            sparkles.push(thisSparkle);
        }
        stroke(this.hue+round(random(-10,+10)), random(0,20), 90);
        
        point(this.position.x,this.position.y);

        this.position.add(this.speed);
        this.speed.y = this.speed.y + gravity;
    }
    //-----------------------------------------------------------------------------
    this.explode = function()
    //-----------------------------------------------------------------------------
    {
        for (var i = 0; i < 100; i++) 
        {
            sparkleDir = random(0, TWO_PI);
            sparkleVel = random(0,5);
            sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
            thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), 0);
            sparkles.push(thisSparkle);
        }
        this.type = "Exploded";
    }
}
//--------------------------------------------------------------------------
function sparkle(position, speed, fade, hue, sat, type)
{
    this.position = position.copy();
    this.speed = speed.copy(); 
    this.fade = (fade == undefined ? 5 : fade);
    this.hue = (hue == undefined ? 360 : hue);
    this.sat = (sat == undefined ? 0 : sat);
    this.type = (type == undefined ? "default" : type);

    this.brt = 255;

    this.burntime=0;
    //----------------------------------------------------------------
    this.draw = function()
    //----------------------------------------------------------------
    {
        stroke(this.hue, this.sat, this.brt);
        newPositionX = this.position.x + log(this.burntime) * 8 * this.speed.x;
        newPositionY = this.position.y + log(this.burntime) * 8 * this.speed.y + this.burntime * gravity;

        point(newPositionX, newPositionY);
        
        this.brt = this.brt - fade;

        this.burntime++;

    }
}
//--------------------------------------------------------------------------
function touchStarted() 
{
    if(moving)
    {
        moving = false; 
        strokeWeight(1);
        fill(255);
        rect(width/2-30, -height+20, 10, 30);
        rect(width/2-50, -height+20, 10, 30);
        noLoop();
    }
    else
    { 
        moving = true;
        loop();
    } 
    // prevent default
      return false;
}
Es wir in der folgenden HTML Datei aufgerufen:
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
    <style> body {padding: 0; margin: 0;} </style>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
    <script src="rocket.js"></script>
  </head>
  <body>
  </body>
</html>

Was ich nicht verstehe ist, dass dem array nur ein einziges mal (!) in der Zeile 16 ein "Wert" zugewiesen wird. Die Konsolenausgabe in der Zeile jedoch werte bis zu (wenn ich mich recht entsinne) 8 oder 9 ausgegeben hat. Ich weiß jedoch wie dieser hohen Wert zustande kommt.

Ich hoffe ihr könnt mir helfen.

Lg Tron36
 
Was ist mit Zeile 46?
 

Ähnliche Themen

Zurück
Oben