pouët.net

Go to bottom
Particle Party by Desire [web]
screenshot added by HellMood on 2015-03-10 16:42:33
platform :
type :
release date : march 2015
release party : js1k 2015
compo : javascript 1k
ranked : 9th
  • 45
  • 2
  • 0
popularity : 61%
 61%
  • 0.96
alltime top: #3114
added on the 2015-03-10 16:42:33 by HellMood HellMood

popularity helper

increase the popularity of this prod by spreading this URL:

or via: facebook twitter pinterest tumblr

comments

From the submission notes:

Two million particles, raving to the beat ♪♫ Soundsystem & Fullscreen recommended!
My first production in the categories JS, 1K & WebGL
Tested on Windows7/Ubuntu with Chrome/Chromium/Firefox/Opera/Pale Moon (Chrome recommended)
Compressed using Closure Compiler & RegPack 3.02 & some manual tricks
Runs smooth @60fps@1920x1080 on my old Nvidia GTX 9800+ (from 2008)
So it should be no problem for current graphics hardware.
Not intended to be smooth on mobiles, cool if your mobile can handle it though ;)
Edit : iPhone5 and Xperia Z2 have 10-15fps
♪♫ By the way, i mean it, SOUNDSYSTEM! Turn the volume up !
♪♫ Let the bass kick, let the synths vibrate, let the shakers shake!
There will be a blog entry about this production soon, stay tuned :)
Thanks to:
Siorki, for his great RegPack
p01, for invitation and motivation
cmr & Frederic, for testing
added on the 2015-03-10 16:49:49 by HellMood HellMood
very smooth thingie :) Music is decent ( but listenting to Organic Stereo in the background works well too :D )
rulez added on the 2015-03-10 16:59:35 by sensenstahl sensenstahl
looks neat, sounds ok too
good luck in the compo :)
rulez added on the 2015-03-10 17:52:34 by wysiwtf wysiwtf
Superb, I love dancing particles.
rulez added on the 2015-03-10 18:03:17 by Ramon B5 Ramon B5
Very nice!
rulez added on the 2015-03-10 18:08:56 by Soundy Soundy
well I'm glad I didn't finish my entry .__.
rulez added on the 2015-03-10 18:15:15 by noby noby
Awww yiss love this spinny fractal stuff!
rulez added on the 2015-03-10 19:04:51 by TomoAlien TomoAlien
rulez added on the 2015-03-10 20:16:21 by maali maali
I think we have a winner.
rulez added on the 2015-03-10 21:28:30 by MuffinHop MuffinHop
Nice
rulez added on the 2015-03-10 22:34:34 by bitl bitl
Really REALLY nice!
Not fond of the classic IFS look though :\
rulez added on the 2015-03-10 22:55:16 by p01 p01
IFS rocks!!! Nice colours!
rulez added on the 2015-03-10 23:01:51 by DanLemon DanLemon
Playing with harmonics is always fun. :) Nice particles, too.
rulez added on the 2015-03-10 23:05:16 by Saga Musix Saga Musix
The screenshot above doesn't really capture it. Go watch it. :)
rulez added on the 2015-03-11 03:36:53 by Starchaser Starchaser
Black screen on my work laptop with Chrome and some Intel integrated graphics. Screenshot looks pretty.
added on the 2015-03-11 10:15:13 by Preacher Preacher
@Preacher, sad to hear that. For everybody else with problems, please report them here and for now, go with this >>>capture<<< (thx cmr) I'll integrate direct file rendering later. If anybody with a really good GPU can offer a 60fps/1080p capture, i'd highly appreciate that =)
added on the 2015-03-11 10:32:40 by HellMood HellMood
Lovely effect :)
rulez added on the 2015-03-11 10:41:15 by Preacher Preacher
Rave on, fractals.
rulez added on the 2015-03-11 10:42:23 by raer raer
cool
rulez added on the 2015-03-11 10:48:27 by Optimus Optimus
HellMood: Btw, did you notice that the audio fails silently in developer version of Firefox, Chrome and Opera :\

As for the capture, you can patch your time function to render and download all the frames separately* and combine the Audio with ffmpeg or similar.

*:
Code:;(function patchRafToDownloadEachFrame(raf){ var link = document.createElement('a'); var index = 0; window.requestAnimationFrame = function(f) { raf(f); link.href = g.canvas.toDataURL('image/jpeg', .95); link.download = ('000000' + index).slice(-8) + '.jpg'; link.dispatchEvent(new CustomEvent('click')); index++; } }(requestAnimationFrame);
HTH
This approach worked like a charm to capture MINAMI DISTRICT and MATRAKA.
added on the 2015-03-11 11:12:02 by p01 p01
Extremely slow in Chrome (and no Audio either). Tolerable speed (5 fps? Audio works though) in Firefox. Usually WebGL stuff works faster in Chrome, but not this time. :/
added on the 2015-03-11 11:56:49 by tomaes tomaes
Very cool!
rulez added on the 2015-03-11 12:26:45 by xTr1m xTr1m
p01, thanks! i will look into it :)

As for all the errors, please be patient. This is my first JS production. Same is true for 1K and WebGL. I tested like a dozen OS/browser combinations, and it works on every single one ... for me, that is, but on an eight year old computer(!) I have some suspects for performance problems, but for some problems i don't yet have an answer. Escpecially for Chrome and Fox (and somewhat modern hardware) i didn't expect ANY problem. Therefor, i'm thankful for any kind of information, regarding problems :)
added on the 2015-03-11 14:06:17 by HellMood HellMood
As for unexpected slowness in Chrome, this could be one reason :
Quote:
For some strange reason it's really slow in Chrome here. In Firefox it's mostly smooth, but about every second there's a lag with many frames skipped

Quote:
Hrrrm, it seems Chrome is using software rendering for webgl, indicating my graphics card has been blacklisted, trying to override it...

Quote:
Yup, now running at good speed!

Quote:
This one says "SwiftShader" if it's not using hardware acceleration: http://alteredqualia.com/tmp/webgl-maxparams-test/

(thanks again to cmr)
added on the 2015-03-11 14:15:27 by HellMood HellMood
Quote:
WebGL MAX parameters support

Max Vertex Attributes: 16
Max Varying Vectors: 28

Max Vertex Uniform Vectors: 1024
Max Fragment Uniform Vectors: 1024

Max Fragment Texture Image Units: 16
Max Vertex Texture Image Units: 16
Max Combined Texture Image Units: 32

Max 2D Texture Size: 8192
Max Cube Texture Size: 8192

Max Texture Anisotropy: 16

Point Size Range: 1 - 1024
Line Width Range: 1 - 1

Max Viewport Dimensions: 8192 - 8192
Max Renderbuffer Size: 8192

Framebuffer Red Bits: 8
Framebuffer Green Bits: 8
Framebuffer Blue Bits: 8
Framebuffer Alpha Bits: 8

Framebuffer Depth Bits: 24
Framebuffer Stencil Bits: 8
Framebuffer Subpixel Bits: 4

MSAA Samples: 4
MSAA Sample Buffers: 1

Supported Formats for UByte Render Targets : RGBA RGB
Supported Formats for Half Float Render Targets: RGBA RGB
Supported Formats for Full Float Render Targets: RGBA RGB

Max Multiple Render Targets Buffers: 8

High Float Precision in Vertex Shader: 23 (-2^127 - 2^127)
Medium Float Precision in Vertex Shader: 23 (-2^127 - 2^127)
Low Float Precision in Vertex Shader: 23 (-2^127 - 2^127)

High Float Precision in Fragment Shader: 23 (-2^127 - 2^127)
Medium Float Precision in Fragment Shader: 23 (-2^127 - 2^127)
Low Float Precision in Fragment Shader: 23 (-2^127 - 2^127)

High Int Precision in Vertex Shader: 0 (-2^24 - 2^24)
Medium Int Precision in Vertex Shader: 0 (-2^24 - 2^24)
Low Int Precision in Vertex Shader: 0 (-2^24 - 2^24)

High Int Precision in Fragment Shader: 0 (-2^24 - 2^24)
Medium Int Precision in Fragment Shader: 0 (-2^24 - 2^24)
Low Int Precision in Fragment Shader: 0 (-2^24 - 2^24)

Supported Extensions: ANGLE_instanced_arrays
EXT_blend_minmax
EXT_frag_depth
EXT_shader_texture_lod
EXT_sRGB
EXT_texture_filter_anisotropic
WEBKIT_EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
WEBGL_compressed_texture_s3tc
WEBKIT_WEBGL_compressed_texture_s3tc
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBKIT_WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_lose_context
WEBKIT_WEBGL_lose_context

WebGL Renderer: WebKit WebGL
WebGL Vendor: WebKit
WebGL Version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)

Unmasked Renderer: ANGLE (ATI Mobility Radeon HD 4500/5100 Series Direct3D11 vs_4_1 ps_4_1)
Unmasked Vendor: Google Inc.

The info I get from the test mentioned above. I guess the low precision int/float values trigger some fallback?
added on the 2015-03-11 14:48:15 by tomaes tomaes
This is my info:

Quote:

Max Vertex Attributes: 16
Max Varying Vectors: 10

Max Vertex Uniform Vectors: 254
Max Fragment Uniform Vectors: 221

Max Fragment Texture Image Units: 16
Max Vertex Texture Image Units: 4
Max Combined Texture Image Units: 20

Max 2D Texture Size: 8192
Max Cube Texture Size: 8192

Max Texture Anisotropy: 16

Point Size Range: 1 - 256
Line Width Range: 1 - 1

Max Viewport Dimensions: 8192 - 8192
Max Renderbuffer Size: 8192

Framebuffer Red Bits: 8
Framebuffer Green Bits: 8
Framebuffer Blue Bits: 8
Framebuffer Alpha Bits: 8

Framebuffer Depth Bits: 24
Framebuffer Stencil Bits: 8
Framebuffer Subpixel Bits: 4

MSAA Samples: 4
MSAA Sample Buffers: 1

Supported Formats for UByte Render Targets : RGBA RGB
Supported Formats for Half Float Render Targets: RGBA RGB
Supported Formats for Full Float Render Targets: RGBA RGB

Max Multiple Render Targets Buffers: 0

High Float Precision in Vertex Shader: 23 (-2127 - 2127)
Medium Float Precision in Vertex Shader: 23 (-2127 - 2127)
Low Float Precision in Vertex Shader: 23 (-2127 - 2127)

High Float Precision in Fragment Shader: 23 (-2127 - 2127)
Medium Float Precision in Fragment Shader: 23 (-2127 - 2127)
Low Float Precision in Fragment Shader: 23 (-2127 - 2127)

High Int Precision in Vertex Shader: 0 (-224 - 224)
Medium Int Precision in Vertex Shader: 0 (-224 - 224)
Low Int Precision in Vertex Shader: 0 (-224 - 224)

High Int Precision in Fragment Shader: 0 (-224 - 224)
Medium Int Precision in Fragment Shader: 0 (-224 - 224)
Low Int Precision in Fragment Shader: 0 (-224 - 224)

Supported Extensions: ANGLE_instanced_arrays
EXT_blend_minmax
EXT_frag_depth
EXT_shader_texture_lod
EXT_texture_filter_anisotropic
WEBKIT_EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
WEBGL_compressed_texture_s3tc
WEBKIT_WEBGL_compressed_texture_s3tc
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBKIT_WEBGL_depth_texture
WEBGL_lose_context
WEBKIT_WEBGL_lose_context

WebGL Renderer: WebKit WebGL
WebGL Vendor: WebKit
WebGL Version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)

Unmasked Renderer: ANGLE (Intel(R) HD Graphics 4600 Direct3D9Ex vs_3_0 ps_3_0)
Unmasked Vendor: Google Inc.
added on the 2015-03-11 15:03:46 by Preacher Preacher
Not likely, since i have the same values there
Quote:
Max Vertex Attributes: 16
Max Varying Vectors: 9

Max Vertex Uniform Vectors: 254
Max Fragment Uniform Vectors: 221

Max Fragment Texture Image Units: 16
Max Vertex Texture Image Units: 4
Max Combined Texture Image Units: 20

Max 2D Texture Size: 8192
Max Cube Texture Size: 8192

Max Texture Anisotropy: 16

Point Size Range: 1 - 8192
Line Width Range: 1 - 1

Max Viewport Dimensions: 8192 - 8192
Max Renderbuffer Size: 8192

Framebuffer Red Bits: 8
Framebuffer Green Bits: 8
Framebuffer Blue Bits: 8
Framebuffer Alpha Bits: 8

Framebuffer Depth Bits: 24
Framebuffer Stencil Bits: 8
Framebuffer Subpixel Bits: 4

MSAA Samples: 4
MSAA Sample Buffers: 1

Supported Formats for UByte Render Targets : RGBA RGB
Supported Formats for Half Float Render Targets: RGBA RGB
Supported Formats for Full Float Render Targets: RGBA RGB

Max Multiple Render Targets Buffers: 0

High Float Precision in Vertex Shader: 23 (-2127 - 2127)
Medium Float Precision in Vertex Shader: 23 (-2127 - 2127)
Low Float Precision in Vertex Shader: 23 (-2127 - 2127)

High Float Precision in Fragment Shader: 23 (-2127 - 2127)
Medium Float Precision in Fragment Shader: 23 (-2127 - 2127)
Low Float Precision in Fragment Shader: 23 (-2127 - 2127)

High Int Precision in Vertex Shader: 0 (-224 - 224)
Medium Int Precision in Vertex Shader: 0 (-224 - 224)
Low Int Precision in Vertex Shader: 0 (-224 - 224)

High Int Precision in Fragment Shader: 0 (-224 - 224)
Medium Int Precision in Fragment Shader: 0 (-224 - 224)
Low Int Precision in Fragment Shader: 0 (-224 - 224)

Supported Extensions: ANGLE_instanced_arrays
EXT_blend_minmax
EXT_frag_depth
EXT_shader_texture_lod
EXT_texture_filter_anisotropic
WEBKIT_EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
WEBGL_compressed_texture_s3tc
WEBKIT_WEBGL_compressed_texture_s3tc
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBKIT_WEBGL_depth_texture
WEBGL_lose_context
WEBKIT_WEBGL_lose_context

WebGL Renderer: WebKit WebGL
WebGL Vendor: WebKit
WebGL Version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)

Unmasked Renderer: ANGLE (NVIDIA GeForce 9800 GTX+ Direct3D9Ex vs_3_0 ps_3_0)
Unmasked Vendor: Google Inc.


Maybe an ATI thing? Or D3D11? Rest looks unsuspicious ... How does this one perform for you? >>>One Million / Small<<<
added on the 2015-03-11 15:05:24 by HellMood HellMood
HellMood: that version works for me. The other one didn't.
added on the 2015-03-11 15:06:52 by Preacher Preacher
^^ That version performs a lot better on both FF and Chrome. Still no audio in Chrome though.
added on the 2015-03-11 15:15:32 by tomaes tomaes
I simply reduced the number to one million and scaled it down a little, so that particles don't go offsreen (huge performance killer). Glad to have at least a quick workaround :)

For the audio, in short, what does this test give you?
http://mohayonao.github.io/web-audio-test-api/
i have (top right corner)
Quote:
passes: 208
failures: 0
added on the 2015-03-11 15:25:59 by HellMood HellMood
Quote:
what does this test give you?

