initDestroyHighlight: function() {
            var graphics = new PIXI.Graphics();
            var w = this.width;
            var h = this.height;
            var m = this.thickness;
            var d = this.depth;

            // Draw outline
            graphics.beginFill(this.destroyHighlightOutlineColor, this.destroyHighlightOutlineAlpha);
            graphics.drawRect(0, 0, w, m);             // Top piece
            graphics.drawRect(0, h - m, w, m);         // Bottom piece
            graphics.drawRect(0, m, m, h - m - m);     // Left piece
            graphics.drawRect(w - m, m, m, h - m - m); // Right piece
            graphics.endFill();

            // Fill in center
            graphics.beginFill(this.destroyHighlightFillColor, this.destroyHighlightFillAlpha);
            graphics.drawRect(m, m, w - m * 2, h - m * 2);
            graphics.endFill();

            // Hide it by default
            graphics.visible = false;

            // Add it to the display object
            this.displayObject.addChild(graphics);
            this.destroyHighlight = graphics;
        },
Example #2
0
 graphics.setHeight = function(height) {
   graphics.clear()
   graphics.beginFill(noteColor[number])
   graphics.drawRect(0, -height - theme.note.height, noteWidth[number], theme.note.height + height)
   graphics.beginFill(0xFFFFFF)
   graphics.drawRect(0, -height - theme.note.height, noteWidth[number], theme.note.height / 4)
 }
Example #3
0
        initLiquid: function() {
            var padding = this.padding;
            var outlineFix = this.outlineFix;
            var radius = Math.floor(this.bulbDiameter / 2) - padding;
            var halfWidth = Math.floor(this.tubeWidth / 2) - padding;
            var width = halfWidth * 2;
            var height = Math.floor(this.tubeHeight) - padding;

            var bulbLiquid = new PIXI.Graphics();
            bulbLiquid.beginFill(this.liquidColor, 1);
            bulbLiquid.drawCircle(outlineFix, outlineFix, radius);
            bulbLiquid.endFill();

            var tubeLiquid = new PIXI.Graphics();
            var tubeLiquidMask = new PIXI.Graphics();

            var x = -halfWidth + outlineFix;
            var y = -radius - height + outlineFix - padding * 2;
            tubeLiquidMask.beginFill(0x000000, 1);
            tubeLiquidMask.drawRect(x, y, width, -y);
            tubeLiquidMask.drawCircle(outlineFix, y, halfWidth);
            tubeLiquidMask.endFill();
            tubeLiquid.mask = tubeLiquidMask;

            this.displayObject.addChild(bulbLiquid);
            this.displayObject.addChild(tubeLiquid);
            this.displayObject.addChild(tubeLiquidMask);

            this.tubeLiquid = tubeLiquid;

            this.drawTubeLiquid();
        },
Example #4
0
 create: function() {
   var graphics = new pixi.Graphics()
   graphics.beginFill(0x9b9695)
   graphics.drawRect(noteX[0], -1, totalWidth, 1)
   graphics.beginFill(0x8b8685)
   graphics.drawRect(noteX[0], -2, totalWidth, 1)
   return graphics
 }
Example #5
0
        initButtons: function() {
            var w = this.width;
            var h = this.height;
            var m = this.margin;
            var btnWidth = (w - m * 2 - 4) / 2;
            var btnHeight = this.btnHeight;

            var textSettings = {
                font: '17px Helvetica Neue',
                fill: '#fff'
            };

            // Plot button
            var plotBtnBg = new PIXI.Graphics();
            plotBtnBg.beginFill(this.plotBtnColor, 1);
            plotBtnBg.drawRect(0, 0, btnWidth, btnHeight);
            plotBtnBg.endFill();

            var plotBtnText = new PIXI.Text('Plot', textSettings);
            plotBtnText.resolution = this.getResolution();
            plotBtnText.anchor.x = 0.49;
            plotBtnText.anchor.y = 0.42;
            plotBtnText.x = btnWidth / 2;
            plotBtnText.y = btnHeight / 2;

            this.plotBtn = new PIXI.Container();
            this.plotBtn.x = -w / 2 + m;
            this.plotBtn.y = h - btnHeight;
            this.plotBtn.addChild(plotBtnBg);
            this.plotBtn.addChild(plotBtnText);

            // Clear button
            var clearBtnBg = new PIXI.Graphics();
            clearBtnBg.beginFill(this.clearBtnColor, 1);
            clearBtnBg.drawRect(0, 0, btnWidth, btnHeight);
            clearBtnBg.endFill();

            var clearBtnText = new PIXI.Text('Clear', textSettings);
            clearBtnText.resolution = this.getResolution();
            clearBtnText.anchor.x = 0.492;
            clearBtnText.anchor.y = 0.391;
            clearBtnText.x = btnWidth / 2;
            clearBtnText.y = btnHeight / 2;

            this.clearBtn = new PIXI.Container();
            this.clearBtn.x = 2;
            this.clearBtn.y = h - btnHeight;
            this.clearBtn.addChild(clearBtnBg);
            this.clearBtn.addChild(clearBtnText);

            // Add them
            this.displayObject.addChild(this.plotBtn);
            this.displayObject.addChild(this.clearBtn);
        },
