Optimization issue (updated)

by MicahHauge

JavaScript

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

// timing stuff
var startTime = performance.now() / 1000;

// note scaling stuff
var noteWidth = canvasWidth / 52;
var whiteKeyLen = 120*noteWidth/23;
var blackKeyLen = 2/3*whiteKeyLen;
var blackKeyWidth = 7/12 * noteWidth;
var noteAreaHeight = canvasHeight;
var keyYPos = canvasHeight - whiteKeyLen;

// Divides the screen up into a grid. One second is one unit on the grid.
// So, it will take a note yGrid seconds to go from the top of the screen to the bottom.
// The update function will adjust the speed of notes based on ySlope to keep proportion.
var yGrid = 2;
var yScale = noteAreaHeight / yGrid;
var ySlope = (noteAreaHeight / 2 - noteAreaHeight) / (.5 * yGrid);

// Autodetect, create and append the renderer to the body element
var renderer = PIXI.autoDetectRenderer(canvasWidth, canvasHeight, { backgroundColor: 0xFFFFFF, antialias: false});
document.body.appendChild(renderer.view);

// Create the main stage for display objects
var stage = new PIXI.Container();

// notes array
var notes = [];

// note container
var noteGroup = new PIXI.ParticleContainer();

// note styling
var naturalNoteColor = 0x66ccff;

// var container = new PIXI.ParticleContainer();
var group = new PIXI.Container();

// create note graphic
var graphics = new PIXI.Graphics();
graphics.beginFill(naturalNoteColor);
graphics.drawRoundedRect(0, 0, blackKeyWidth, .15*yScale, 8);
graphics.endFill();

// create ONE texture that is used to make all sprites
var texture = graphics.generateTexture();

// function to create note object. Currently makes note graphc AND note sprite because I am comparing performance.
function Note (pitch, startTime, len) {
  // set timing and pitch
  this.startTime = startTime;
  this.stopTime = startTime + len;
  this.x = pitch * noteWidth + len;
  this.y = -1*startTime*yScale-len*yScale;

  // temp for test
  this.sprite = new PIXI.Sprite(texture);

  return this;
}


  // loop to create...