{"id":20815868,"url":"https://github.com/aurbano/nebula","last_synced_at":"2025-05-07T12:25:50.598Z","repository":{"id":22025817,"uuid":"25352308","full_name":"aurbano/Nebula","owner":"aurbano","description":"An HTML5+JS nebulosa effect, it displays text by making circles float inside it.","archived":false,"fork":false,"pushed_at":"2019-12-18T21:09:40.000Z","size":2328,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T10:04:31.767Z","etag":null,"topics":["canvas","experiment","javascript","webgl"],"latest_commit_sha":null,"homepage":"https://aurbano.github.io/Nebula/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aurbano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-17T10:19:35.000Z","updated_at":"2024-07-24T17:24:53.000Z","dependencies_parsed_at":"2022-08-18T17:32:58.371Z","dependency_job_id":null,"html_url":"https://github.com/aurbano/Nebula","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2FNebula","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2FNebula/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2FNebula/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2FNebula/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aurbano","download_url":"https://codeload.github.com/aurbano/Nebula/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252875324,"owners_count":21818001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","experiment","javascript","webgl"],"created_at":"2024-11-17T21:26:39.256Z","updated_at":"2025-05-07T12:25:50.572Z","avatar_url":"https://github.com/aurbano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nebula\n\n\u003e An HTML5+JavaScript Nebula text effect, it displays text by making rectangles/circles float inside it.\n\n![Nebula](https://raw.githubusercontent.com/aurbano/Nebula/master/misc/screenshot.png)\n\n## Installation\nDownload the source code and include the files in the `src` folder (css and js). You can obviously customize the css to your needs.\n\nRead more about it here: https://aurbano.eu/note/2014-10-21-making-of-nebula-text/\n\nIt requires jQuery to work, so make sure it's included before the `nebula.js` script.\n\n## Demo\nI've built some visualizations using Nebula, if you have created something cool let me know via an issue and I'll add it here\n\n* [Main demo](https://aurbano.github.io/Nebula/): Sample demo with dat.gui controls to play with the settings.\n* [Music Nebula](https://aurbano.github.io/Nebula/music.html): Nebula instance synced (automatically) with an audio track for explosions.\n* [Embedded](https://aurbano.eu/note/2014-10-21-making-of-nebula-text/): Example where I have embedded Nebula inside a div on a page.\n\n## Usage\nAdd an HTML container where you would like the text to appear:\n\n```html\n\u003cdiv id=\"bg\" style=\"height:100%; width:100%;\"\u003e\u003c/div\u003e\n```\n\n**Nebula will resize the experiment to fit this container, so remember to set the size via CSS.**\n\nNow add the following script:\n\n```javascript\n$(document).ready(function(){\n      var text = new Nebula({\n            container: $('#bg')\n      });\n      \n      var name = prompt(\"What's your name?\");\n      \n      // Write the name using rectangles of the specified colors\n      text.write(name, [0xff00ff, 0x63DBFF]);\n      \n      // Automatic resizing\n      $('#bg').resize(function(e){text.resizeCanvas(); });\n\n      // Explosions on click\n      $('#bg').click(function(e){\n            text.explosion(\n                  e.pageX - $(this).offset().left,\n                  e.pageY - $(this).offset().top\n            );\n      });\n});\n```\n\nThe function that starts the drawing is `write(text, colors)`. It accepts 2 parameters as you can see in the example:\n\n* `text`: Determines the text to be drawn\n* `colors`: This must be an array of colors in decimal format. For each color a set of particles will appear.\n\nNebula uses [Pixi.js](https://github.com/GoodBoyDigital/pixi.js) as the rendering engine, it will default to WebGL if possible and fallback to HTML5 canvas.\n\n## Options\nThe following options can be passed to the constructor for configuration, use the dat.gui controls on the demo to experiment with them.\n\n*Some parameters are only used when setting a new text (resolution, tolerance... ) so you might have to write a new text and hit Enter on the demo.*\n\n\n| Parameter   |      Values      | Default      |     Description |\n|-------------|------------------|--------------|-----------------|\n| container   | DOM Element      |  $('#nebula') | jQuery element where the Nebula should appear |\n| resolution  | `int`            |  20 | Resolution used to determine the amount of nodes |\n| tolerance | `float` | 0 | Tolerance when determining where to place the edges, it shouldn't matter unless at high resolutions|\n| minRad | `int` | 0 | Minimum radius that a node can have |\n| maxRad | `int` | 40 | Maximum radius that a node can have |\n| maxInitRad | `float` | 0.001 | Maximum starting radius, lower looks better because they start growing |\n| maxSpeed | `float` | 2 | Maximum speed that a node can have |\n| speedReduction | `float` | 0.8 | This multiplies the speed after it passes the maxSpeed parameter to slow it down. |\n| variation | `float` | 0.2 | Amount of variation in the radius from one cycle to the next|\n| explosionRadius | `int`| 100 | Nodes affected by explosions, higher is more expensive |\n| explosionForce | `float` | 0.01 | Force generated in an explosion |\n| explosionBlur | `float` | 1 | Blur Radius increment that each explosion produces |\n| maxExplosionBlur | `float` | 20 | Maximum explosion blur |\n| attraction | `float` | 0.08 | Attraction that the nodes have toward their true center |\n| debug | `boolean` | true | Log messages to the console |\n| drawFn | `String` | 'rectangle' | Drawing function used, built in functions are 'circle' and 'rectangle'. |\n| showForce | `boolean` | false | Draw force lines, very expensive |\n| showDistance | `boolean` | false | Draw lines joining each node with its real center, very expensive. |\n| showEdges | `boolean` | false | Draw circles indicating each real node center. |\n| showNodes | `boolean` | true | Draw the particles |\n| resolutionScale | `int` | 35 | Scale the edge resolution, it modifies the number of nodes created |\n| radLimitScale | `int` | 10600 | Limit the maximum radius, play with this number to see what it actually does. |\n| bgColor | `int` | 0x000000 | Decimal background color, you can use 0xHEX notation, see default value |\n| blendMode | `String` | ADD | Blend mode used, options are:  NORMAL, ADD, MULTIPLY, SCREEN, OVERLAY, DARKEN, LIGHTEN, COLOR\\_DODGE, COLOR\\_BURN, HARD\\_LIGHT, SOFT\\_LIGHT, DIFFERENCE, EXCLUSION, HUE, SATURATION, COLOR, LUMINOSITY|\n\nTo understand what each parameter does open the `index.html` file and play with the dat.gui controls.\n\n## Explosions\nNebula includes an explosion system that you can call using `text.explosion(x, y);`.\n\n### Example\n\n```javascript\nvar text = new Nebula({\n      container: $('#bg')\n});\n\n$('#bg').click(function(e){\n      text.explosion(\n            e.pageX - $(this).offset().left,\n            e.pageY - $(this).offset().top\n      );\n});\n```\n\n## Resizing\nIf you want the Nebula element to fit the container after resizing, call `text.resizeCanvas();`\n\n## Contributing\nFeel free to add any issues or send pull requests for bug fixes or new features, they are always welcome!\n\n## License\nNebula is released under the GNU GPLv2 License.\n\n-------\n\nDeveloped by [Alejandro U. Alvarez](https://aurbano.eu)\n\n[![Analytics](https://ga-beacon.appspot.com/UA-3181088-16/nebula/readme)](https://github.com/aurbano)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faurbano%2Fnebula","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faurbano%2Fnebula","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faurbano%2Fnebula/lists"}