Example #6
0
function rect(reverse){

  var g = new PIXI.Graphics()
  if(reverse){
    g.beginFill(0xffffff)
  }else{
    g.beginFill(0x000000)
  }

  g.drawRect(0,0,rw,rw)
  g.endFill()

  return g
}
Example #7
0
        initMVT: function() {
            var pixelsPerFemtometer;

            if (AppView.windowIsShort()) {
                pixelsPerFemtometer = 3;
            }
            else {
                pixelsPerFemtometer = 4;
            }

            this.viewOriginX = 0;
            this.viewOriginY = 0;

            // The center of the screen is actually (5, 5) in the original
            this.mvt = ModelViewTransform.createSinglePointScaleMapping(
                new Vector2(0, 0),
                new Vector2(this.viewOriginX, this.viewOriginY),
                pixelsPerFemtometer
            );

            this.simulation.setNucleusBounds(
                this.mvt.viewToModelX(this.getLeftPadding()),
                this.mvt.viewToModelY(this.getTopPadding()),
                this.mvt.viewToModelDeltaX(this.getAvailableWidth()),
                this.mvt.viewToModelDeltaY(this.getAvailableHeight())
            );

            if (showNucleusPlacementDebuggingGraphics) {
                var graphics = new PIXI.Graphics();
                graphics.beginFill(0xFF0000, 1);
                graphics.drawRect(this.getLeftPadding(), this.getTopPadding(), this.getAvailableWidth(), this.getAvailableHeight());
                graphics.endFill();
                this.stage.addChild(graphics);    
            }
        },
        initPanel: function() {
            var halfWidth = this.width / 2;

            // Draw the shadow
            var outline = new PiecewiseCurve();

            outline
                .moveTo(0, 0)
                .lineTo(this.width, 0)
                .lineTo(this.width, this.height)
                .lineTo(0, this.height)
                .close();

            var drawStyle = {
                lineWidth: 11,
                strokeStyle: 'rgba(0,0,0,0)',
                shadowBlur: 11,
                fillStyle: 'rgba(0,0,0,1)'
            };

            var shadow = PIXI.Sprite.fromPiecewiseCurve(outline, drawStyle);
            shadow.alpha = 0.13;
            this.displayObject.addChild(shadow);

            // Draw the panel
            var graphics = new PIXI.Graphics();
            graphics.beginFill(this.panelColor, 0.78);
            graphics.drawRect(0, 0, this.width, this.height);
            graphics.endFill();

            this.displayObject.addChild(graphics);
        },
Example #9
0
        initBackground: function() {
            if (!this.showConnector) {
                // If there's no connector, just make the (0, 0) be the center of the gauge
                this.gaugeCenter = new Vector2();
            }
            else {
                var offset = this.radius + this.connectorLength;
                this.gaugeCenter = new Vector2(
                    offset * -Math.cos(this.connectorAngle),
                    offset * -Math.sin(this.connectorAngle)
                );

                // Create the connector as a gradient-filled box going to the right
                var gradientTexture = PIXI.Texture.generateHorizontalGradientTexture(
                    offset, this.connectorWidth, this.connectorColor1, this.connectorColor2
                );
                var connector = new PIXI.Sprite(gradientTexture);

                // Then rotate it and move it into position
                connector.rotation = this.connectorAngle;
                connector.x = this.gaugeCenter.x;
                connector.y = this.gaugeCenter.y;
                connector.anchor.y = 0.5;

                this.displayObject.addChild(connector);
            }
                
            var background = new PIXI.Graphics();
            background.beginFill(this.backgroundColor, 1);
            background.lineStyle(this.outlineThickness, this.outlineColor, 1);
            background.drawCircle(this.gaugeCenter.x, this.gaugeCenter.y, this.radius);
            background.endFill();

            this.displayObject.addChild(background);
        },
Example #10
0
theme.layer("Panel", function(layer) {
  var panel = new pixi.Graphics()
  panel.beginFill(0x8b8685)
  panel.drawRect(0, 512, 800, 600 - 512)
  panel.drawRect(noteX[0] + totalWidth, 0, 12, 512)
  panel.drawRect(noteX[0] - 12, 0, 12, 512)
  layer.addChild(panel)
})
Example #11
0
 drawDebugOrigin: function(parent, color) {
     var origin = new PIXI.Graphics();
     origin.beginFill(color !== undefined ? color : 0x0000FF, 1);
     origin.drawCircle(0, 0, 3);
     origin.endFill();
     if (parent === undefined)
         this.displayObject.addChild(origin);
     else
         parent.addChild(origin);
 },
Example #12
0
 noteX.forEach(function(x, column) {
   var width = noteWidth[column]
   var graphics = new pixi.Graphics()
   graphics.beginFill(colors[column])
   graphics.drawRect(x, 0, width, 512)
   theme.bind(function() {
     graphics.alpha = state.buttons[column] ? 0.33 : 0
   })
   layer.addChild(graphics)
 })
