A Pen By
Captain Anonymous

` ````
<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;
}
```

` ````
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 Config = {
UseAbsoluteValues: false
};
var more = document.getElementById( 'more' );
Sketch.create({
setup: function() {
colours = colours.sort( function() {
return random() < 0.5 ? -1 : 1;
});
var gui = new DAT.GUI();
gui.add( Config, 'UseAbsoluteValues' ).name( 'Use Absolute Values' );
// -----------
},
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;
if (!this.cache) {
this.cache = [];
}
var nSteps = 60;
for ( y = ys * 0.5; y < this.height; y += ys ) {
for ( x = xs * 0.5; x < this.width; x += xs ) {
if( !( f = eval( s = pulses[i] ) ) ) break;
if (Config.UseAbsoluteValues) f = Math.abs(f);
var key = ("" + y + "_" + x).replace(/\./g, "_");
var graph = this.cache[key];
if (!graph) {
graph = this.cache[key] = [];
}
if (graph.length > maxR * 2 * 4) graph.shift();
graph.push(-f);
this.beginPath();
this.strokeStyle = "#000000;"
this.moveTo(x - maxR, y + 10 * graph[0]);
for(var p=1; p<graph.length; p++) {
this.lineTo(x - maxR + p/4, y + 10 * graph[p]);
}
this.stroke();
if (Config.UseAbsoluteValues) {
f = minR + (f) * ( maxR - minR );
}
else {
f = minR + (0.5 + 0.5 * f) * ( maxR - minR );
}
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
Opt
Find & Replace

Also see: Tab Triggers