A 404, because you br0ked the URL. ;) (or pouet did)

Other than that, it looks good:
Quote:
passes: 208 failures: 0 duration: 0.71s

Interestingly, there are 10 failures on FF, where Audio works just fine.
added on the 2015-03-11 15:32:24 by tomaes tomaes
yeah, makes perfect sense oO

p01 said audio "fails silently", so if you rightclick/"inspect element" on the canvas, any errors in sight?

this is what i do to setup audio:
Code:f = new AudioContext(); w = f.createScriptProcessor(8192,0,1); w.connect(f.destination); w.onaudioprocess=function(e){...}

so one of these calls most likely fails
added on the 2015-03-11 15:40:10 by HellMood HellMood
BB Image

^^ No errors as far as I can tell. On the GPU side, everything is working as expected.
added on the 2015-03-11 15:48:50 by tomaes tomaes
hellmood: try createScriptProcessor(8192,1,1) instead. 0 is invalid on the new spec.
added on the 2015-03-11 15:52:17 by psenough psenough
works fine on my old macmini with onboard gfx chip :)
rulez added on the 2015-03-11 15:55:21 by psenough psenough
Yeah, cause this works.

And it's using:
Code:// Create a ScriptProcessorNode with a bufferSize of 4096 and a single input and output channel var scriptNode = audioCtx.createScriptProcessor(4096, 1, 1); console.log(scriptNode.bufferSize);
added on the 2015-03-11 16:00:15 by tomaes tomaes
Cool stuff!
rulez added on the 2015-03-11 16:02:20 by Rob Rob
Quote:
Yeah, cause this works.

(but holy crap is it noisy. Like someone down-sampled it to 2bit and mixed it with a bucket of white noise. Don't know what's up with that. :D)
added on the 2015-03-11 16:04:42 by tomaes tomaes
@tomaes, how is this for you? http://hellmood.111mb.de/pp1MsmallAudio.html
added on the 2015-03-11 16:08:04 by HellMood HellMood
HellMood: Yeah. Shit works. Thumb for good customer support. ;) (effect + ambiance is pretty sweet, too)
rulez added on the 2015-03-11 16:16:56 by tomaes tomaes
Finally! ^_^ Thanks to all of you guys! I think i'll brighten this one up a little to compensate the lower density and then resubmit :)
added on the 2015-03-11 16:19:50 by HellMood HellMood
nice effect
rulez added on the 2015-03-12 12:37:20 by EviL EviL
The improved version is on : http://js1k.com/2015-hypetrain/demo/2313
I hope i mentioned everybody : http://js1k.com/2015-hypetrain/details/2313
added on the 2015-03-12 18:34:43 by HellMood HellMood
Cool 1k.
rulez added on the 2015-03-13 11:34:56 by sm sm
very enjoyable.
rulez added on the 2015-03-13 23:52:16 by wertstahl wertstahl
very nice
rulez added on the 2015-03-14 08:35:38 by SiR SiR
cool
rulez added on the 2015-03-14 08:41:48 by Igoronimo Igoronimo
It didn't work in my SeaMonkey v2.33 web browser on my very old, updated Windows XP Pro SP3 machine. http://js1k.com/2015-hypetrain/demo/2322 worked though!
added on the 2015-03-14 17:22:47 by AntDude AntDude
Colorful beauty :)
rulez added on the 2015-03-14 20:31:39 by Sapphire Sapphire
Loving it. Especially the sound quality is amazing. It does not look and feel like a Javascript 1k ... it goes way beyond that.
rulez added on the 2015-03-14 23:02:50 by homecoded homecoded
Fascinating!
rulez added on the 2015-03-17 10:06:32 by subzey subzey
it's quite something
cool 1k synth!
rulez added on the 2015-03-17 14:02:04 by juice juice
I kept away from HSV for so long, finally abused it to it´s best. This said: Good choice for coloring! ;)
Music fits aswell, especially thanks to the sound-quality of your synth!
Really nice job here! Keep em coming!
rulez added on the 2015-03-18 10:39:54 by ɧ4ɾɗվ. ɧ4ɾɗվ.
### song, particles dancing ###
rulez added on the 2015-03-18 13:20:45 by break break
nice
rulez added on the 2015-03-19 14:28:49 by e64 e64
hot stuff
rulez added on the 2015-03-19 14:38:15 by superplek superplek
That is impressive.
rulez added on the 2015-03-20 12:29:02 by TheT(ourist) TheT(ourist)
Yes I see the Julia fractal set there... :)
rulez added on the 2015-03-23 15:28:15 by prowler prowler
cool!
rulez added on the 2015-03-26 21:29:02 by sINk sINk
Nice IFS!
Youtube of JS, really computing is getting weird!
rulez added on the 2015-04-15 19:19:58 by baah baah
wow! nice particle fractal :)
rulez added on the 2015-05-19 13:41:38 by rez rez
nice
rulez added on the 2015-06-04 23:51:59 by rudi rudi
Great and hot!
rulez added on the 2015-08-10 22:47:27 by sim sim
no download no prod
added on the 2015-10-18 18:05:07 by Pirx Pirx
- right click on "download"
- save as (html)
- open
added on the 2015-10-18 18:13:31 by HellMood HellMood
7.2KB
added on the 2015-10-18 18:15:54 by Pirx Pirx
while on the demo site, click on "details" (which will lead you here) There you will find the 1017 bytes submission. It runs only in (or with) the provided "shim" file (read here or get it directly here) so a direct link to the submission would make not much sense ;)
added on the 2015-10-18 18:22:19 by HellMood HellMood
For me 1KB prod is <=1KB of file(s) that I can get and run offline, without any text copy-pasting and things like that. Prod archive at first, online version as a supplement.
added on the 2015-10-18 18:38:51 by Pirx Pirx
Oh, I didn't thumb this?
rulez added on the 2015-10-18 18:55:10 by Triace Triace
@Pirx
Every piece of code needs an defined environment to be executed in. In the case of "JS1K" this is the predefined (html) SHIM, which grants equality among all web browsers out there and somewhat fair competition. Also, instead of forcing the viewer to download the 1K of JS code and manually paste it into a valid HTML file and then run, the whole thing is just one click away, which i think is very convenient.

