Skip to content

Instantly share code, notes, and snippets.

@mir4a

mir4a/Aquatilis.markdown

Forked from anonymous/Aquatilis.markdown
Created April 23, 2014 21:36
Show Gist options
  • Save mir4a/11233315 to your computer and use it in GitHub Desktop.
Save mir4a/11233315 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Aquatilis.markdown
Raw
index.html
<!--
The particles swimming around in the background of the Aquatilis website: http://aquatilis.tv
Original particle effect forked from Justin Windle's Gravity field experiment: http://codepen.io/soulwire/pen/begkI/
-->
<a href="http://aquatilis.tv" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="215.313px" height="29.479px" viewBox="0 0 215.313 29.479" enable-background="new 0 0 215.313 29.479" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M210.64,8.103l-1.479-0.608c-2.077-0.849-2.953-1.503-2.953-2.955c0-1.409,1.123-2.355,2.953-2.355
c1.751,0,2.735,0.777,3.448,1.796l1.585-0.874c-0.985-1.452-2.545-2.472-5.033-2.472c-2.792,0-4.894,1.577-4.894,3.952
c0,2.303,1.45,3.442,4.1,4.509l1.477,0.607c2.328,0.92,3.503,1.771,3.503,3.442c0,1.745-1.697,2.812-3.857,2.812
c-2.626,0-3.911-1.188-4.786-2.571l-1.641,0.777c0.987,1.747,2.926,3.347,6.483,3.347c3.334,0,5.769-1.65,5.769-4.364
C215.313,10.671,213.729,9.312,210.64,8.103z"></path>
<path fill="#FFFFFF" d="M72.708,10.115c0,3.854-0.972,5.845-4.705,5.845c-3.729,0-4.701-2.172-4.701-5.845V0.893h-2.033v9.768
c0,4.747,1.91,7.211,6.734,7.211c4.828,0,6.741-2.356,6.741-7.211V0.893h-2.036V10.115z"></path>
<polygon fill="#FFFFFF" points="115.098,2.776 120.421,2.776 120.421,17.249 122.454,17.249 122.454,2.776 127.776,2.776
127.776,0.893 115.098,0.893 "></polygon>
<rect x="142.395" y="0.802" fill="#FFFFFF" width="2.059" height="16.508"></rect>
<polygon fill="#FFFFFF" points="163.543,0.893 161.512,0.893 161.512,17.249 172.656,17.249 172.656,15.369 163.543,15.369 "></polygon>
<rect x="187.288" y="0.802" fill="#FFFFFF" width="2.062" height="16.508"></rect>
<path fill="#FFFFFF" d="M37.929,0c-4.874,0-8.449,3.605-8.449,8.574c0,4.771,3.304,8.25,7.885,8.516v2.057h1.375v-2.068
c4.464-0.374,7.677-3.818,7.677-8.505C46.416,3.605,42.81,0,37.929,0z M38.739,15.156v-1.702h-1.375v1.727
c-3.347-0.271-5.794-2.935-5.794-6.607c0-3.878,2.726-6.665,6.358-6.665c3.67,0,6.365,2.787,6.365,6.665
C44.294,12.131,41.987,14.777,38.739,15.156z"></path>
<polygon fill="#FFFFFF" points="7.339,1.035 0,17.249 1.524,17.249 2.004,17.249 8.073,17.249 8.073,15.445 2.82,15.445
3.977,12.887 4.835,10.993 8.117,3.801 11.426,10.993 12.259,12.887 14.29,17.249 16.319,17.249 8.897,1.035 "></polygon>
<polygon fill="#FFFFFF" points="94.97,1.036 87.63,17.251 89.63,17.251 89.631,17.249 95.788,17.249 95.788,15.445 90.447,15.445
91.604,12.889 92.465,10.994 95.745,3.803 99.058,10.994 99.889,12.889 101.92,17.251 103.947,17.251 96.525,1.036 "></polygon>
</g>
<g opacity="0.4">
<path fill="#FFFFFF" d="M73.708,26.965l-1.914-2.364h0.724l1.562,1.905l1.552-1.905h0.715l-1.914,2.337l1.967,2.417H75.64
l-1.578-1.958l-1.597,1.958h-0.697L73.708,26.965z"></path>
<path fill="#FFFFFF" d="M82.464,24.601h2.726c0.936,0,1.491,0.494,1.491,1.288s-0.521,1.385-1.411,1.385h-2.215v2.082h-0.591
V24.601z M85.154,26.718c0.601,0,0.908-0.273,0.908-0.777c0-0.494-0.308-0.793-0.882-0.793h-2.126v1.57H85.154z"></path>
<path fill="#FFFFFF" d="M107.588,26.992c0,1.367-0.908,2.364-2.496,2.364h-2.038v-4.754h2.038
C106.636,24.601,107.588,25.615,107.588,26.992z M103.646,25.148v3.661h1.446c1.227,0,1.888-0.759,1.888-1.826
c0-1.067-0.706-1.834-1.888-1.834H103.646z"></path>
<path fill="#FFFFFF" d="M113.927,24.575h0.6v4.798h-0.6V24.575z"></path>
<path fill="#FFFFFF" d="M122.074,25.148h-2.002v-0.547h4.596v0.547h-2.003v4.208h-0.591V25.148z"></path>
<path fill="#FFFFFF" d="M130.222,24.575h0.601v4.798h-0.601V24.575z"></path>
<path fill="#FFFFFF" d="M137.161,26.992c0-1.447,1.041-2.497,2.461-2.497c1.421,0,2.471,1.05,2.471,2.497
c0,1.446-1.05,2.487-2.471,2.487C138.202,29.479,137.161,28.438,137.161,26.992z M141.475,26.992c0-1.129-0.784-1.941-1.853-1.941
c-1.058,0-1.853,0.812-1.853,1.941c0,1.129,0.795,1.932,1.853,1.932C140.69,28.923,141.475,28.112,141.475,26.992z"></path>
<path fill="#FFFFFF" d="M148.422,24.601h0.309l3.088,3.555v-3.555h0.591v4.754h-0.3l-3.097-3.555v3.555h-0.591V24.601z"></path>
<g>
<rect x="62.904" y="26.701" fill="#FFFFFF" width="3.527" height="0.547"></rect>
<rect x="62.904" y="28.809" fill="#FFFFFF" width="3.527" height="0.547"></rect>
<rect x="62.904" y="24.601" fill="#FFFFFF" width="3.527" height="0.547"></rect>
</g>
<g>
<rect x="93.152" y="26.709" fill="#FFFFFF" width="3.527" height="0.547"></rect>
<rect x="93.152" y="28.817" fill="#FFFFFF" width="3.527" height="0.547"></rect>
<rect x="93.152" y="24.61" fill="#FFFFFF" width="3.527" height="0.547"></rect>
</g>
</g>
</svg>
</a>
Raw
script.coffee
NUM_PARTICLES = 260
TAIL_LENGTH = 8
MAX_FORCE = 12
FRICTION = 0.48
GRAVITY = 9.81
COLORS = [
'#fff'
]
class Particle
constructor: ( @x = 0.0, @y = 0.0, @mass = 1.0 ) ->
@tail = []
@radius = @mass * 0.25
@charge = random [ -1, 1 ]
@color = random COLORS
@fx = @fy = 0.0
@vx = @vy = 0.0
Sketch.create
particles: []
interval: 3
setup: ->
for i in [0..NUM_PARTICLES] by 1
x = random @width
y = random @height
m = random 8.0, 14.0
@particles.push new Particle x, y, m
draw: ->
@lineCap = @lineJoin = 'round'
for i in [0..NUM_PARTICLES] by 1
a = @particles[i]
# invert charge
if random() < 0.5 then a.charge = -a.charge
for j in [i+1..NUM_PARTICLES] by 1
b = @particles[j]
# delta vector
dx = b.x - a.x
dy = b.y - a.y
# distance
dst = sqrt dSq = ( dx * dx + dy * dy ) + 0.1
rad = a.radius + b.radius
if dst >= rad
# derivative of unit length for normalisation
len = 1.0 / dst
fx = dx * len
fy = dy * len
# gravitational force
f = min MAX_FORCE, ( GRAVITY * a.mass * b.mass ) / dSq
a.fx += f * fx * b.charge
a.fy += f * fy * b.charge
b.fx += -f * fx * a.charge
b.fy += -f * fy * a.charge
# integrate
a.vx += a.fx
a.vy += a.fy
a.vx *= FRICTION
a.vy *= FRICTION
a.tail.unshift x: a.x, y: a.y
a.tail.pop() if a.tail.length > TAIL_LENGTH
a.x += a.vx
a.y += a.vy
# reset force
a.fx = a.fy = 0.0
# wrap
if a.x > @width + a.radius
a.x = -a.radius
a.tail = []
else if a.x < -a.radius
a.x = @width + a.radius
a.tail = []
if a.y > @height + a.radius
a.y = -a.radius
a.tail = []
else if a.y < -a.radius
a.y = @height + a.radius
a.tail = []
# draw
@strokeStyle = a.color
@lineWidth = a.radius * 0.1
@beginPath()
@moveTo a.x, a.y
@lineTo p.x, p.y for p in a.tail
@stroke()
Raw
style.sass
@import "compass"
html, body
overflow: hidden
body
background-color: #000
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/277/stars.png')
background-size: cover
background-position: 50% 50%
svg
position: absolute
z-index: 2
width: 450px
height: 60px
left: 50%
top: 50%
margin-left: -225px
margin-top: -50px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment