publish: Sketch 6, Plant

generated from commit 475d992347
This commit is contained in:
Joshua Seigler 2019-11-14 09:16:39 -05:00
parent 3befcd0cc4
commit 4ba4914eb0
10 changed files with 65 additions and 18 deletions

View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Gradient Burst - Generative Art - seigler.github.io</title> <title>Gradient Burst - Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="../app-24258ef7.css"> <link rel="stylesheet" href="../app-d698f06a.css">
<meta property="og:title" content="Gradient Burst"> <meta property="og:title" content="Gradient Burst">
<meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style."> <meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta property="og:image" content="https://seigler.github.io/generative/1/example.jpg"> <meta property="og:image" content="https://seigler.github.io/generative/1/example.jpg">
@ -19,7 +19,7 @@
<body> <body>
<script src="../modules/p5.min.js"></script> <script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script> <script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-56c59be9.js"></script> <script src="../app-a247a676.js"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer> <footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body> </body>
</html> </html>

View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Gradient Jungle - Generative Art - seigler.github.io</title> <title>Gradient Jungle - Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="../app-24258ef7.css"> <link rel="stylesheet" href="../app-d698f06a.css">
<meta property="og:title" content="Gradient Jungle"> <meta property="og:title" content="Gradient Jungle">
<meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style."> <meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta property="og:image" content="https://seigler.github.io/generative/2/example.jpg"> <meta property="og:image" content="https://seigler.github.io/generative/2/example.jpg">
@ -19,7 +19,7 @@
<body> <body>
<script src="../modules/p5.min.js"></script> <script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script> <script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-56c59be9.js"></script> <script src="../app-a247a676.js"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer> <footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body> </body>
</html> </html>

View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Peanut Butter and Jelly - Generative Art - seigler.github.io</title> <title>Peanut Butter and Jelly - Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="../app-24258ef7.css"> <link rel="stylesheet" href="../app-d698f06a.css">
<meta property="og:title" content="Peanut Butter and Jelly"> <meta property="og:title" content="Peanut Butter and Jelly">
<meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style."> <meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta property="og:image" content="https://seigler.github.io/generative/3/example.jpg"> <meta property="og:image" content="https://seigler.github.io/generative/3/example.jpg">
@ -19,7 +19,7 @@
<body> <body>
<script src="../modules/p5.min.js"></script> <script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script> <script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-56c59be9.js"></script> <script src="../app-a247a676.js"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer> <footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body> </body>
</html> </html>

View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lenses - Generative Art - seigler.github.io</title> <title>Lenses - Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="../app-24258ef7.css"> <link rel="stylesheet" href="../app-d698f06a.css">
<meta property="og:title" content="Lenses"> <meta property="og:title" content="Lenses">
<meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style."> <meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta property="og:image" content="https://seigler.github.io/generative/4/example.jpg"> <meta property="og:image" content="https://seigler.github.io/generative/4/example.jpg">
@ -19,7 +19,7 @@
<body> <body>
<script src="../modules/p5.min.js"></script> <script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script> <script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-56c59be9.js"></script> <script src="../app-a247a676.js"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer> <footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body> </body>
</html> </html>

View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Glow Path - Generative Art - seigler.github.io</title> <title>Glow Path - Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="../app-24258ef7.css"> <link rel="stylesheet" href="../app-d698f06a.css">
<meta property="og:title" content="Glow Path"> <meta property="og:title" content="Glow Path">
<meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style."> <meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta property="og:image" content="https://seigler.github.io/generative/5/example.jpg"> <meta property="og:image" content="https://seigler.github.io/generative/5/example.jpg">
@ -19,7 +19,7 @@
<body> <body>
<script src="../modules/p5.min.js"></script> <script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script> <script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-56c59be9.js"></script> <script src="../app-a247a676.js"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer> <footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body> </body>
</html> </html>

BIN
6/example.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 KiB