Example #13
0
        initBackground: function() {
            // Sky gradient is painted in the background by css, but we can
            // Create the ground
            var groundY = Math.round(this.height * 0.82);
            var ground = new PIXI.Graphics();
            ground.y = groundY;
            ground.beginFill(Colors.parseHex(Constants.SceneView.GROUND_COLOR), 1);
            ground.drawRect(0, 0, this.width, this.height  - groundY);
            ground.endFill();

            this.backLayer.addChild(ground);
        },
        initPanel: function() {
            var panel = new PIXI.Container();
            
            var background = new PIXI.Graphics();
            var controlArea = new PIXI.Graphics();
            panel.addChild(background);
            panel.addChild(controlArea);

            this.panel = panel;
            this.controlArea = controlArea;
            this.controlArea.buttonMode = true;

            var pw = ExternalFieldControlView.PANEL_WIDTH;
            var ph = ExternalFieldControlView.PANEL_HEIGHT;
            var aw = ExternalFieldControlView.AREA_WIDTH;
            var ah = ExternalFieldControlView.AREA_HEIGHT;

            background.clear();
            background.beginFill(PANEL_COLOR, ExternalFieldControlView.PANEL_ALPHA);
            background.drawRect(-pw, -ph, pw, ph);
            background.endFill();

            controlArea.clear();
            controlArea.x = -ExternalFieldControlView.AREA_WIDTH  - ExternalFieldControlView.PANEL_PADDING;
            controlArea.y = -ExternalFieldControlView.AREA_HEIGHT - ExternalFieldControlView.PANEL_PADDING;
            controlArea.beginFill(ARROW_AREA_COLOR, ExternalFieldControlView.ARROW_AREA_ALPHA);
            controlArea.drawRect(0, 0, aw, ah);
            controlArea.endFill();
            
            this.areaMask = new PIXI.Graphics();
            this.areaMask.x = -ExternalFieldControlView.AREA_WIDTH  - ExternalFieldControlView.PANEL_PADDING;
            this.areaMask.y = -ExternalFieldControlView.AREA_HEIGHT - ExternalFieldControlView.PANEL_PADDING;
            this.areaMask.beginFill(0, 1);
            this.areaMask.drawRect(0, 0, aw, ah);
            this.areaMask.endFill();

            this.displayObject.addChild(panel);
            this.displayObject.addChild(this.areaMask);
        },
        initPlot: function() {
            var plotX = this.margin;
            var plotY = this.margin + 19;
            var plotWidth  = this.width  - (plotX * 2);
            var plotHeight = this.height - (plotY + 26);

            var plotBg = new PIXI.Graphics();
            // Draw border
            plotBg.beginFill(0xCCCCCC, 1);
            plotBg.drawRect(plotX - 1, plotY - 1, plotWidth + 2, plotHeight + 2);
            plotBg.endFill();
            // Draw fill color
            plotBg.beginFill(0xFFFFFF, 1);
            plotBg.drawRect(plotX, plotY, plotWidth, plotHeight);
            plotBg.endFill();

            var plotGraphics = new PIXI.Graphics();
            plotGraphics.x = plotX;
            plotGraphics.y = plotY;

            this.displayObject.addChild(plotBg);
            this.displayObject.addChild(plotGraphics);

            this.plotX = plotX;
            this.plotY = plotY;
            this.plotWidth = plotWidth;
            this.plotHeight = plotHeight;
            this.plotGraphics = plotGraphics;

            this.plotDataLength = plotWidth;
            this.plotData = [];

            this.tickX = 0;
            this.tickSpace = 20;

            this.yScale = plotHeight / (this.maxY - this.minY);
            this.yOffset = Math.floor(this.minY * this.yScale);
        },
        initPanel: function() {
            // Draw the shadow
            var rectangle = new Rectangle(0, 0, this.width, this.height);
            var shadow = PIXI.createDropShadow(rectangle);
            this.displayObject.addChild(shadow);

            // Draw the panel
            var graphics = new PIXI.Graphics();
            graphics.beginFill(this.bgColor, this.bgAlpha);
            graphics.drawRect(0, 0, this.width, this.height);
            graphics.endFill();

            this.displayObject.addChild(graphics);
        },
        initLegend: function() {
            var graphics = new PIXI.Graphics();
            graphics.beginFill(this.legendColor, this.legendAlpha);
            graphics.drawRect(0, 0, FissionEnergyChartView.LEGEND_WIDTH, FissionEnergyChartView.LEGEND_HEIGHT);
            graphics.endFill();

            var x = 15;
            var w = 20;
            var y1 = 20;
            var y2 = FissionEnergyChartView.LEGEND_HEIGHT - 20;

            graphics.lineStyle(FissionEnergyChartView.LINE_WIDTH, POTENTIAL_LINE_COLOR, FissionEnergyChartView.LINE_ALPHA);
            graphics.moveTo(x, y1);
            graphics.lineTo(x + w, y1);
            graphics.lineStyle(FissionEnergyChartView.LINE_WIDTH, TOTAL_ENERGY_LINE_COLOR, FissionEnergyChartView.LINE_ALPHA);
            graphics.moveTo(x, y2);
            graphics.lineTo(x + w, y2);

            var textSettings = {
                font: Constants.FissionEnergyChartView.LEGEND_LABEL_FONT,
                fill: Constants.FissionEnergyChartView.LEGEND_LABEL_COLOR,
                align: 'center'
            };
            var labelX = x + w + x;
            var potentialEnergyLabel = new PIXI.Text('Potential Energy', textSettings);
            var totalEnergyLabel = new PIXI.Text('Total Energy', textSettings);
            potentialEnergyLabel.x = labelX;
            potentialEnergyLabel.y = y1;
            potentialEnergyLabel.anchor.y = 0.5;
            potentialEnergyLabel.resolution = this.getResolution();
            totalEnergyLabel.x = labelX;
            totalEnergyLabel.y = y2;
            totalEnergyLabel.anchor.y = 0.5;
            totalEnergyLabel.resolution = this.getResolution();

            var textContainer = new PIXI.Container();
            textContainer.addChild(potentialEnergyLabel);
            textContainer.addChild(totalEnergyLabel);

            var legend = new PIXI.Container();
            legend.x = this.graphOriginX + this.graphWidth - FissionEnergyChartView.LEGEND_WIDTH;
            legend.y = this.graphOriginY - FissionEnergyChartView.LEGEND_Y - FissionEnergyChartView.LEGEND_HEIGHT;
            legend.addChild(graphics);
            legend.addChild(textContainer);

            this.displayObject.addChild(legend);
        },
