PIXI.blendModes.ADD bug

Developer
David Hartley
Size
2,684 Kb
Views
18,216
  1. PIXI.blendModes.ADD bug Previews
  2. PIXI.blendModes.ADD bug HTML Codes
  3. PIXI.blendModes.ADD bug CSS Codes
  4. PIXI.blendModes.ADD bug JS Codes

How do I make an pixi.blendmodes.add bug?

Demonstration of bug when using additive blend mode with a transparent canvas.. What is a pixi.blendmodes.add bug? How do you make a pixi.blendmodes.add bug? This script and codes were developed by David Hartley on 18 November 2022, Friday.

PIXI.blendModes.ADD bug Previews
IQ Test

PIXI.blendModes.ADD bug - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PIXI.blendModes.ADD bug</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ #canvas { position: absolute; top: 0px; left: 0px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="canvas">No HTML5 canvas support. Please update your browser.</canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.2/pixi.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

PIXI.blendModes.ADD bug - Script Codes CSS Codes

#canvas { position: absolute; top: 0px; left: 0px;
}

PIXI.blendModes.ADD bug - Script Codes JS Codes

(function() { // Change to false to see correct outcome var enableWebGL = true; var stage = new PIXI.Stage(0x000000); var renderer; if (enableWebGL) { // Try to use WebGL renderer = PIXI.autoDetectRenderer(Math.max(800, window.innerWidth), Math.max(600, window.innerHeight), { view: document.getElementById("canvas"), transparent: true }); } else { // Force canvas renderer = new PIXI.CanvasRenderer(Math.max(800, window.innerWidth), Math.max(600, window.innerHeight), { view: document.getElementById("canvas"), transparent: true }); } var NUM_SPRITES = 50; var baseTexture = PIXI.BaseTexture.fromImage("https://i.imgur.com/tPadoug.png"); var textures = []; for (var i=0; i<12; i++) { textures[i] = new PIXI.Texture(baseTexture, new PIXI.Rectangle(174 * (i % 4), 174 * Math.floor(i / 4), 174, 174)); } var sprites = []; for (i=0; i<NUM_SPRITES; i++) { sprites[i] = new PIXI.MovieClip(textures); sprites[i].x = renderer.width / 2; sprites[i].y = renderer.height / 2; sprites[i].anchor.x = 0.5; sprites[i].anchor.y = 0.5; sprites[i].vel = { x: (Math.random() * 2 + 1) * (Math.random() > 0.5 ? 1 : -1), y: (Math.random() * 2 + 1) * (Math.random() > 0.5 ? 1 : -1) }; sprites[i].scaleChange = 0;//Math.random() * 0.05; sprites[i].alphaChange = Math.random() * 0.1; sprites[i].blendMode = PIXI.blendModes.ADD; //sprites[i].play(); stage.addChild(sprites[i]); } var animate = function() { for (i = 0; i<NUM_SPRITES; i++) { var s = sprites[i]; s.alpha += s.alphaChange; if (s.alpha > 1 || s.alpha < 0) { s.alphaChange *= -1; } s.scale.x += s.scaleChange; s.scale.y += s.scaleChange; if (s.scale.x > 2 || s.scale.y > 2) { s.scale.x = 2; s.scale.y = 2; s.scaleChange *= -1; } else if (s.scale.x < 0.5 || s.scale.y < 0.5) { s.scale.x = 0.5; s.scale.y = 0.5; s.scaleChange *= -1; } s.x += s.vel.x; s.y += s.vel.y; if (s.x + s.width / 2 > renderer.width) { s.x = renderer.width - s.width / 2; s.vel.x *= -1; } else if (s.x - s.width / 2 < 0) { s.x = s.width / 2; s.vel.x *= -1; } if (s.y + s.height / 2 > renderer.height) { s.y = renderer.height - s.height / 2; s.vel.y *= -1; } else if (s.y - s.height / 2 < 0) { s.y = s.height / 2; s.vel.y *= -1; } } renderer.render(stage); requestAnimationFrame(animate); }; requestAnimationFrame(animate);
}) ();
PIXI.blendModes.ADD bug - Script Codes
PIXI.blendModes.ADD bug - Script Codes
Home Page Home
Developer David Hartley
Username davidhartley
Uploaded November 18, 2022
Rating 3
Size 2,684 Kb
Views 18,216
Do you need developer help for PIXI.blendModes.ADD bug?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Hartley (davidhartley) Script Codes
Name
Stars following mouse
Pixi.js Clouds Shader
The Avengers Logo
PixiJS Shaders
Fire Emitter
Footballs
Progress bars
Infinite Rings
Sunny
Overlaying images
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!