publish: Add sketch 5, "glow lines" Fix an issue with the displacement fragment shader

generated from commit 5e6d27e70417d909df95696e2e938207e4b3de7a
This commit is contained in:
Joshua Seigler 2019-11-12 14:00:24 -05:00
parent b730b3e019
commit fef90e585c
10 changed files with 38 additions and 7 deletions

View file

@ -19,7 +19,7 @@
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-139adcd2.js"></script>
<script src="../app-165617be.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>

View file

@ -19,7 +19,7 @@
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-139adcd2.js"></script>
<script src="../app-165617be.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>

View file

@ -19,7 +19,7 @@
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-139adcd2.js"></script>
<script src="../app-165617be.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>

View file

@ -19,7 +19,7 @@
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-139adcd2.js"></script>
<script src="../app-165617be.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>

BIN
5/example.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 KiB

25
5/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>Glow Path - Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="../app-a940fc5f.css">
<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:image" content="https://seigler.github.io/generative/5/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="Glow Path">
<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/5/example.jpg">
</head>
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../app-165617be.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

1
app-165617be.js Normal file

File diff suppressed because one or more lines are too long

View file

@ -9,6 +9,10 @@
<body>
<main>
<h1>P5.js generative art</h1>
<figure>
<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>
</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>
<figcaption>2019-11-10 - lenses</figcaption>

View file

@ -13,12 +13,14 @@ uniform float u_intensity;
void main() {
vec2 uv = vTexCoord;
// the texture is loaded upside down and backwards by default so lets flip it
uv = 1.0 - uv;
// get the displacement map as a vec4 using texture2D
vec4 mapTex = texture2D(u_map, uv);
// the texture is loaded upside down and backwards by default so lets flip it
// uv = 1.0 - uv;
uv[1] = 1.0 - uv[1];
// lets get the average color of the rgb values
float avg = dot(mapTex.rgb, vec3(0.33333));