Example #18
0
        initHoverGraphics: function() {
            var mask = this.circuit.get('schematic') ?
                Assets.createSprite(this.schematicMaskImagePath) :
                Assets.createSprite(this.maskImagePath);
            mask.anchor.x = this.anchorX;
            mask.anchor.y = this.anchorY;

            var bounds = mask.getLocalBounds();
            var hoverGraphics = new PIXI.Graphics();
            hoverGraphics.beginFill(this.selectionColor, 1);
            hoverGraphics.drawRect(bounds.x - 7, bounds.y - 7, bounds.width + 14, bounds.height + 14);
            hoverGraphics.endFill();
            hoverGraphics.mask = mask;

            this.hoverLayer.addChild(mask);
            this.hoverLayer.addChild(hoverGraphics);
        },
Example #19
0
        initPanel: function() {
            var halfWidth = this.width / 2;

            // Draw the shadow
            var outline = new PiecewiseCurve();
            var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
            var radius = this.sensorOuterRadius;

            outline
                .moveTo(-halfWidth, 0)
                .lineTo(-radius, 0)
                .curveTo(
                    -radius, 0 -radius * kappa, 
                    -radius*kappa, -radius,
                    0, -radius
                )
                .curveTo(
                    radius * kappa, -radius,
                    radius, -radius * kappa,
                    radius, 0
                )
                .lineTo(halfWidth, 0)
                .lineTo(halfWidth, this.height)
                .lineTo(-halfWidth, this.height)
                .close();

            var drawStyle = {
                lineWidth: 11,
                strokeStyle: 'rgba(0,0,0,0)',
                shadowBlur: 11,
                fillStyle: 'rgba(0,0,0,1)'
            };

            var shadow = PIXI.Sprite.fromPiecewiseCurve(outline, drawStyle);
            shadow.alpha = 0.3;
            this.displayObject.addChild(shadow);

            // Draw the panel
            var graphics = new PIXI.Graphics();
            graphics.beginFill(this.panelColor, 1);
            graphics.drawRect(-halfWidth, 0, this.width, this.height);
            graphics.drawCircle(0, 0, this.sensorOuterRadius);
            graphics.endFill();

            this.displayObject.addChild(graphics);
        },
        initTube: function() {
            this.tube = Assets.createSprite(Assets.Images.AIR_PROBE);
            this.tube.anchor.x = 0.5;
            this.tube.scale.x = this.tube.scale.y = 0.5;
            this.tube.y = -this.tube.height;
            this.tubeOutY = -this.tube.height * 0.5;
            this.tubeInY = -this.tube.height;

            var mask = new PIXI.Graphics();
            mask.beginFill();
            mask.drawRect(-this.panelWidth / 2, 0, this.panelWidth, this.tube.height);
            mask.endFill();
            this.tube.mask = mask;

            this.tubeContainer = new PIXI.Container();
            this.tubeContainer.addChild(this.tube);
            this.tubeContainer.addChild(mask);

            this.displayObject.addChild(this.tubeContainer);
        },
Example #21
0
        initShape: function() {
            var background = new PIXI.Graphics();
            var outline    = new PIXI.Graphics();

            // Only want to deal in whole pixels so it looks crisp
            var radius = Math.floor(this.bulbDiameter / 2);
            var halfWidth = Math.floor(this.tubeWidth / 2);
            var width = halfWidth * 2;
            var height = Math.floor(this.tubeHeight);

            // Filling it is easy.
            background.beginFill(this.fillColor, 1);
            background.drawCircle(0, 0, radius);
            background.drawRect(-halfWidth, 0, width, -radius - height);
            background.drawCircle(0, -radius - height, halfWidth);
            background.endFill();

            // (Except that applying an alpha to the graphics is actually buggy,
            //   so I'll create a texture and set an alpha on a sprite.)
            var bgSprite = new PIXI.Sprite(background.generateTexture());
            bgSprite.anchor.x = 0.5;
            bgSprite.anchor.y = (bgSprite.height - radius) / bgSprite.height;
            bgSprite.alpha = this.fillAlpha;

            // It's drawing the outline that's tricky.
            var theta = Math.acos(halfWidth / radius);
            var tubeBulbIntersectionY = Math.round(-Math.sqrt(Math.pow(radius, 2) - Math.pow(halfWidth, 2)));

            outline.lineStyle(this.lineWidth, this.lineColor, this.lineAlpha);
            outline.moveTo(-halfWidth, tubeBulbIntersectionY);
            outline.lineTo(-halfWidth, -radius - height);
            outline.moveTo(halfWidth, -radius - height);
            outline.lineTo(halfWidth, tubeBulbIntersectionY);
            outline.moveTo(-halfWidth, -radius - height);
            outline.arc(0, -radius - height, halfWidth, Math.PI, 0);
            outline.arc(0, 0, radius, -theta, Math.PI + theta);

            this.displayObject.addChild(bgSprite);
            this.displayObject.addChild(outline);
        },
