Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Galaxy</title> </head> <body> <canvas id="canvas"></canvas> </body> </html>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #canvas { width: 100%; height: 100%; display: block; }
var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var size = [ 800 , 600 ] var mult = 1 var prec = 0.001 var count = 50 var vel = 0.1 var speed = 10 var mass = 0.001 function resize( ) { size[0] = canvas.width = document.documentElement.offsetWidth size[1] = canvas.height = document.documentElement.offsetHeight mult = Math.min( size[0] , size[1] ) / 10 context.fillStyle = "#000000" context.fillRect( 0 , 0 , size[0] , size[1] ) } resize() window.onresize = resize var obj = [] for( var i = 0 ; i < count ; ++i ) { obj.push({ pos : [ Math.random() - 0.5 , Math.random() - 0.5 ] , vel : [ ( Math.random() - 0.5 ) * vel , ( Math.random() - 0.5 ) * vel ] , acc : [ 0 , 0 ], mass : Math.random() * mass , get size() { return Math.pow( this.mass * 3 / 4 / Math.PI , 2/3 ); } }) } function draw( ) { context.fillStyle = "#000000" context.globalAlpha = .02 context.fillRect( 0 , 0 , size[0] , size[1] ) context.globalAlpha = 1 obj.forEach( function( o ) { context.beginPath() context.strokeStyle = "#00FF00" context.arc( size[0] / 2 + o.pos[0] * mult , size[1] / 2 + o.pos[1] * mult , o.size * mult , 0 , 2*Math.PI ) context.stroke() }) } function dist( p1 , p2 ) { return Math.sqrt( Math.pow( p2[0] - p1[0] , 2 ) + Math.pow( p2[1] - p1[1] , 2 ) ) } function calc() { obj.forEach( function( o1 ) { if( o1.mass === 0 ) return var pow = [ 0 , 0 ] obj.forEach( function( o2 , i ) { if( o1 === o2 ) return if( o2.mass === 0 ) return var r = dist( o1.pos , o2.pos ) var f = o1.mass * o2.size / Math.pow( r , 2 ) / 100 pow[0] += ( o2.pos[0] - o1.pos[0] ) * f / r pow[1] += ( o2.pos[1] - o1.pos[1] ) * f / r if( r < ( o1.size + o2.size ) ) { var m = o1.mass + o2.mass o1.vel[0] = ( o1.vel[0]*o1.mass + o2.vel[0]*o2.mass ) / m o1.vel[1] = ( o1.vel[1]*o1.mass + o2.vel[1]*o2.mass ) / m o1.pos[0] = ( o1.pos[0]*o1.mass + o2.pos[0]*o2.mass ) / m o1.pos[1] = ( o1.pos[1]*o1.mass + o2.pos[1]*o2.mass ) / m o1.mass += o2.mass o2.mass = 0 } }) o1.acc[0] = pow[0] / o1.size o1.acc[1] = pow[1] / o1.size } ) obj.forEach( function( o ) { o.vel[0] += o.acc[0] * prec o.vel[1] += o.acc[1] * prec } ) obj.forEach( function( o ) { o.pos[0] += o.vel[0] * prec o.pos[1] += o.vel[1] * prec } ) } draw() requestAnimationFrame( function step(){ for( var i = 0 ; i < speed ; ++i ) calc() draw() if( speed ) requestAnimationFrame( step ) } )