30 lines
1.1 KiB
HTML
30 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Blob - How to</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<input type="range" min="1" max="7" step="1" id="step" value="1">
|
||
|
|
<section>
|
||
|
|
<p>Draw 100 evenly-spaced dots along a circle</p>
|
||
|
|
<p>For every dot, use a noise algorithm to vary the radius</p>
|
||
|
|
<p>Connect the dots and hide them</p>
|
||
|
|
<p>Draw more shapes with the same logic while reducing the radius</p>
|
||
|
|
<p>Fade the lines from the center to the outside</p>
|
||
|
|
<p>Animate the shapes using the frame count in your noise function</p>
|
||
|
|
<p>Go crazy</p>
|
||
|
|
</section>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js'></script>
|
||
|
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/perlin.js'></script>
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script><script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|