// Block Object function Block(data, isfocused) { // hidden this.hidden = false; // stop displaying blocks after they have dropped well below the blockchain box // counting this.counted = false; // do not add me to any counters if I have already been counted // mempool updating (block data comes with information about the new size of the mempool) this.mempool_updated = false; // switch to only update the mempool once as the block crosses the mempool line this.mempool_count = data.mempool.count this.mempool_size = data.mempool.size // block data this.count = data.txcount; // store the time this block object was initialized (for debugging - make sure it is created as soon as websocket message received) this.time_initialized = hour() + ":" + minute() + ":" + second(); // console.log("Block Object Created: " + this.time_initialized); // console.log("New Mempool Count: " + data.mempool.count); // console.log("New Mempool Size: " + data.mempool.size); // diameter this.d = map(data.size, 0, 1600000, 20, 180, true) // 1.6MB is max size this.strokewidth = 4; // position this.x = width/2 - this.d/2; // center the block this.y = 0; // start the block at the top of the window if (isfocused == false) { // start block below blockchain box without updating any counters (because it was done while sketch was not focused) this.y = blockchain.y + blockchain.height; // - this.d - this.strokewidth/2; // start block in its holding position this.counted = true; // do not add to blocks mined counter, because it was incremented when we were not focused this.mempool_updated = true; // do not update the mempool, because it was changed when we were not focused } // drop this.velocity = 0; this.gravity = 0.25; // stick this.sticky = false; // bounce // this.elasticity = 0.6 + randomGaussian(0.0, 0.05); // add some noise // this.bounce = 0; // bounce count // this.chained = false; // switch to indicate if a block has hit the stack yet // color //this.r = 100; //this.g = 100; //this.b = 100; this.show = function() { strokeWeight(this.strokewidth); stroke(0); fill(mempool.c); // use same color as mempool rect(this.x, this.y, this.d, this.d); // Details // Size (MB) if (data.size > 10) { fill(0); textSize(16); noStroke(); textAlign(RIGHT); sizemb = (data.size/1000/1000).toFixed(2); text(sizemb + " MB", this.x - this.strokewidth*2, this.y + this.d - this.strokewidth*2) } // Tx Count if (data.size > 10) { fill(0); textSize(20); noStroke(); textAlign(CENTER); text(data.txcount.toLocaleString(), this.x + this.d/2, this.y + this.d/2) } // Time if (data.size > 10) { // map color from green to red based on time since block was mined (red = 20 mins = block more imminent) let time_since = unixtime - data.timestamp; let hue = map(time_since, 0, 1200, 120, 359, true); // 0 to 20 mins (1200 seconds) (green to red) fill(hue, 100, 38); textSize(18); noStroke(); textAlign(LEFT); text((fancyTimeFormat(time_since) + " ago"), this.x + this.d + this.strokewidth*3, this.y + this.d/2) } } this.stop = height; this.update = function(hold) { // Canvas Resizing this.x = width/2 - this.d/2; // center the block // set default value for whether to hold the block hold = hold || false; // Keep block stuck to bottom if it is being held and it has already hit the bottom if (hold && this.sticky) { this.y = blockchain.y + blockchain.height - this.d - this.strokewidth/2; this.velocity = 0; } // keep block at bottom if it is being held and hitting the bottom for the first time else if (hold && this.y >= blockchain.y + blockchain.height - this.d - this.strokewidth/2) { this.y = blockchain.y + blockchain.height - this.d - this.strokewidth/2; this.velocity = 0; this.sticky = true; // keep it at bottom next time now that it has hit it (e.g. when resizing canvas) } // drop as normal else { // drop this.velocity += this.gravity; this.y += this.velocity; } } }