hobiewetzels

Members
  • Content Count

    5
  • Joined

  • Last visited

  1. Could you maybe provide an example? I'm kinda confused (sorry new to this library!). I have tried the following but it does not seem to work: if (capture) { capture = false; let renderTexture = PIXI.RenderTexture.create(1920, 1920); const image = app.renderer.plugins.extract.image(graphics, "image/png", 1); let sprite = PIXI.Sprite.from(image); let object = renderer.render(sprite, renderTexture); document.body.appendChild(object); } Have left the extract code unchanged btw.. Could you explain what step I should do on my own? Thanks in advance :)!
  2. Hello again,, I'm having difficulties extracting the canvas to a PNG. Check out this fiddle: https://jsfiddle.net/7k6dLjr0/ For some reason it does not work in the fiddle, to recreate the issue go to: https://hobiewetzels.nl/projects/genart-pixi/ if (capture) { capture = false; const image = app.renderer.plugins.extract.image(graphics, "image/png", 1); document.body.appendChild(image); } This saves the graphics object (working as intended) as a png. However I want to render the canvas and clip graphics that are out of the view. I have tried a few different approaches, but what I like about the extract function is that the background is transparent. Is there a way to save the Canvas to a transparent .png and cut the graphics that are not in the view? So basicly just take a screenshot of the canvas, not download the whole graphics object.. if that makes sense. Also this sometimes throws the error when the graphics are outside the view/stage: TextureSystem.js:264 WebGL: INVALID_VALUE: texImage2D: width or height out of range Thanks in advance Also how would I append this PIXI.Application to an existing canvas element. I tried setting the view option but that dit not seem to work.
  3. Well i have some free time i'll check it out. Thanks!
  4. Thank you very much. It already works a lot better! Any resources on GLSL shaders you recommend, so I can learn how to do this?
  5. Hey, Maybe a different question than usual. I made the following project with P5.js: https://hobiewetzels.nl/wallpaper/ About 1000 circles are animated independently. This results in performance issues. I am now trying to realize the same project with pixi.js, but the performance issues only seem bigger (also unwanted lines are being rendered). fiddle: https://jsfiddle.net/zjsnytvf/ Do you have tips? Do I have to use sprites instead of graphics, i have read that it is advised to not use more then 300 graphics, so how can I work around this? It is important that I can animate the graphics independently to create the desired effects (color, radius, x, y) ... Im new to pixi.js, thanks for your time! Thanks in advance!