4 ms·

Antisocial: Beautiful Javascript Demo (and amazing demotool to play with)

29 points by notdarkyet 18y ago

notdarkyet 18y ago
I have never worked with Javascript myself, but do any of you have any insight on how you think this was done? I saw a mention of jQuery (which I am also not familiar with) in the .nfo file, but is this built upon some graphical engine you all might be familiar with? I am just curious if thins is done all from scratch.
- tdonia 18y ago
  it's using the canvas tag to render the graphical area. you can read up on it here: http://en.wikipedia.org/wiki/Canvas_ http://en.wikipedia.org/wiki/Canvas_(HTML_element) http://developer.mozilla.org/en/Canvas_tutorial http://developer.mozilla.org/en/Canvas_tutorial
  - notdarkyet 18y ago
    Thanks a bunch, the tutorial is really interesting.
petercooper 18y ago
Like a nostalgic punch in the face! Excellent! Doesn't it feel like sometimes we're going in circles though? Second Reality, released in 1993, (video - http://au.youtube.com/watch?v=XtCW-axRJV8 http://au.youtube.com/watch?v=XtCW-axRJV8 ) was perhaps the most famous "demo" ever, and technically it was more advanced than this. Looking at a lot of JavaScript and most Flash games today, it seems a lot of supposed achievements aren't really technologically interesting anymore - they're just interesting because they're in a new medium or are networked. No disrespect to these guys for a nice bit of JavaScript work, but isn't it just a little bit of a shame that JS can't even deliver what was considered cutting edge a whopping 15 years ago? (note, though, that Flash kinda can - http://pouet.net/prod.php?which=25494 http://pouet.net/prod.php?which=25494)
huhtenberg 18y ago
Very funny - http://img368.imageshack.us/img368/7017/image29cb9.png http://img368.imageshack.us/img368/7017/image29cb9.png Unless I am missing something obvious, since when do I have to add (trust * with *) to get Flash sounds ? Something that's enabled by default anyhow.
- schill 18y ago
  If you're loading the demo offline (ie., from the local file system via file:// or some such), Flash enforces strict (but good) security which doesn't allow JS and Flash to talk by default. To allow JS+Flash (ExternalInterface) to work together, you have to whitelist the specific location (by either whitelisting a whole directory/path, or specific file). I recommend just whitelisting the parent directory, as opposed to the root. These types of restrictions do not apply when the content is served over HTTP, ie., as with the live site. (I write and maintain SoundManager 2, which is a JS + Flash sound library as used in this nifty demo - I'm honored. :P)
  - huhtenberg 18y ago
    I'm getting this error when clicking on 'Watch demo' on http://antisocial.demozoo.org http://antisocial.demozoo.org page. I do have a FlashBlock installed though, perhaps that's the reason for the error.
    - schill 18y ago
      You'll need to whitelist that page within Flashblock, then it should work.
mileszs 18y ago
More information about the Antisocial demo can be found at the gentleman's blog (this article in particular): http://matt.west.co.tt/demoscene/antisocial/ http://matt.west.co.tt/demoscene/antisocial/ He explains things in a bit more depth. Worth a skim, at least.
alex_c 18y ago
My favorite part from the .nfo: "Internet Explorer? Hahahahahaha." I was curious how they did the sound, since I wasn't aware you can do sound strictly with JavaScript ("WebKit-based browsers (Safari or Google Chrome) should hopefully use native HTML / Javascript audio"). Looks like they're using this: http://schillmania.com/projects/soundmanager2/ http://schillmania.com/projects/soundmanager2/ Which looks like a JavaScript wrapper around a Flash-based player. Pretty interesting.
rokhayakebe 18y ago
Social Networking today has turned into Social Mating. -"Hello who are you?" -"I am your soulmate" -"Can I add you to my friendlists?" -"How about we go fornicate instead?" We will see a small baby boom in 10-15 years that is due to Social Mating.
rmason 18y ago
When will these guys get over locking into just one browser? Once I found out it only runs in Firefox just didn't care how fantastic it was cause he lost me.
- ryanspahn 18y ago
  Check out the latest browser statistics.. Firefox within a year should have 50% of the market http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_stats.asp Its all personal preference, but as designer dealing with IE and seeing these statistics makes me smile!

29 points by notdarkyet 18y ago

I have never worked with Javascript myself, but do any of you have any insight on how you think this was done? I saw a mention of jQuery (which I am also not familiar with) in the .nfo file, but is this built upon some graphical engine you all might be familiar with? I am just curious if thins is done all from scratch.

tdonia 18y ago
it's using the canvas tag to render the graphical area. you can read up on it here: http://en.wikipedia.org/wiki/Canvas_ http://en.wikipedia.org/wiki/Canvas_(HTML_element) http://developer.mozilla.org/en/Canvas_tutorial http://developer.mozilla.org/en/Canvas_tutorial
- notdarkyet 18y ago
  Thanks a bunch, the tutorial is really interesting.

petercooper 18y ago

Like a nostalgic punch in the face! Excellent! Doesn't it feel like sometimes we're going in circles though? Second Reality, released in 1993, (video - http://au.youtube.com/watch?v=XtCW-axRJV8 http://au.youtube.com/watch?v=XtCW-axRJV8 ) was perhaps the most famous "demo" ever, and technically it was more advanced than this. Looking at a lot of JavaScript and most Flash games today, it seems a lot of supposed achievements aren't really technologically interesting anymore - they're just interesting because they're in a new medium or are networked. No disrespect to these guys for a nice bit of JavaScript work, but isn't it just a little bit of a shame that JS can't even deliver what was considered cutting edge a whopping 15 years ago? (note, though, that Flash kinda can - http://pouet.net/prod.php?which=25494 http://pouet.net/prod.php?which=25494)

huhtenberg 18y ago

Very funny - http://img368.imageshack.us/img368/7017/image29cb9.png http://img368.imageshack.us/img368/7017/image29cb9.png Unless I am missing something obvious, since when do I have to add (trust * with *) to get Flash sounds ? Something that's enabled by default anyhow.

schill 18y ago
If you're loading the demo offline (ie., from the local file system via file:// or some such), Flash enforces strict (but good) security which doesn't allow JS and Flash to talk by default. To allow JS+Flash (ExternalInterface) to work together, you have to whitelist the specific location (by either whitelisting a whole directory/path, or specific file). I recommend just whitelisting the parent directory, as opposed to the root. These types of restrictions do not apply when the content is served over HTTP, ie., as with the live site. (I write and maintain SoundManager 2, which is a JS + Flash sound library as used in this nifty demo - I'm honored. :P)
- huhtenberg 18y ago
  I'm getting this error when clicking on 'Watch demo' on http://antisocial.demozoo.org http://antisocial.demozoo.org page. I do have a FlashBlock installed though, perhaps that's the reason for the error.
  - schill 18y ago
    You'll need to whitelist that page within Flashblock, then it should work.

mileszs 18y ago

More information about the Antisocial demo can be found at the gentleman's blog (this article in particular): http://matt.west.co.tt/demoscene/antisocial/ http://matt.west.co.tt/demoscene/antisocial/ He explains things in a bit more depth. Worth a skim, at least.

alex_c 18y ago

My favorite part from the .nfo: "Internet Explorer? Hahahahahaha." I was curious how they did the sound, since I wasn't aware you can do sound strictly with JavaScript ("WebKit-based browsers (Safari or Google Chrome) should hopefully use native HTML / Javascript audio"). Looks like they're using this: http://schillmania.com/projects/soundmanager2/ http://schillmania.com/projects/soundmanager2/ Which looks like a JavaScript wrapper around a Flash-based player. Pretty interesting.

rokhayakebe 18y ago

Social Networking today has turned into Social Mating. -"Hello who are you?" -"I am your soulmate" -"Can I add you to my friendlists?" -"How about we go fornicate instead?" We will see a small baby boom in 10-15 years that is due to Social Mating.

rmason 18y ago

When will these guys get over locking into just one browser? Once I found out it only runs in Firefox just didn't care how fantastic it was cause he lost me.

ryanspahn 18y ago
Check out the latest browser statistics.. Firefox within a year should have 50% of the market http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_stats.asp Its all personal preference, but as designer dealing with IE and seeing these statistics makes me smile!