A little feedback, the tab got helluva laggy after scrolling down a few pages. I assume that's because you aren't unloading dwitters when they scroll past the top of the viewport - which you probably should.
Interestingly, I found that some scripts really don't like using eval(), so I modified the page to dynamically swap in new <script> elements with the code instead, and a flag to go back and forth.
Here's an example of a script which doesn't like eval() - it runs noticeably faster when embedded in a script: https://www.dwitter.net/d/697
This is the coolest website I've seen in a long time. Awesome idea.
EDIT: one issue I'm running into is it's easy to accidentally write half-finished code that freezes my browser. It would be nice to have an option to only refresh the preview upon clicking some kind of button.
One trick you learn as a dweeter is to write all for-loops as "fr" instead of "for", and then only adding the last "o" when you feel confident that the loop won't accidentally go on forever!
Sorry about your lost dweet :( Accidental infinite loops while editing can be a pain. A "reload" button isn't a bad idea, or a "recover dweet draft" functionality.
Brilliant dweet!
Part of the challenge is the manual minification. A larger textarea might be worth it especially as you can use linebreaks instead of ; for better readability
This is really cool, but executing other people's javascript in a page makes me nervous. What sort of restrictions are in place to prevent malicious exploits?
Makes me quite nervous too. So far each dweet is run in a sandboxed iframe loaded from a separate subdomain.
There are definitely things you can do, and I'm aware of some annoying ones. I'll just manually delete them at this point. Any security conscious person would view it with noscript and just read the javascript ;)
While you're deleting stuff, I noticed someone on the new page has posted pornographic images. Alas, I'm not terribly surprised since this is the internet after all, but I'll +1 a feature to report dweets as being inappropriate.
A system to automatically hide dweets (for later manual review) after receiving a certain number of reports would likely solve the problem in the short term.
While you're manually deleting things... there are currently way too many that are just exact reposts of the default swaying black bars. Probably accidents rather than people being deliberately lame, but low-hanging fruit for any kind of automatic cleanup.
That's something I've been thinking about. Webworkers don't have direct access to the Canvas though, but it seems like you can work around that by passing image data. Killing infinite loops would be great
This is awesome! During one of the last hackathons I participated while at Tumblr, I made a Processing post type, that allowed people to have interactive posts using Processing code, and could be reblogged with edits - very much like this. Love seeing something similar to this idea!
This is definitely fun... It'd be nice if it used Github to login and save to Gists. Also, I think it'd be better if the developer called u(t){}, rather than it being the content of the entire post, so it could set up variables, etc., and since it already has a few shortcuts like c,x,C,S,T,R, might as well add in a more complete API.
Ah, didn't realize, my bad! It's doable in fewer characters of course, but still a waste. Funny, I thought it was just a bit odd how terse some of these demos were, but given the 140 char limit that I somehow didn't notice at all it makes more sense.
I don't know either, was more of an accident and I ran for it. But I'll try:
Manipulating the canvas Imagedata TypedArray is usually faster than draw calls like fillRect; yet the getImagadata-setImagedata and 2D-Y-X-iteration (here ij) fluff doesn't leave much bytes for actual per pixel operations.
(i*w+j)*4+3 // is the alpha channel (offset of 3) index of the pixel in the Imagedata
The actual payload:
(i-j&j+i)*t%w
Translates to
(y - x & x + y) * time % 256
With 255 resulting in Black rgba(0,0,0,1) to transparent black rgba(0,0,0,0), which is then effectively viewed as background color, in this case white.
What resources to people recommend for learning about animating in canvas tags like on Dwitter? I'm already familiar with Javascript, but seeing what people are able to do here with 140 characters amazes me.
u(t) is called 60 times per second.
t: elapsed time in seconds.
c: A 1920x1080 canvas.
x: A 2D context for that canvas.
S: Math.sin
C: Math.cos
T: Math.tan
R: Generates rgba-strings, ex.: R(255, 255, 255, 0.5)
https://www.dwitter.net/d/90 https://www.dwitter.net/d/406 https://www.dwitter.net/d/433 https://www.dwitter.net/d/617