
Shaderoo: realtime ballpoint effect - flockaroo
https://shaderoo.org/?shader=yMP3J7
======
FraKtus
It's a project that wants to push further than shadertoy. Here from the
project documentation:

My goal was to make something similar to Shadertoy but with some extra
features. Having a fixed and simple set of functionality always helps in the
creative process to focus on the goal itself rather than on the several
methods available to achive the goal. Therefore i didn't want to overdo it
with new functionalities and only implemented features i was missing most in
shadertoy. Some basic main shadertoy functionality is there, but some features
are missing.

Shaderoo is based exclusively on WebGL2, so WebGL1 is not enough (unlike
shadertoy, which has some WebGL1 fallbacks). check webglreport.com for
compatibility.

Shaderoo uses Ace as web-editor. See here for the keyboard shortcuts.

~~~
dahart
Did you mean to have a link to keyboard shortcuts in there?

Shaderoo looks pretty cool! Having geometry shaders makes it a very different
& potentially more powerful thing than ShaderToy at the moment.

That said, there are a whole bunch of projects out there with the same goal:
ShaderToy plus a few features. ShaderToy's value to me isn't really it's
features though, it's IQ and his prolific sharing and persistence, and also
the large user base. Replicating that and doing better will be a lot harder
than replicating and extending the features. I'll be playing with it, and I
wish the project much good luck!

------
sharpercoder
I love the effect. Brings back times when I used ballpoints a lot and also had
a lot of spare time (college, school...).

The website has horrible contrast though. Using blue heavily in the theme is
nice and appropriate. Unfortunately, it uses too many shades and combines
light blue tones with white. That accounts for the bad contrast.

~~~
RankingMember
Click the "theme" button to change to the dark theme.

------
rijoja
Would someone be so kind to post a demo for us poor souls without webgl2
support?

------
greggman
it probably doesn't matter but I like that I can view many if not most
shadertoys on my iPhone. unfortunately it doesn't look like Apple has any
intention of shipping WebGL2 in Safari. There has been no significant work in
WebKit on WebGL2 for over a year

------
Gys
Amazing. Don't forgot to try the webcam option !

~~~
Sean1708
I feel like I'm missing something really obvious here, but how to I get it to
work without using the webcam? I'm guessing that white box in the top-left is
supposed to show something other than a white box?

~~~
dwighttk
it needs webgl2 to work properly

------
blauditore
I'm not good with shaders; can someone explain on a high level how this works?

I guess it somehow draws lines along in low-gradient directions in dark areas,
with some randomization. But I can't really tell from looking at the code.

~~~
dahart
You got it right at a high level. The main bit of line drawing is the velocity
calculation in the middle of the propagate() function:

    
    
        // calculate velocity change
        vec2 dvel=vec2(0);
    
        float dir = (float(p.idx%2)*2.-1.); // every 2nd particle is bent left/right
        
        // vel tends towards gradient
        dvel -= 10.*gu*(1.+sqrt(gl*2.))*sc;
        
        // vel tends towards/away from normal to gradient (every second particle)
        dvel -= 20.*N(gu)/(1.+1.*sqrt(gl*100.))*sc*dir;
        
        // vel bends right/left (every second particle)
        dvel += .06*N(p.vel)/(1.+gl*10.)*dir;

~~~
jcims
It's fun tinkering with all of the constants throughout the script (don't
forget to click Apply at the bottom). It's surprisingly robust to changes,
they just flavor the image in various ways.

------
royjacobs
Please also add a reverse shader so we can finally watch the "Take On Me"
music video the way it was shot :)

------
John_KZ
Can we compare it to the original footage? I'm kind of pissed I can't find it.

~~~
sgrove
If you search for `mp4` in the DOM inspector, you should find it:
[https://thumbs.dreamstime.com/videothumb_large8470/84708180....](https://thumbs.dreamstime.com/videothumb_large8470/84708180.mp4)

~~~
John_KZ
Thanks.

------
zeroxfe
This is amazing. Great job.

(Consider pitching this to A-ha.)

------
geuis
Any way to upload a video to this?

~~~
flockaroo
you cannot upload a video directly to shaderoo.org, but you can use any video
from servers that support "CORS" (Cross Origin Resource Sharing). the video-
server explicitly has to support this (like e.g. dreamstime.com or
shutterstock.com).

------
chimmy_chonga
very cool

