joshua/generative
1
0
Fork 0
mirror of https://github.com/seigler/generative synced 2025-07-26 22:56:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add sketch 4: lenses

Browse source
This commit is contained in:
Joshua Seigler 2019-11-10 23:12:56 -05:00
parent f09b4c66f0
commit d3cbff29fc
5 changed files with 327 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/4/index.html Symbolic link
View file

@ -0,0 +1 @@
../../sketch-template.html

11
app/assets/index.html
View file

@ -9,11 +9,12 @@
<body>
<main>
<h1>P5.js generative art</h1>
<ol>
<li><a class="sketch" href="1/">gradient burst</a></li>
<li><a class="sketch" href="2/">gradient jungle</a></li>
<li><a class="sketch" href="3/">peanut butter and jelly</a></li>
</ol>
<ul>
<li>2019-11-05 - <a class="sketch" href="1/">gradient burst</a></li>
<li>2019-11-07 - <a class="sketch" href="2/">gradient jungle</a></li>
<li>2019-11-09 - <a class="sketch" href="3/">peanut butter and jelly</a></li>
<li>2019-11-10 - <a class="sketch" href="4/">lenses</a></li>
</ul>
</main>
</body>
</html>

37
app/assets/shaders/displacement.frag Normal file
View file

@ -0,0 +1,37 @@
precision mediump float;
// lets grab texcoords just for fun
varying vec2 vTexCoord;
// our texture and image coming from p5
uniform sampler2D u_src;
uniform sampler2D u_map;
// how much to displace by (controlled by mouse)
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);
// lets get the average color of the rgb values
float avg = dot(mapTex.rgb, vec3(0.33333));
// then spread it between -1 and 1
avg = avg * 2.0 - 1.0;
// we will displace the image by the average color times the amt of displacement
float disp = avg * u_intensity;
// displacement works by moving the texture coordinates of one image with the colors of another image
// add the displacement to the texture coordinages
vec4 srcTex = texture2D(u_src, uv + disp);
// output the image
gl_FragColor = srcTex;
}