Van Halen

  • Content Count

  • Joined

  • Last visited

About Van Halen

  • Rank

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Location
    The Netherlands

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Note: The canvas element itself is transparent, the background images are not loaded by Pixi. But when rain or fog is displayed, it wil also rain outside of the viewport. So i need to update, improve that part of the code.
  2. Yes, the header is moved around by dragging with a jQuery Slider script, and when it rains or when there is a fog/mist the whole canvas is loaded at 3600 px. First time ever i used something like PixiJS or Particles effects. Thanks for the tip, Fatalist.
  3. Fatalist, the header image displays rain (pixi-particles) when it rains here in my hometown and that image is 3600 pixels wide cut up into 3 pieces of 1200px.
  4. Ok thank you Alex, Started out with Alpha, but it had a lower frame rate then the filter above. I will check out the docs again.
  5. Hi, For my website i created a neon effect with PixiJS v4 and i'm not happy with the results i was wondering if anyone could improve upon or has a better idea how create a neon effect which works across multiple desktop/mobile devices. The neon light is a simple transparent png image overlaid on top of static background image. It works for time been 'good enough' for desktop browsers, but i had to disabled it for iPad, etc. because of the slow performance combined with rain (pixi-particles) and fog (custom particle effect). Live version: Code: //PIXI var PIXI; var Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite, ParticleContainer = PIXI.particles.ParticleContainer, extras = PIXI.extras; var street = new Container(); var weatherType = new Container(); var renderer = new autoDetectRenderer(3600, 720, {antialias: false, transparent: true, resolution: 1}); document.getElementById('street').appendChild(renderer.view); //View = 'block'; renderer.autoResize = true; //Variables var neonSign, neonFilter, colorMatrix, count = 1; function animateScene() { //Animate neonSign neonSign.alpha = 0.1; count += 2; var bright = 2 + Math.sin(count); neonFilter.brightness(bright, false); requestAnimationFrame(animateScene); renderer.render(street); } function setup() { //Setup neonSign neonSign = new Sprite(resources['images/one-stop-copy-shop_glow.png'].texture); neonSign.width = 1200; neonSign.height = 300; neonSign.position.set(1200,0); colorMatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; neonFilter = new PIXI.filters.ColorMatrixFilter(); neonFilter.matrix = colorMatrix; neonSign.filters = [neonFilter]; //Add neonSign street.addChild(neonSign); //Start animateScene(); } //Setup loader .add('images/one-stop-copy-shop_glow.png') .load(setup);