gpujs / gpu.js

GPU Accelerated JavaScript
https://gpu.rocks
MIT License
15.04k stars 646 forks source link

Does anyone have nay idea on how to use something else other than canvas for illustrations ? #760

Open beetrandahiya opened 2 years ago

beetrandahiya commented 2 years ago

A GIF or MEME to give some spice of the internet

What is wrong?

I am trying to simulate reaction-diffusion using my illustration library(ChelseaJS). But making a 512*512 SVG grid using normal JS is a nightmare.

Where does it happen?

When I try to use the new circle / new line to draw something it gives the error : [ Unhandled Type "NewExpression" ]

How do we replicate the issue?

How important is this (1-5)?

2-3

Expected behavior (i.e. solution)

Object new circle should be able to draw a circle using given parameters.

Other Comments

If I couldn't explain my issue well, please help me out to first make the question more askable. :)

psykovski-extended commented 2 years ago

I am using Plotly's heatmap to display mandelbrot fractals, the point here is, that depending on the iterations done per point, the pixel representing this point gets colored - so I do not know how your output looks like, but maybe this helps.

end-me-please commented 1 year ago

i think drawing on the same canvas as GPU.js using conventional methods isnt possible, but letting GPU.js draw on a hidden canvas + copying the ImageData onto the canvas you want is very fast. not sure if that is what you want.

benrayfield commented 1 year ago

This html file https://github.com/benrayfield/jsutils/blob/master/src/arvox/arvox.html uses gpujs_browser_mitLicense_2.11.0.js but does not use that for canvas or webcam. It just interacts with gpujs thru Float32Arrays and accesses webcam and canvas on its own. It is slow but i dont think it has to be if gave it less calculations or less IO bottlenecked calculations. It does the xray-like graphics effect in center square, that finds ball shaped things such as a tennis ball in your hand partially covered by fingers or sometimes the top of a shaved head. The point is, you dont have to give GPUjs access to a canvas just cuz you're using one, and you can display its output however you want.