Example #22
0
domready(function () {

    // create a renderer instance
    var renderer = new PIXI.WebGLRenderer(600, 600, null, false, true);//autoDetectRenderer(400, 300);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);
    requestAnimFrame( animate );

    // draw a circle
    var graphics = new PIXI.Graphics();
    graphics.lineStyle(0);
    graphics.beginFill(0xFFFFFF, 0.5);

    var grid = new Grid();
    var adjacencyList = new AdjacencyList(graphics, grid);

    function makeNodes() {
        var arr = [];
        var i = 0;

        while (i < 9) {
            arr[i] = i;
            i++;
        }

        async.each(arr, function (index, callback) {
            var node = new Node();
            adjacencyList.addNode(index, node);
            callback();
        }, function (err) {
           if (err) throw err;
        });

    //    var n2 = new Node();
  //      adjacencyList.addNode(3, n2);
//
    //    var n3 = new Node();
   //     adjacencyList.addNode(3, n3);

      //  n1.addConnection(n2);
//        n3.addConnection(n1);

    }

    makeNodes();
    stage.addChild(graphics);


    function animate() {
        requestAnimFrame( animate );


        // just for fun, lets rotate mr rabbit a little
        //bunny.rotation += 0.1;


        // render the stage
        graphics.clear();
        adjacencyList.draw();
        renderer.render(stage);
    }
});
Example #23
0
 stage.setProgress = function(progress) {
   bar.beginFill(0xCCCCCC)
   bar.drawRect(0, 400, 800, 80)
   bar.beginFill(0x000000)
   bar.drawRect(20, 420, 760 * progress, 40)
 }
        initBackground: function() {
            var bg = new PIXI.Graphics();
            var w = this.width;
            var h = this.height;
            var m = this.thickness;
            var d = this.depth;

            // Draw outline
            bg.beginFill(this.outlineColor, this.outlineAlpha);
            bg.drawRect(0, 0, w, m);             // Top piece
            bg.drawRect(0, h - m, w, m);         // Bottom piece
            bg.drawRect(0, m, m, h - m - m);     // Left piece
            bg.drawRect(w - m, m, m, h - m - m); // Right piece
            bg.endFill();

            if (this.showDepth) {
                // Draw inside walls of the box
                // Top side (will be a little darker to simulate shadow)
                bg.beginFill(this.insideShadowColor, this.insideAlpha);
                bg.moveTo(m, m);
                bg.lineTo(w - m, m);
                bg.lineTo(w - m - d, m + d);
                bg.lineTo(m + d, m + d);
                bg.endFill();

                // Side sides
                bg.beginFill(this.insideColor, this.insideAlpha);
                bg.moveTo(w - m, m);
                bg.lineTo(w - m, h - m);
                bg.lineTo(w - m - d, h - m - d);
                bg.lineTo(w - m - d, m + d);
                bg.endFill();
                bg.beginFill(this.insideColor, this.insideAlpha);
                bg.moveTo(m, m);
                bg.lineTo(m + d, m + d);
                bg.lineTo(m + d, h - m - d);
                bg.lineTo(m, h - m);
                bg.endFill();

                // Bottom side (will be a bit less transparent to simulate light hiting it)
                bg.beginFill(this.insideColor, this.insideAlpha * 1.3);
                bg.moveTo(m, h - m);
                bg.lineTo(m + d, h - m - d);
                bg.lineTo(w - m - d, h - m - d);
                bg.lineTo(w - m, h - m);
                bg.endFill();

                // Draw bottom of the box
                bg.beginFill(this.bottomColor, this.bottomAlpha);
                bg.drawRect(m + d, m + d, w - m * 2 - d * 2, h - m * 2 - d * 2);
                bg.endFill();
            }
            else {
                // Fill in the center
                bg.beginFill(this.fillColor, this.fillAlpha);
                bg.drawRect(m, m, w - m * 2, h - m * 2);
                bg.endFill();
            }

            bg.buttonMode = true;

            // Add it to the display object
            this.displayObject.addChild(bg);
            this.background = bg;
        },
Example #25
0
        initPlateChargePanel: function() {
            var width  = Math.round(this.mvt.modelToViewDeltaX(AppView.windowIsShort() ? 0.0100 : 0.0075));
            var height = Math.round(this.mvt.modelToViewDeltaX(0.015));
            var capacitorCenter = this.mvt.modelToView(this.model.capacitors.first().get('position'));
            var x = Math.round(capacitorCenter.x - width / 2) - Math.round(this.mvt.modelToViewDeltaX(0.0031));
            var y = AppView.windowIsShort() ? 12 : 20;

            var panel = new PIXI.Graphics();
            panel.x = x;
            panel.y = y;
            panel.beginFill(0xFFFFFF, 0.7);
            panel.drawRect(0, 0, width, height);
            panel.endFill();
            this.displayObject.addChild(panel);

            var sliderHeight = Math.floor(height * (AppView.windowIsShort() ? 0.68 : 0.75));

            var sliderView = new SliderView({
                start: 0,
                range: {
                    min: -this.maxPlateCharge,
                    max:  this.maxPlateCharge
                },
                orientation: 'vertical',
                direction: 'rtl',

                width: sliderHeight,
                backgroundHeight: AppView.windowIsShort() ? 3 : 4,
                backgroundColor: '#A2B8C8',
                backgroundAlpha: 1,
                handleSize: 11
            });

            // Position it
            sliderView.displayObject.x = Math.round(width * 0.20);
            sliderView.displayObject.y = Math.round(height / 2 - sliderView.displayObject.height / 2);
            

            // Bind events for it
            this.listenTo(sliderView, 'slide', function(value, prev) {
                this.model.set('disconnectedPlateCharge', value);
            });

            this.listenTo(sliderView, 'drag-end', function() {
                // Snap to zero if we get close
                if (Math.abs(sliderView.val()) < this.maxPlateCharge * 0.05) {
                    sliderView.val(0);
                    this.model.set('disconnectedPlateCharge', 0);
                }
            }); 

            // Save a reference
            this.plateChargeSlider = sliderView;

            // Create labels
            var fontFamily = 'Helvetica Neue';
            var markerStyle = {
                font: 'bold 11px ' + fontFamily,
                fill: '#000'
            };

            var plus  = new PIXI.Text('Lots (+)', markerStyle);
            var none  = new PIXI.Text('None',     markerStyle);
            var minus = new PIXI.Text('Lots (-)', markerStyle);

            var resolution = this.getResolution();
            plus.resolution = resolution;
            none.resolution = resolution;
            minus.resolution = resolution;

            var markerX = Math.round(width * 0.36);
            var plusY  = Math.round(sliderView.displayObject.y);
            var noneY  = Math.round(sliderView.displayObject.y + sliderView.displayObject.height / 2) - 1;
            var minusY = Math.round(sliderView.displayObject.y + sliderView.displayObject.height) - 1;

            plus.x = none.x = minus.x = markerX;

            plus.y  = plusY;
            none.y  = noneY;
            minus.y = minusY;

            plus.anchor.y = none.anchor.y = minus.anchor.y = 0.4;

            var lineStartX = sliderView.displayObject.x;
            var lineEndX = markerX - 5;
            var lines = new PIXI.Graphics();
            lines.lineStyle(1, 0xA2B8C8, 1);
            lines.moveTo(lineStartX, plusY);
            lines.lineTo(lineEndX,   plusY);
            lines.moveTo(lineStartX, noneY);
            lines.lineTo(lineEndX,   noneY);
            lines.moveTo(lineStartX, minusY);
            lines.lineTo(lineEndX,   minusY);

            var caption = new PIXI.Text('Plate Charge (Top)', {
                font: 'bold 14px Helvetica Neue',
                fill: '#000'
            });
            caption.resolution = resolution;
            caption.x = Math.round(width / 2 - caption.width / 2);
            caption.y = Math.round(height + 4);

            panel.addChild(lines);
            panel.addChild(plus);
            panel.addChild(none);
            panel.addChild(minus);
            panel.addChild(sliderView.displayObject);
            panel.addChild(caption);

            panel.visible = false;
            this.plateChargePanel = panel;
        },
        initCapacitanceControlPanel: function() {
            var width  = Math.round(this.mvt.modelToViewDeltaX(AppView.windowIsShort() ? 0.004 : 0.003));
            var height = Math.round(this.mvt.modelToViewDeltaX(0.0088));
            var xOffset = -this.mvt.modelToViewDeltaX(-0.010);
            var capacitorCenter = this.mvt.modelToView(this.model.get('position'));
            var x = Math.round(capacitorCenter.x - xOffset);
            var y = Math.round(capacitorCenter.y - height / 2);

            var panel = new PIXI.Graphics();
            panel.x = x;
            panel.y = y;
            panel.beginFill(0xFFFFFF, 0.7);
            panel.drawRect(0, 0, width, height);
            panel.endFill();
            this.displayObject.addChild(panel);

            var sliderHeight = Math.floor(height * (AppView.windowIsShort() ? 0.68 : 0.75));

            var sliderView = new SliderView({
                start: Constants.CAPACITANCE_RANGE.min,
                range: {
                    min: Constants.CAPACITANCE_RANGE.min,
                    max: Constants.CAPACITANCE_RANGE.max
                },
                orientation: 'vertical',
                direction: 'rtl',

                width: sliderHeight,
                backgroundHeight: AppView.windowIsShort() ? 3 : 4,
                backgroundColor: '#A2B8C8',
                backgroundAlpha: 1,
                handleSize: 11
            });

            // Position it
            sliderView.displayObject.x = Math.round(width / 2);
            sliderView.displayObject.y = Math.round(height / 2 - sliderHeight / 2);

            // Bind events for it
            this.listenTo(sliderView, 'slide', function(value, prev) {
                this.model.setTotalCapacitance(value);
                var displayCapacitance = value / (Math.pow(10, Constants.CAPACITANCE_CONTROL_EXPONENT));
                this.capacitanceValue.text = displayCapacitance.toFixed(2) + this.capacitanceSuffix;
            });

            // Save a reference
            this.capacitanceSlider = sliderView;

            // Create labels
            this.capacitanceTitle = new PIXI.Text('Capacitance', this.labelTitleStyle);
            this.capacitanceTitle.resolution = this.getResolution();
            this.capacitanceTitle.x = Math.round(width / 2 - this.capacitanceTitle.width / 2);
            this.capacitanceTitle.y = Math.round(height + 4);

            this.capacitanceSuffix = 'x10     F';
            this.capacitanceValue = new PIXI.Text('1.00' + this.capacitanceSuffix, this.labelValueStyle);
            this.capacitanceValue.resolution = this.getResolution();
            this.capacitanceValue.x = Math.round(width / 2 - this.capacitanceValue.width / 2);
            this.capacitanceValue.y = Math.round(height + 24);

            this.capacitanceValuePower = new PIXI.Text(Constants.CAPACITANCE_CONTROL_EXPONENT, this.labelValuePowerStyle);
            this.capacitanceValuePower.resolution = this.getResolution();
            this.capacitanceValuePower.x = Math.round(width / 2 + this.capacitanceValue.width * 0.15);
            this.capacitanceValuePower.y = Math.round(height + 20);

            panel.addChild(sliderView.displayObject);
            panel.addChild(this.capacitanceTitle);
            panel.addChild(this.capacitanceValue);
            panel.addChild(this.capacitanceValuePower);

            this.capacitancePanel = panel;
        },
