Search the Community

Hello! I'm new to this forum but I had a burning question that I can't seem to solve and was hoping to get some sort of help. I'm trying to write a function to animate a bezier curve that changes styles (color and weight). I'm splitting up the curve into many straight line segments so that I can apply a style to each line segment to get an illusion of a gradient. I'm doing this by using two graphics objects (A and B), where A that animates the "head" or leading segment of the bezier curve (the one that's moving), and B renders the lasting tail segments that I want to persist after the animation is done. For reference, here is the drawing line segments code. lineStyle is not applied anywhere else in the codebase. static drawSegments(graphics, camera, segments, startIndex) { for (let i = startIndex; i < segments.length; i++) { const segment = segments[i]; //Prevents edges from appearing too thin. //Increasing threshold will make small lines larger, vice versa. const THRESHOLD = 0.5; const strokeWeight = Math.max(segment.u.weight, THRESHOLD / camera.getZoomFactor().x); const color = ColorUtilities.hsv2rgb(segment.u.hue, segment.u.sat, 100); const hexColor = ColorUtilities.rgb2hex(color.r, color.g, color.b); const randomColor = Math.random() * 0xFFFFFF; console.log(color); graphics.lineStyle({ width: strokeWeight, color: hexColor, cap: PIXI.LINE_CAP.ROUND, }); graphics.moveTo(segment.u.x, segment.u.y); graphics.lineTo(segment.v.x, segment.v.y); } } If I clear B every frame (B.clear();), the lineStyle behaves correctly, as you can see in the first photo below, the line smooths from a small indigo line to a larger pink-ish one. However, this isn't great for me performance wise, as I want to have many of these lines, and drawing them from scratch every frame is expensive. Therefore I'm trying to just draw the segments that B hasn't already drawn yet. So every frame B will draw more and more lines. However, if I do it this way I get a strange result. In the second case, the color of the line doesn't transition correctly, or at all really. The weight transitions fine, but the color stays either constant or varies very slightly (as shown in the third picture). Perhaps more bizarrely, if I set the color instead to be a random color, the lineStyle seems to adjust correctly (although the colors don't seem nearly random enough. Additionally, if I set the color to be some aspect of the index of the loop I'm drawing in (like setting the hue to be (i * 20 % 360)), I get these weird color bands that seem to want to jump back to previous colors. I stepped through the batching code and could not figure out for the life of me where these colors were disappearing. I would love some help as to figuring out this problem because I am completely stumped. I'm using the development build of Pixi v6.0.1.

for v4, this works: Also: https://stackoverflow.com/questions/50221078/how-to-change-style-of-lines-using-pixi-js-graphics But for PIXI v5, there is no PIXI.Graphics().graphicsData (it is undefined). Does someone know how to update line style using PIXI v5? Best and cheers, R.

Hi - I have a program that draws a line (a ground trace of a satellite), made of ~180 segments, and I'm having issues setting the lines to be a color other than black(default), when using the webGL renderer. Everything works just fine in the canvas renderer. I followed this example (the part with the moving, filled square) as closely as possible, with a couple changes due to my architecture. I did a small case study and found the following, using autoDetectRenderer(): Linux(CentOS 6.5 on a VM with no 3D or 2D acceleration): Chrome: Works fine (Canvas Renderer) Mozilla: Works fine (Canvas Renderer) Windows 7: Chrome: Black line (WebGL Renderer) Mozilla: No line (WebGL Renderer) IE: Black line (WebGL Renderer) Mac OSX: Chrome: Works fine (Canvas Renderer) Mozilla: No line (WebGL Renderer) Safari: Works fine (Canvas Renderer) Opera: Works fine (Canvas Renderer) I'll start by explaining my program code a little. Since I don't like huge blocks of code, my script runs a exec() function that calls several other functions that initialize and create PIXI objects and call animate. Below is my initialization function that sets up the stage, and renderer. There's some primus(websocket wrapper for node.js) here that receives a JSON object that includes the lat & lng of endpoints for each of the 180 segments. function initPixi(){ // create an new instance of a pixi stage stage = new PIXI.Stage(0xffffff, true); // create a renderer instance renderer = new PIXI.autoDetectRenderer(1024, 512); // add the renderer view element to the DOM document.body.appendChild(renderer.view); // When primus receives data, store it in SatMapOut primus.on("data", function(data) { try{ SatMapOut = JSON.parse(data.data[1]) } catch(exception){ console.log(exception) }; }); // Set ratio of pixels/degrees of longitude a_ratio = renderer.width/(2*world.x_radius); requestAnimFrame( animate );}Next is the code that creates the spacecraft, and sets up the scTrack(the line which is the problem child(haha get it?)) // Draw the spacecraftfunction drawSC(){ // create a texture from an image path scLabel = new PIXI.Text("SPACESHIP!!!", {font: "bold 14px Arial ", fill: "#ff7105", stroke: "#000000", strokeThickness:2}); scTrack = new PIXI.Graphics(); scTrack.lineStyle(1, 0xffffff, 1); // Same results whether this is here or not. // create a new Sprite using the texture scSprite = new PIXI.Sprite.fromImage("textures/GenScSprite.png"); // center the sprites anchor point scSprite.anchor.x = 0.5; scSprite.anchor.y = 0.5; stage.addChild(scTrack); stage.addChild(scLabel); stage.addChild(scSprite);}Last is the animate function, where the line is actually drawn. Since it models the orbit of a spacecraft, the whole line is constantly moving and shifting, as the craft has variations in its flight path. I set the line style here too, but I also tried other combinations (w/ & w/out lineStyle in drawSC, w/ & w/out lineStyle in animate()). I also tried using beginFill(0xffffff) and endFill(); but this didn't change anything. P.S.: wTS is a function which converts degrees latitude and longitude to pixel coordinates. P.P.S: is there a pixi function that does that? function animate() { // If SatMapOut is populated, then update positions of sprites. if(!($.isEmptyObject(SatMapOut))){ //------------------------------------------------------------------------------- // Some code is here for updating positions of other sprites on the page, but I omitted it to be concise. //-------------------------------------------------------------------------------- // Clear scTrack buffer(delete old line) scTrack.clear(); scTrack.clear(); // Cycle through line segment objects and draw orbit track in segments for(var p in SatMapOut.OrbTrack) { // SETTING LINE STYLE scTrack.lineStyle(1, 0xffffff, 1); // If endpoints cross the edge of the screen, draw two half segments instead of one. if(p.wrap == true){ scTrack.moveTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[0]), wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[0])); scTrack.lineTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[1]), wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[1])); scTrack.moveTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[2]), wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[2])); scTrack.lineTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[3]), wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[3])); }else{ scTrack.moveTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[0]), wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[0])); scTrack.lineTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[1]), wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[1])); } } } // Update time time.setText(moment().utc().format("YYYY-MM-DDTHH:mm:ss.SSS")); // render the stage renderer.render(stage); // Loop animate again requestAnimFrame ( animate );}And that's everything that is pertinent(I think). Lastly, here's the html page that calls the script: <!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title>SatMap with pixi.js</title> <style> body { margin-left: 128px; margin-top: 96px; padding: 0; background-color: #000000; } </style> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="libs/pixi.js"></script> <script src="libs/moment.js"></script> <script src="source/ws.js"></script> </head> <body> <script src="source/satmap_pixi.js" type="text/javascript"></script> </body></html>

Just a FYI: Line drawing fails if you mix it with other graphics commands. The code snippet below will draw the circles but the lines vanish. Simple fix is to draw the lines then iterate again to draw the circles, but this combined drawing should work too. graphics.lineStyle(1, 0xffffff, 1); for (var i = 0; i < c.control.length; i++) { var x = control[i].x; var y = control[i].y; if (i == 0) { graphics.moveTo(x, y); } else { graphics.lineTo(x, y); } graphics.beginFill(0xafafaf); graphics.drawEllipse(x, y, 3, 3); graphics.endFill(); }