25
6/index.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Grow - Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="../app-d698f06a.css">
<meta property="og:title" content="Grow">
<meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta property="og:image" content="https://seigler.github.io/generative/6/example.jpg">
<meta property="og:site_name" content="Generative Art - seigler.github.io">
<meta name="twitter:creator" content="@seiglerj">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Grow">
<meta name="twitter:site" content="@seiglerj">
<meta name="twitter:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta name="twitter:image" content="https://seigler.github.io/generative/6/example.jpg">
</head>
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-a247a676.js"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body>
</html>

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
*,:after,:before{box-sizing:inherit}body,html{min-height:100%;box-sizing:border-box}body{background-color:#000;margin:0;padding:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:sans-serif}main{text-align:left}a{color:inherit}a:focus,a:hover{color:#66f}code{display:inline-block;font-size:1.2em;line-height:1;padding:.5em .5em .2em;background-color:#222}ul{list-style:none;padding-left:0}footer{position:fixed;bottom:0;left:0;max-width:100vw;color:#fff;background-color:rgba(0,0,0,.8);padding:.5em 1em;border-top-right-radius:.5em}img{max-width:100%}figure{margin:1em 0;max-width:400px}main{padding:1em} *,:after,:before{box-sizing:inherit}body,html{min-height:100%;box-sizing:border-box}body{background-color:#000;margin:0;padding:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:sans-serif}main{text-align:left}a{color:inherit}a:focus,a:hover{color:#66f}code{display:inline-block;font-size:1.2em;line-height:1;padding:.5em .5em .2em;background-color:#222}ul{list-style:none;padding-left:0}footer{position:fixed;bottom:0;left:0;max-width:100vw;color:#fff;background-color:rgba(0,0,0,.8);padding:.5em 1em;border-top-right-radius:.5em}img{max-width:100%}figure{margin:1em 0;max-width:400px}figcaption{display:flex;justify-content:space-between}main{padding:1em}

View file

@ -5,30 +5,52 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Generative Art - seigler.github.io</title> <title>Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="app-24258ef7.css"> <link rel="stylesheet" href="app-d698f06a.css">
</head> </head>
<body> <body>
<main> <main>
<h1>P5.js generative art</h1> <h1>P5.js generative art</h1>
<figure>
<a class="sketch" href="6/"><img src="6/example.jpg" alt="a broad tree with a black trunk and white round leaves, in front of a large, hollow, colored circle"></a>
<figcaption>
<div class="title">Grow</div>
<div class="date">2019-11-14</div>
</figcaption>
</figure>
<figure> <figure>
<a class="sketch" href="5/"><img src="5/example.jpg" alt="layers of meandering dark curves with one glowing, colored curve"></a> <a class="sketch" href="5/"><img src="5/example.jpg" alt="layers of meandering dark curves with one glowing, colored curve"></a>
<figcaption>2019-11-12 - glow path</figcaption> <figcaption>
<div class="title">Glow Path</div>
<div class="date">2019-11-12</div>
</figcaption>
</figure> </figure>
<figure> <figure>
<a class="sketch" href="4/"><img src="4/example.jpg" alt="colored pinstripes distorted by a field of smoothed lenses of varying strength"></a> <a class="sketch" href="4/"><img src="4/example.jpg" alt="colored pinstripes distorted by a field of smoothed lenses of varying strength"></a>
<figcaption>2019-11-10 - lenses</figcaption> <figcaption>
<div class="title">Lenses</div>
<div class="date">2019-11-10</div>
</figcaption>
</figure> </figure>
<figure> <figure>
<a class="sketch" href="3/"><img src="3/example.jpg" alt="purple jelly stripes covered with swirling swarms of peanut butter colored lines"></a> <a class="sketch" href="3/"><img src="3/example.jpg" alt="purple jelly stripes covered with swirling swarms of peanut butter colored lines"></a>
<figcaption>2019-11-09 - peanut butter and jelly</figcaption> <figcaption>
<div class="title">Peanut Butter and Jelly</div>
<div class="date">2019-11-09</div>
</figcaption>
</figure> </figure>
<figure> <figure>
<a class="sketch" href="2/"><img src="2/example.jpg" alt="multicolored gradients revealing and concealing jungle leaves"></a> <a class="sketch" href="2/"><img src="2/example.jpg" alt="multicolored gradients revealing and concealing jungle leaves"></a>
<figcaption>2019-11-07 - gradient jungle</figcaption> <figcaption>
<div class="title">Gradient Jungle</div>
<div class="date">2019-11-07</div>
</figcaption>
</figure> </figure>
<figure> <figure>
<a class="sketch" href="1/"><img src="1/example.jpg" alt="multicolored gradients revealing and concealing bars and circles"></a> <a class="sketch" href="1/"><img src="1/example.jpg" alt="multicolored gradients revealing and concealing bars and circles"></a>
<figcaption>2019-11-05 - gradient burst</figcaption> <figcaption>
<div class="title">Gradient Burst</div>
<div class="date">2019-11-05</div>
</figcaption>
</figure> </figure>
</main> </main>
</body> </body>