It's somewhat like on MSDOS, which you seem to be very familiar with. The x86 code does not magically appear in the memory and executes itself. There is the loading function of the underlying OS which does this, and sets up some other things. The code which does this, does not count for the prod itself - very much like the SHIM for the JS1K does not count for the size. At least that's what the (sub)scene of JS coders seem to have agreed on, since there is no default operating system for JS.

So, to run these pieces of 1K JS code correctly, they need to be placed in their environment. To spare people from manually doing this, there are prepared websites, one click away.
added on the 2015-10-18 19:16:42 by HellMood HellMood
Thank you for the explanation, despite the fact everything was fully clear for me before (and the DOS analogy is little inaccurate, while you comparing environment (DOS) and the intermediate layer (HTML lauoyt) used by the environment (browser)). I just confess the principle that production should be spreaded in archived form, and online version should be provided additionally, like videos. As an old sizecoder, I'm attached to file sizes. So for me would be really welcome to get the zip containing essential prod (script) and needed permissible stuff (html) as separate files, to have unequivocal what is what. If it's not possible or too uncomfortable in JS1K world, or against its rules, I can respect it and treat this 7KB file as 1KB prod.
added on the 2015-10-18 23:11:52 by Pirx Pirx
And the intro is really cool!
rulez added on the 2015-10-18 23:12:51 by Pirx Pirx
what plek said
rulez added on the 2016-07-15 21:13:03 by Flashira Flashira
yep

submit changes

if this prod is a fake, some info is false or the download link is broken,

do not post about it in the comments, it will get lost.

instead, click here !

[previous edits]

add a comment

Go to top