A reactive particle system based on audio analysis of FFT (fast fourier transform) spectrum. Groups of circles are tied from low to high frequencies of audio in the current time.
Instructions:
Libraries used in this pen:
| <div class="_controls hidden"><button class="_new">New</button> | |
| <span style="pointer-events: none">Move mouse to let the form evolve.<br>Click New to start from a new form.</span></div> | |
| <svg width="100%" height="100%" class="_svg"> | |
| <g class="_g"></g> | |
| </svg> |
| <canvas id="zdog-canvas" width="800" height="640"></canvas> | |
| <div class="place-controls"> | |
| <button id="south">« South</button> | |
| <p id="place">Current Place</p> | |
| <button id="north">North »</button> | |
| </div> | |
| <div class="time-controls"> | |
| <p id="month">Current Month</p> | |
| <div class="buttons"> | |
| <button id="rewind">«</button> |
| The regex patterns in this gist are intended only to match web URLs -- http, | |
| https, and naked domains like "example.com". For a pattern that attempts to | |
| match all URLs, regardless of protocol, see: https://gist.github.com/gruber/249502 | |
| # Single-line version: | |
| (?i)\b((?:https?:(?:/{1,3}|[a-z0-9%])|[a-z0-9.\-]+[.](?:com|net|org|edu|gov|mil|aero|asia|biz|cat|coop|info|int|jobs|mobi|museum|name|post|pro|tel|travel|xxx|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cs|cu|cv|cx|cy|cz|dd|de|dj|dk|dm|do|dz|ec|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|s |
A Pen by Gerard Ferrandez on CodePen.
| #!/bin/bash | |
| # bash script to withdraw btc from coinbasepro programatically with electrum wallet | |
| electrum -v daemon start -w $HOME/.electrum/wallets/default_wallet -s electrums3lojbuj.onion:50001:t -p socks5:127.0.0.1:9050 && electrum -v daemon load_wallet -w $HOME/.electrum/wallets/default_wallet && ccxt coinbasepro withdraw BTC $(ccxt coinbasepro fetchBalance | grep -e "BTC: [0-9].[0-9]\{8\}" | head -1 | cut -c 18-27) $(electrum getunusedaddress) |
This is a animated guide to what hex codes are, and how to convert them to RGB. Knowing this can make it easier to adjust, or understand your colors when all you have is the hex code. There a some interactivity and animations that make this guide semi-engaging.
A Pen by Josh Kennedy on CodePen.
| <b id="click" style='display:block;background:rgb(80,80,80);text-align:center;color:white;padding: 1em 0 1em;cursor:pointer;'>DISCLAIMER (click to view)</b><b id='caring' style='display:none;padding: 10px;border-top: 15px solid #f1bc1a'><u>This piece of CSS magic is free for everyone.</u><br />Use it, steal it, claim it your own. I don't care. <span style="font-size:24px">Actually,</span> I care if it was helpful and you managed to create something new and amazing. If you like this experiment, I would love to hear from you via <a href="https://twitter.com/intent/user?screen_name=christian_fei">Twitter</a> to see how you implemented this in your project :) <br /><br /> <br /> <br /> Credit where credit is due: <br /> I wanted to create my own timeline after seeing Paul Stamatious' one over at <a href="http://paulstamatiou.com/posts"> his website</a></b> | |
| <!-- THE CODE | THE CODE | THE CODE | THE CODE | THE CODE --> | |
| <!-- Each event is wrapper inside an anchor with the class 'event' --> | |
| <!-- The i-tag inside |
Using CSS grid and a few lines of JavaScript, visualize a bubble sort algorithm with a bit of a rainbow.
A Pen by Gabriele Corti on CodePen.
illustration of a Medium article about generative design
A Pen by nicolas barradeau on CodePen.