Jump to content

Renato Fabbri

Members
  • Posts

    5
  • Joined

  • Last visited

Recent Profile Visitors

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

Renato Fabbri's Achievements

Newbie

Newbie (1/14)

1

Reputation

  1. I am guessing that AA shader would be "Antialiasing" shader. No clue to how that would be and why it would be a good approach. Any direction here? I just accepted your invitation. Thank you!
  2. I am starting to assume this is in fact how it is done. Any other channel through which I can ask about it?
  3. need to plot networks with thousands of nodes and tenths of thousands of edges (or hundreds of thousands of edges). My guess is that using a ParticleContainer for the nodes and another for the edges is a pretty nice shot. Came up with this routine: function plotNet () { const nodes = [ // each entry is the position of a node, for example: [130, 200], [230, 350], [50, 100], [500, 100] ] const edges = [ // each entry is the node indexes of the edge, for example: [0, 1], [0, 3], [1, 2], [1, 3], [2, 3] ] function plotNet (nodes, edges) { nodes.forEach(n => mkNode(n)) edges.forEach(e => mkEdge(nodes[e[0]], nodes[e[1]])) } function mkNode (pos) { const circle = new PIXI.Sprite(circleTexture) circle.x = pos[0] circle.y = pos[1] circle.anchor.x = 0.5 circle.anchor.y = 0.5 nodeContainer.addChild(circle) } function mkEdge (pos1, pos2) { const line = new PIXI.Sprite(lineTexture) const dx = pos2[0] - pos1[0] const dy = pos2[1] - pos1[1] const length = (dx ** 2 + dy ** 2) ** 0.5 line.scale.set(length / 1000, 1) const angle = Math.atan2(dy, dx) line.rotation = angle line.x = pos1[0] line.y = pos1[1] edgeContainer.addChild(line) } const nodeContainer = new PIXI.ParticleContainer(10000, { scale: true, position: true, rotation: true, alpha: true }) const edgeContainer = new PIXI.ParticleContainer(10000, { scale: true, position: true, rotation: true, alpha: true }) const myLine = new PIXI.Graphics() .lineStyle(1, 0xff0000) .moveTo(0, 0) .lineTo(1000, 0) const myCircle = new PIXI.Graphics() .beginFill(0xffffff) .drawCircle(0, 0, 5) .endFill() const app = new PIXI.Application() document.body.appendChild(app.view) const circleTexture = app.renderer.generateTexture(myCircle) const lineTexture = app.renderer.generateTexture(myLine) app.stage.addChild(edgeContainer) app.stage.addChild(nodeContainer) plotNet(nodes, edges) } which seems to work fine. Regarding speed, would you suggest something or that is how it is done?
  4. 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.
  5. this does not work for PIXI v5. Does anyone know how to update line style with PIXI v5?
×
×
  • Create New...