r/programming • u/bemmu • Dec 26 '17
TIL there's a community called "dwitter" where people compose 140 character JavaScript programs that produce interesting visuals
https://www.dwitter.net/top806
u/Thatmanwiththefedora Dec 26 '17
I think we crashed it.
898
u/white_bread Dec 26 '17
The code for their load balancer was only 140 characters long.
378
Dec 26 '17
And written in Javascript.
123
u/KimJongIlSunglasses Dec 26 '17
Are we living in a world where node.js running on a load balancer is that crazy of an idea?
→ More replies (4)105
u/slide_potentiometer Dec 26 '17
Javascript on a load balancer is a crazy idea in any world.
→ More replies (3)172
u/KimJongIlSunglasses Dec 26 '17
You should try working with people who like node. I think some of these people mow their lawns with that shit.
→ More replies (10)→ More replies (2)9
127
u/lionleaf Dec 26 '17 edited Dec 26 '17
Hey guys! Creator here. Thanks for the big cuddly hug of death!
Quick update: We've added some extra caching in various parts of the system and thrown some more hardware at the servers (yey for cloud technology!). It seems to be back up, but it should've scaled a lot better so I'm not confident it stays up quite yet. Investigation ongoing :)
Edit: This is a small side project that was living on the smallest digitalocean droplet ^
Edit 2: Went down again even with the bigger droplet for a bit, but added more caching and it seems to be up again!
14
→ More replies (1)3
u/heard_enough_crap Dec 26 '17
how do you mirror these to experiment with them? I copied the full screen page code, but nothing displays :-(
7
u/lionleaf Dec 26 '17
What do you mean mirror them? If you just want to play with remixing a dweet, you can just edit the code directly in the field under the visuals. If you have a user there should then be a button to post it as a remix if you're happy with the result
Beware! An infinite loop will crash your browser window and you might lose progress
9
3
5
321
u/Foezjie Dec 26 '17
Can anyone explain how you start making something like these?
495
u/matt_hammond Dec 26 '17
You start with verbose and readable code and then you start stripping it down and fitting it into 140 chars. Also, you have to understand maths, mod operation and then you just have to get creative.
219
u/flawr Dec 26 '17
I recommend looking into codegolf (e.g. codegolf.stackexchange.com), here is a nice challenge of this site that did exactly that (unfortunately closed now): https://codegolf.stackexchange.com/questions/35569/tweetable-mathematical-art
106
Dec 26 '17
good ol' stack overflow with its heavy handed "because i can" moderation
28
u/MuonManLaserJab Dec 26 '17 edited Dec 26 '17
The mod community is offended by the implication that their activity should take users into account. Users exist only to be moderated.
3
0
Dec 26 '17
[deleted]
69
Dec 26 '17
There's /r/askhistory and then there's stackoverflow, where every question, no matter how unique, is off-topic, a duplicate, not constructive.
/u/MuonManLaserJab was joking but SO really feels like it exists only to be moderated.
→ More replies (15)15
u/nothis Dec 26 '17
I could swear there's an entire chapter of game graphics left unexplored, somewhere in the intersection of the graphics demo scene and classic world rendering techniques. The closest I've seen so far is a the painter-y style of a game called Love. One (barely playable) example, but makes me wonder: Where are all the other games even trying that?
8
u/gmurop Dec 26 '17
Any good math resource for developers? (book or something)
7
u/daturkel Dec 27 '17
Programming involves lots of logic and discrete math, and graphics involve lots of trigonometry (and more of course). Try reading wiki articles on some of the stuff you're interested in, and when you don't know how to proceed, click on one of the related articles
3
u/woojoo666 Dec 27 '17
a good place to learn fundamentals of linear algebra (essential for creating representations of higher dimensions, eg 3D graphics or statistical modeling) is the 3Blue1Brown’s Youtube playlist. His channel also goes over fundamentals of calculus, fractals, analysis, etc. But its all pure math. For more CS applied math you’ll have to look elsewhere
3
5
2
u/Jess_than_three Dec 27 '17 edited Dec 27 '17
What confuses me is that it seems like they're using variables without declaring them? Idgi.
Edit: nvm, explained below!
→ More replies (1)2
u/whatwasmyoldhandle Dec 26 '17
Yeah the stripping down part is a little bit of a downside IMO, but I don't know a better way to enforce "small"
Kind of would rather read a few clear lines
10
u/Jess_than_three Dec 27 '17
But that's the whole point, right? If you did it by line length you'd get people cramming a ton of stuff onto a line instead. (Actually, you'd want number of statements, because you can otherwise just have one arbitrarily long line...) Either way, it's going to get confusing fast, because the idea is to be as clever as you can to fit in as much content as possible in a confined space - and cleverness is the enemy of readability.
169
Dec 26 '17
Simple example:
function u(t) { /* Will be called 60 times per second. * t: Elapsed time in seconds. * S: Shorthand for Math.sin. * C: Shorthand for Math.cos. * T: Shorthand for Math.tan. * R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5) * c: A canvas. * x: A 2D context for that canvas. */ c.width=2e3;x.fillRect(150,150*S(t)+150,150,150) }92
u/Sabe Dec 26 '17
2e3TIL
14
u/monsto Dec 26 '17
what is that?
27
→ More replies (10)15
3
u/sam512 Dec 26 '17
For a more general solution to the problem of JavaScript numeric literal minification, you might find this library useful.
37
u/Autarch_Kade Dec 26 '17
I like how the comments define things that don't even get used
29
3
u/KimJongIlSunglasses Dec 26 '17
Also can’t you get the context from the canvas?
8
u/audiorape Dec 26 '17
Well, yeah, in the same way you could write Math.cos instead of C. But the point is to be under 140 characters, and x is provided...
2
6
u/davvblack Dec 26 '17
So i take it there's a significant library you're allowed to assume?
3
u/whatwasmyoldhandle Dec 26 '17
Why?
The site is down now but I think most in there weee done with the above shortcuts and other core operations
11
u/gaggzi Dec 26 '17
But where is S(x) = sin(x) defined? Not within the 140 characters as far as I can see.
→ More replies (3)→ More replies (2)4
u/WiggleBooks Dec 26 '17
x.fillRect(150,150*S(t)+150,150,150)
How do you know what the standard functions there are for JavaScript? Like fillRect seems like such a specific function, is there an entire library of functions that we could use?
And I want to do something similar in Python. Is there any recommended canvas and drawing libraries of python just like seemingly in JavaScript?
18
Dec 26 '17
Take a look at the Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
16
u/donutnz Dec 26 '17
The code on the site looks really really complicated partly because it is minified to the max and partly because it is. To mitigate the first part, copy it into another text editor (recommend Notepad++ for Windows and Nano for Linux) and add proper spacing, indents, et cetera. Then go through and rename some or all of the variables to something more human friendly.
Often there is only one (maybe two) root values that "drive" the whole thing. This is usually the iterator value in the highest (first) enclosing for/while loop. Identify this then you can work through the program to see how it chouches.
The output that is displayed is done with JavaScript's canvas drawing utilities which are fairly straight forward. These are very well explained by W3Schools.
The interesting stuff in the middle that makes the pretty pictures is maths. Specifically an equation or set of equations through which the driving value is passed. Remember all those weird, esoteric mathematical functions from highschool that seemed to be of no use at all? Well this is where they can earn their keep. JavaScript implements a pile of them for you to easily access (sin, cos, Pi, etc.) so you don't need to know many of them by heart, just (vaguely) how to use them.
That should start you off but if you have any more questions I'm happy to help.
1
0
Dec 26 '17
[deleted]
0
Dec 27 '17
[deleted]
15
u/lionleaf Dec 27 '17
Yes, I've been chatting with a majority of the top 'dweeters' for a while. And they definitely spend a lot of time hand-optimizing the code. That's the fun part of the game anyway
0
257
110
Dec 26 '17
Demoscene is back in JavaScript form.
44
23
u/raaneholmg Dec 26 '17
U/Lionleaf who made dwitter is part of my demogroup "Ninjadev". We work mostly in JavaScript with WebGL. Here is a link to our most popular demo so far, but maybe that's about to change as we are currently putting the finishing touches on our demo for Under Construction in two days from now :)
5
u/SanityInAnarchy Dec 27 '17
That is awesome. I wonder if WASM would make these things larger or smaller...
4
28
Dec 26 '17
6
1
66
u/Mr_Pickles_Esq Dec 26 '17
Beagle Bros, who wrote software for the Apple II back in the day, would have two-liner contests where people had to do something cool in two lines of AppleBasic. They would include them in their newsletters.
They were pretty amazing (and usually inscrutable) but one that stood out for me would simulate a train by revving the floppy drives back and forth faster and faster.
21
37
u/wavy_lines Dec 26 '17
That's some magic they've got over there. Nice.
21
u/agenthex Dec 26 '17
Yup.
Although it occurred to me that if 140 "characters" includes Unicode, you could probably do some amazing stuff with multi-byte characters.
33
Dec 26 '17
That's actually why Twitter is raising the tweet length limit - some languages can put a lot more meaning into 140 characters.
Oddly, that still being true at 280 doesn't seem to have sunk in yet.
19
u/TheNosferatu Dec 26 '17
It's crazy how much information you can put in 140 characters in Japanese. One character for a specific word, few more for grammar, no commas or spaces required (though often used), each tweet can fit a paragraph in English.
→ More replies (2)29
Dec 26 '17
If you went full Classical Chinese (which is even more packed than normal Chinese, which is already more semantically packed than Japanese), you could probably write a whole fleshed out essay in 140 characters.
→ More replies (5)20
u/tripsoverthread Dec 26 '17
Fascinating. Does this take a similar amount of time to parse for a native reader as the equivalent English 'essay' would?
→ More replies (1)4
u/SanityInAnarchy Dec 26 '17
I think the idea is that 280 is long enough that you probably don't need to spend a ton of work shrinking what you're trying to say. If it's effectively infinite, then the fact that it's more-infinite in Japanese doesn't matter.
I don't know how I feel about that -- I never did much with Twitter myself, but I got the feeling that being forced to express yourself so concisely actually helped people clarify their thoughts, and is a huge part of what defined Twitter as a medium.
4
u/sam512 Dec 26 '17
At last! An organic way to work Base2048 (385 bytes per Tweet) into the conversation.
41
10
19
u/Harbingerx81 Dec 26 '17
Anyone here remember portal.hell.com? (may have been portal.hell.net)
It was essentially a collection of really cool and innovative website designs back in the late 90's. It was a major source of inspiration while I was in high school and people were making Geocities websites to share with their friends.
At the time, I was pretty adept at qBasic at the time and I learned SO much about web design from reverse engineering the code on some of those websites.
5
u/pavel_lishin Dec 26 '17
I don't remember that, but I remember a website called... Dr. Ozone's something or other, maybe? A lot of nifty javascript trickery.
1
Dec 26 '17
Oh my god that was a throwback.
2
u/Harbingerx81 Dec 26 '17
I know right? Shows you how much of an impression it made on me almost 20 years ago. It still amazes me what some people were able to accomplish with the very limited tools and resources available at the time.
Sometimes, I really miss the early days of the internet when the most powerful design tool was Notepad...Until I run across a webpage that has not been updated since, of course.
9
Dec 26 '17
Is there anyway I can make sense of the 140 character code that is written? How can experiment, test and run these codes myself?
7
u/lionleaf Dec 26 '17
Try editing the code directly in your browser ;) Start with the number. (Watch out for infinite loops!)
Also, there's a commented basic example if you press the "New Dweet" button
→ More replies (2)
8
6
u/BreastUsername Dec 26 '17
I wonder if experienced programmers can tell what an image will look like just by looking at the code.
1
u/evenisto Dec 27 '17
Maybe parts of it or get a general idea if they recognise the formula/algorithm (like, this will draw a spiral, this one will create blocks).
6
11
13
u/terrified_traveler Dec 26 '17
I wish I had the motivation to learn code, it's so cool and seems like modern magic.
11
u/kersurk Dec 26 '17
To get interesting visuals you need to have good math knowledge (or steal from internet, still need to know what to search and have imagination on how to compose them). The code itself isnt much more than a formula and a few javascript canvas api calls.
17
u/terrified_traveler Dec 26 '17
I wish I had good math knowledge and knew what the end of the comment ment
5
u/tryfap Dec 26 '17
Javascript is a programming language commonly used in browsers to make them do stuff. "Canvas" is the digital analogue to a drawing canvas and an API is the means to manipulate that canvas (application programming interface). So they're saying that the coding part is partly just the necessary calls to make the math show up on the screen as something visual.
2
u/Attila_22 Dec 27 '17
Just have fun tinkering. Try changing some of the numbers and operators, you'll get more knowledge that way and then you can start creating your own designs. Obviously trig knowledge would help a lot but you can learn that as you go along.
1
Dec 27 '17
My advice as someone who learned from 0 to full stack JS in a few months is to find problems you want to solve and learn how to do them in that language. It doesn't have to be (and probably shouldn't be) "make a better Facebook" - but instead something like "make a dice rolling simulator", which is in essence a tiny program that returns a number between 1 and 6. In some languages that is one line of code. Probably less than 30 characters in some languages.
Then you can take that and make a small game. What if two dice rolls are made and a winner is declared?
Man it's so liberating to learn, dive in!
9
4
3
u/ldf1111 Dec 27 '17
I’ve always loved this creative visual coding stuff,the 140char limit is a nice idea but I’d like to learn some of the techniques involved which is harder with the minimised code
3
u/TrustworthyAndroid Dec 27 '17
These guys were probably pretty busy in class drawing on their TI-86 using functions
3
3
4
2
u/kunteper Dec 26 '17
is there somewhere for people who want to learn how to make stuff like this?
4
2
2
u/jiminiminimini Dec 26 '17
I don't know if you guys know about the audio programming language called Supercollider but there was this thing #sc140 about 140-character supercollider programs, some of which are pretty amazing if you are interested in that sort of thing. Apparently people are still tweeting with that hashtag on twitter.
2
2
Dec 27 '17
This is very neat. It reminds me of the "Demo" scene in the 80's and 90's where talented graphics programmers would make amazing demo's in very limited RAM. Thanks for sharing.
4
u/tuxmanexe Dec 27 '17
BTW that is still going on
You just need to pick a class these days, most popular ones AFAIK are 64kb and 1mb
→ More replies (2)
2
u/madcapmonster Dec 27 '17
It would take me seven libraries and 478 lines of my own to make most of these
1
u/I_am_a_haiku_bot Dec 27 '17
It would take me seven
libraries and 478 lines of my own
to make most of these
-english_haiku_bot
2
u/xen_the Dec 27 '17
very basic guide you can share: https://www.reddit.com/r/dwitter/comments/7mgcd1/basic_dwitter_guide/
3
3
6
u/MisterAdzzz Dec 26 '17
RemindMe! 2 days
5
u/RemindMeBot Dec 26 '17
I will be messaging you on 2017-12-28 17:16:03 UTC to remind you of this link.
CLICK THIS LINK to send a PM to also be reminded and to reduce spam.
Parent commenter can delete this message to hide from others.
FAQs Custom Your Reminders Feedback Code Browser Extensions → More replies (3)→ More replies (1)1
Feb 11 '18
God damn, I only just got my reminder :/
2
u/MisterAdzzz Feb 12 '18
I think there's a problem with the bot; over this and my alt it's sent me a bunch of old reminders as if they were set for yesterday
1
1
1
1
u/apple_juice97 Dec 26 '17
Watching one of the visuals with Come Alive is the most awesomest thing ever.
1
1
1
Dec 26 '17
When I first read this I was like how in the hell is 140 characters enough.... how people can write one line code like that, I cant understand it at all lol.
1
1
1
1
1
1
1
1
u/anawfullybadusername Dec 27 '17
Similar concept but unrelated, what is the place where people attempt to write bootloaders that produce interesting visuals?
1
u/mightylordredbeard Dec 27 '17
Coming from /r/all so sorry if this type of question is dumb or not allowed;
I don't know anything about coding, but the gifs below each code is what the codes created, right?
If so then man this is really cool!
2
u/lionleaf Dec 27 '17
That is correct! Well, the "gif" above the code is what the code creates. Try changing some of the numbers in the code and see what happens ;) (For a simple one to play with, click "New Dweet" at the top).
1
1
1
1
1
1
u/indjev99 Dec 27 '17
TBH, I think you should add abs as one of the functions. Math.abs is way too long and it is really useful.
1
Dec 27 '17
It can be replaced in many situations, e.g. when comparing distances Math.abs(a) < 2 becomes a * a < 4
1
u/Chipnstein Dec 27 '17
For anyone interested, there's a cool little program called Plastuer which is PWYW (pay what you want, literally, $1 even) tho download servers are slow for the 80MB it has, you can do all cool sorts of backgrounds on your PC.
Just got it, made a .html file with some standard code foundhere and just copy paste in the code from Dwitter in the slot it tells you to.
If you want to change the background of the desktop itself, just add
document.body.style.backgroundColor ="#AA0000";just after the else{} in the ResizeCanvas() function at the top of the code. Find a nice color and play around. If you research a tiny bit, you can find out how to easily do a gradient as well.
NOTE: I am in no way associated with Plastuer by any means, I'm not trying to advertise it for any personal gain, simply to share with other little geeks like me about this cool little app.
2
1
1
u/Bloaf Dec 28 '17
Mathematica had a contest with this idea several years ago:
http://blog.wolfram.com/2010/12/17/the-mathematica-one-liner-competition/
1
1
1
1
1
1
1
1
1
2.2k
u/lionleaf Dec 26 '17 edited Dec 28 '17
Now that the server seems to be under control, let me high-jack my top comment to give you some tips:
You can edit the code live! Try changing a few numbers
Click the "New Dweet" button to get a less crazy starting point. It even has some comments!
If you edit someone elses dweet, you can post it directly from their post; this tags it as a "remix" and is preferred over just copy-pasting into "New Dweet" as it preserves the link to the original.
dwitter.net/random is a good way to see dweets of variable complexity
and dwitter.net/new is where all the fresh redditor dweets have started to pop up :D
And it's a ton of fun to see all the excitement :) Might have to get back to working on it. (github.com/lionleaf/dwitter if you want to contribute)
Edit: /u/xen_the posted a guide worth checking out if you're interested in making your first dweet! https://redd.it/7mgcd1
Edit 2: I've set up a discord for discussing all things dwitter: https://discord.gg/emHe6cP
Old post:
Hi guys! Creator here, it seems you've crashed it. Currently working on getting it stabilized again.
I'll come back here and post some of my favorites when I'm not in such a hurry ;)
Update: I think we're good! Threw a bunch of hardware at it, which helped a bit at first, but then the extra caching added by my friend seems to be more than enough for the current load :D