Example #27
0
        initAtomCanister: function() {
            var canisterX;
            var canisterY;
            var canisterWidth;

            if (AppView.windowIsShort()) {
                canisterX = 21;
                canisterY = 228;
                canisterWidth = 160;
            }
            else {
                canisterX = 534;
                canisterY = 440;
                canisterWidth = 160;
            }

            this.atomCanisterView = new AtomCanisterView({
                simulation: this.simulation,
                width: canisterWidth,
                mvt: this.mvt,
                dummyLayer: this.dummyLayer,
                renderer: this.renderer,
                preferredInterNucleusDistance: Constants.PREFERRED_INTER_NUCLEUS_DISTANCE,
                minNucleusToObstacleDistance: Constants.MIN_NUCLEUS_TO_OBSTACLE_DISTANCE,
                hideNucleons: true,
                atomScale: 2.5
            });

            this.atomCanisterView.displayObject.x = canisterX;
            this.atomCanisterView.displayObject.y = canisterY;

            // Position the bucket buttons underneath
            var top = this.atomCanisterView.displayObject.y + 140;
            this.$bucketButtonsWrapper.css('top', top + 'px');

            if (AppView.windowIsShort()) {
                var left = this.atomCanisterView.displayObject.x + this.atomCanisterView.width / 2;
                this.$bucketButtonsWrapper.css('left', left + 'px'); 
            }
            else {
                var right = this.width - this.atomCanisterView.displayObject.x - this.atomCanisterView.width / 2;
                this.$bucketButtonsWrapper.css('right', right + 'px');    
            }

            // Calculate the bounds of the areas to be avoided when placing atoms
            var buttonHeight = this.$bucketButtonsWrapper.find('button').height();
            var resetButtonPos = this.$resetButton.position();
            var bucketButtonsRect = new Rectangle(canisterX, top, this.atomCanisterView.width, buttonHeight);
            var resetButtonRect = new Rectangle(resetButtonPos.left, resetButtonPos.top, canisterWidth, 46);
            this.atomCanisterView.setAreasToAvoid([
                bucketButtonsRect,
                resetButtonRect
            ]);

            if (showNucleusPlacementDebuggingGraphics) {
                var graphics = new PIXI.Graphics();
                graphics.beginFill();
                for (var i = 0; i < this.atomCanisterView.modelAreasToAvoid.length; i++) {
                    var viewArea = this.mvt.modelToView(this.atomCanisterView.modelAreasToAvoid[i]);
                    graphics.drawRect(viewArea.x, viewArea.y, viewArea.w, viewArea.h);
                }
                graphics.endFill();
                this.stage.addChild(graphics);    
            }

            this.canisterLayer.addChild(this.atomCanisterView.displayObject);
        },
Example #28
0
/* global requestAnimationFrame */
import PIXI from 'pixi';
import PixiCanvas from 'ember-cli-pixijs/components/pixi-canvas';

const { cos, sin } = Math;

export default PixiCanvas.extend({
  draw() {
    const renderer = this.get('pixiRenderer');
    const stage = new PIXI.Container();
    stage.interactive = true;

    const graphics = new PIXI.Graphics();

    // set a fill and line style
    graphics.beginFill(0xFF3300);
    graphics.lineStyle(10, 0xffd900, 1);

    // draw a shape
    graphics.moveTo(50, 50);
    graphics.lineTo(250, 50);
    graphics.lineTo(100, 100);
    graphics.lineTo(250, 220);
    graphics.lineTo(50, 220);
    graphics.lineTo(50, 50);
    graphics.endFill();

    // set a fill and line style again
    graphics.lineStyle(10, 0xFF0000, 0.8);
    graphics.beginFill(0xFF700B, 1);
Example #29
0
    /**
     * The image assets have finished loading - GO GO GO
     */
    function assetsLoaded() {

        var star, data, temp;

        for ( var i = count.spawn, l = limit.spawn; i < l; i++ ){
            data = starData.paths[order[i]];

            star = generate(
                'star',
                new PIXI.Sprite.fromImage('/static_assets/img/star-' + data.colour + '-120.png'),
                {
                    pos: new Vec(
                        M.rand(-tree.width, tree.width*2),
                        M.rand(-tree.width, tree.height*4)
                    ),
                    width: Number(data.width) * tree.scale,
                    height: Number(data.width) * tree.scale,
                    rotation: 0,
                    alpha: 0
                },
                {
                    pos: new Vec(
                        Number(data.x),
                        Number(data.y)
                    ),
                    width: Number(data.width),
                    height: Number(data.width),
                    rotation: 0,
                    alpha: 0
                }
            );
            sprites.stars.push(star);
            layers.stars.addChild(star.sprite);
        }

        bigstar = generate(
            'bigstar',
            new PIXI.Sprite.fromImage('/static_assets/img/star-' + window.wagaconfig.treecolour + '-1200.png'),
            {
                pos: new Vec(
                    Number(sprites.stars[200].original.pos.x * tree.scale),
                    Number(sprites.stars[200].original.pos.y * tree.scale)
                ),
                width: Number(sprites.stars[30].original.width),
                height: Number(sprites.stars[30].original.height),
                rotation: 0,
                alpha: 0
            },
            {
                pos: new Vec(
                    Number(sprites.stars[200].original.pos.x * tree.scale),
                    Number(sprites.stars[200].original.pos.y * tree.scale)
                ),
                width: Number(sprites.stars[30].original.width),
                height: Number(sprites.stars[30].original.height),
                rotation: 0,
                alpha: 0
            }
        );

        sprites.tree = generate(
            'tree',
            layers.stars,
            {
                pos: new Vec(
                    Number(layers.stars.position.x),
                    Number(layers.stars.position.y)
                ),
                width: Number(layers.stars.width),
                height: Number(layers.stars.height),
                rotation: 0,
                alpha: 1
            },
            {
                pos: new Vec(
                    Number(layers.stars.position.x),
                    Number(layers.stars.position.y)
                ),
                width: Number(layers.stars.width),
                height: Number(layers.stars.height),
                rotation: 0,
                alpha: 1
            }
        );

        sprites.bucket = generate(
            'bucket',
            new PIXI.Sprite.fromImage('/static_assets/img/bucket-120.png'),
            {
                pos: new Vec(view.hw, 3),
                width: 70 * tree.scale,
                height: 70 * tree.scale,
                rotation: 0,
                alpha: 0
            },
            {
                pos: new Vec(view.hw, 3),
                width: 70 * tree.scale,
                height: 70 * tree.scale,
                rotation: 0,
                alpha: 0
            }
        );

        temp = new PIXI.Graphics();
        temp.lineStyle(0, 0x6D6D6B, 1);
        temp.beginFill(0x6D6D6B, 1);
        temp.drawRect(0, 0, view.w, view.h);

        sprites.floor = generate(
            'floor',
            temp,
            {
                pos: new Vec(0, 200),
                width: view.w, height: view.h,
                rotation: 0,
                alpha: 0
            },
            {
                pos: new Vec(0, 36),
                width: view.w, height: view.h,
                rotation: 0,
                alpha: 0
            }
        );

        layers.floor.addChild(sprites.floor.sprite);

        sprites.bucket.sprite.anchor.x = 0.5;
        sprites.bucket.sprite.anchor.y = 0.5;
        layers.floor.addChild(sprites.bucket.sprite);
        sprites.bigstar = bigstar;
        layers.bigstar.addChild(bigstar.sprite);

        for ( var c in defer.callbacks ) {
            api[defer.callbacks[c]]();
        }

        ui.loaded = true;
        elems.$body.addClass('loaded');
        window.requestAnimationFrame(render);
    }
Example #30
0
var Terminal = function(){
  DOC.apply(this);
  this.enabled = false;
  var bg = new pixi.Graphics();
  this.addChild(bg);
  bg.lineStyle(4,0x000000);
  bg.beginFill(0xffffff);
  bg.drawRect(0,0,496,96);
  this.prefix = '>';
  this.lines = [];
  this.lineno = 0;
  this.buffer = 'NEW GAME';
  this.lastLine = '';
  this.cursor = 8;
  this.min = 0;
  this.output = new pixi.Text('Type something',{font: 'bold 32px VT323'});
  this.output.position.x = 12;
  this.output.position.y = 12;
  this.addChild(this.output);
  this.line = new pixi.Text('>',{font: 'bold 32px VT323'});
  this.line.position.x = 12;
  this.line.position.y = 52;
  this.addChild(this.line);
  this.online = [];
  var _this = this;
  this.renderText();

  var actions = {};
  actions[Alias.enter] = function(event){
    _this.pushLine();
  };
  actions[Alias.backspace] = function(event){
    event.preventDefault();
    _this.removeChar();
    _this.renderText();
  };
  actions[Alias.left] = function(event){
    event.preventDefault();
    _this.moveCursor(-1);
    _this.renderText();
  };

  actions[Alias.right] = function(event){
    event.preventDefault();
    _this.moveCursor(1);
    _this.renderText();
  };

  actions[Alias.up] = function(event){
    event.preventDefault();
    _this.moveHistory(-1);
    _this.renderText();
  };

  actions[Alias.down] = function(event){
    event.preventDefault();
    _this.moveHistory(1);
    _this.renderText();
  };

  document.body.addEventListener('keydown',function(event){
    var key = event.keyCode || event.which;
    if( isValidKey(key) ) {
      _this.pushChar(String.fromCharCode(key));
    } else {
      var fun = actions[key];
      if(!!fun) {
        fun.call(_this,event);
      }
    }
    _this.renderText();
  });

};