` ````
<h1>Equations for Organic Motion - Test Sheet</h1><div id="more">
<span class="arrow">↑</span>
Resize for more
</div>
```

` ````
html, body {
font-family: monospace;
background: #f2f2f2 url( https://cl.ly/image/381U2k0A3L3S/bg.png );
overflow: hidden;
height: 100%;
margin: 0;
}
h1 {
background: #111 url( https://cl.ly/image/203T1t3s1P3O/h1.png );
position: absolute;
text-transform: uppercase;
font-size: 11px;
font-weight: 300;
display: inline;
padding: 6px 15px 8px 12px;
opacity: 0.95;
margin: 0;
color: #fff;
left: 0px;
top: 0px;
}
#more {
-webkit-transition: top 300ms ease-in-out;
-moz-transition: top 300ms ease-in-out;
-ms-transition: top 300ms ease-in-out;
-o-transition: top 300ms ease-in-out;
transition: top 300ms ease-in-out;
background: rgba(0,0,0,0.8);
text-align: center;
position: absolute;
padding: 10px 0;
margin-left: -60px;
font-size: 10px;
width: 120px;
color: #fff;
left: 50%;
top: -100px;
}
#more .arrow {
font-weight: bold;
font-size: 24px;
display: block;
}
```

` ````
/**
* Equations for organic motion
* @author Justin Windle
*
* @see https://soulwire.co.uk
* @see https://github.com/soulwire/sketch.js
*/
$( function () {
var colours = [
'FE4365', 'FC9D9A', 'F9CDAD',
'C8C8A9', '83AF9B', 'FC913A',
'F9D423', '435356', '566965',
'FF7373', 'A9DA88', 'E3AAD6',
'73A8AF', 'F6BCAD', 'BE4C54',
'7CD7CF', 'FFA446', 'B5D8EB',
'E05561', 'F4CE79', '77B29C'
];
var pulses = [
'sin(t)',
'cos(t)',
'cos(t)*sin(t)',
'sin(t)*sin(t*1.5)',
'sin(tan(cos(t)*1.2))',
'sin(tan(t)*0.05)',
'cos(sin(t*3))*sin(t*0.2)',
'sin(pow(8,sin(t)))',
'sin(exp(cos(t*0.8))*2)',
'sin(t-PI*tan(t)*0.01)',
'pow(sin(t*PI),12)',
'cos(sin(t)*tan(t*PI)*PI/8)',
'sin(tan(t)*pow(sin(t),10))',
'cos(sin(t*3)+t*3)',
'pow(abs(sin(t*2))*0.6,sin(t*2))*0.6'
];
var callbacks = [];
var more = document.getElementById('more');
Sketch.create({
retina: 'auto',
setup: function () {
colours = colours.sort(function () {
return random() < 0.5 ? -1 : 1;
});
for ( var i = 0, n = pulses.length; i < n; i++ ) {
callbacks[i] = new Function( 't', 'return ' + pulses[i] );
}
},
draw: function () {
this.globalAlpha = 0.5;
var t = this.millis * 0.0015;
var rows = 3;
var cols = 5;
var minR = 10;
var maxR = 50;
var xs = max(maxR * 3, this.width / cols);
var ys = max(maxR * 3, this.height / rows);
var x, y, s, f, w, i = 0;
for (y = ys * 0.5; y < this.height; y += ys) {
for (x = xs * 0.5; x < this.width; x += xs) {
if (!(f = callbacks[i].call( this, t ))) break;
f = minR + abs(f) * (maxR - minR);
s = pulses[i];
this.beginPath();
this.arc(x, y, f, 0, TWO_PI);
this.fillStyle = this.strokeStyle = '#' + colours[i % colours.length];
this.fill();
this.font = '10px monospace';
w = this.measureText(s).width;
this.textBaseline = 'top';
this.fillStyle = '#000';
this.fillText(s, x - w * 0.5, y + maxR + 10);
i++;
}
if (!f) break;
}
},
resize: function () {
more.style.top = this.height > 450 ? '-100px' : '0px';
}
});
});
```

999px

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers