Skip to content

Commit

Permalink
Update reference pages as far as kuwahara
Browse files Browse the repository at this point in the history
  • Loading branch information
@prontopablo
prontopablo committed Feb 25, 2024
1 parent b746ff6 commit 592d3d7
Show file tree
Hide file tree
Showing 55 changed files with 1,335 additions and 852 deletions.
2 changes: 1 addition & 1 deletion docs/antiAliasing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1459,7 +1459,7 @@ <h1>Anti-aliasing</h1>
<h2 id="parameters">Parameters</h2>
<p><code>texture</code> <strong>Texture</strong>: The input texture to be filtered. Default: <strong><code>undefined</code></strong>
<br>
<code>textureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<code>uTextureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<br>
<code>strength</code> <strong>Float:</strong> Default: <strong><code>0.0</code></strong> Controls the size of the offset for super-sampling. Larger values result in stronger anti-aliasing.</p>
<h2 id="example">Example</h2>
Expand Down
5 changes: 1 addition & 4 deletions docs/assets/javascripts/p5.FIP.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,6 @@ const fip = {
precision highp float;
varying vec2 vTexCoord;
uniform sampler2D texture;
uniform vec2 texOffset;
uniform float edgeThreshold;
Expand All @@ -318,7 +317,7 @@ const fip = {
vec4 neighborColor4 = texture2D(texture, tc - vec2(0.0, 0.01));
// Calculate the average difference
float delta = length(centerColor.rgb - (neighborColor1.rgb + neighborColor2.rgb + neighborColor3.rgb + neighborColor4.rgb) / 4.0);
float delta = length(centerColor.rgb - (neighborColor1.rgb + neighborColor2.rgb + neighborColor3.rgb + neighborColor4.rgb) / 4.0);
// If the difference is above the threshold, it's an edge pixel
if (delta > edgeThreshold) {
Expand Down Expand Up @@ -854,8 +853,6 @@ const fip = {
precision highp float;
varying vec2 vTexCoord;
uniform sampler2D texture;
uniform float saturation;
void main() {
vec2 tc = vTexCoord.st;
Expand Down
2 changes: 1 addition & 1 deletion docs/blend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1461,7 +1461,7 @@ <h2 id="parameters">Parameters</h2>
<br>
<code>texture2</code> <strong>Texture</strong>: The second texture to be blended. Default: <strong><code>undefined</code></strong>
<br>
<code>textureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<code>uTextureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<br>
<code>mixFactor</code> <strong>Float</strong>: How much weight to give each picture in the blending. A value of 0.0 only outputs texture1, 1.0 only outputs texture2. Default: <strong><code>0.0</code></strong>
<br>
Expand Down
2 changes: 1 addition & 1 deletion docs/bloom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1459,7 +1459,7 @@ <h1>Bloom</h1>
<h2 id="parameters">Parameters</h2>
<p><code>texture</code> <strong>Texture</strong>: The input texture to be filtered. Default: <strong><code>undefined</code></strong>
<br>
<code>textureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<code>uTextureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<br>
<code>intensity</code> <strong>Float:</strong> The strength of the glow effect. A higher value intensifies the glow. Default: <strong><code>0.0</code></strong>
<br>
Expand Down
2 changes: 1 addition & 1 deletion docs/boxBlur.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1459,7 +1459,7 @@ <h1>Box Blur</h1>
<h2 id="parameters">Parameters</h2>
<p><code>texture</code> <strong>Texture</strong>: The input texture to be filtered. Default: <strong><code>undefined</code></strong>
<br>
<code>textureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<code>uTextureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<br>
<code>blurRadius</code> <strong>Int:</strong> The radius of the box blur. Controls the extent of blurring. Default: <strong><code>0</code></strong></p>
<h2 id="example">Example</h2>
Expand Down
2 changes: 1 addition & 1 deletion docs/cannyEdgeDetection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1459,7 +1459,7 @@ <h1>Canny Edge Detection</h1>
<h2 id="parameters">Parameters</h2>
<p><code>texture</code> <strong>Texture</strong>: The input texture to be filtered. Default: <strong><code>undefined</code></strong>
<br>
<code>textureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<code>uTextureSize</code> <strong>Vec2:</strong> The size of the texture used for sampling neighboring pixels. Default: <strong><code>(0.0, 0.0)</code></strong>
<br>
<code>thresholdLow</code> <strong>Float:</strong> The lower threshold for edge detection. Pixels with intensity gradients below this threshold will be suppressed. Default: <strong><code>0.0</code></strong>
<br>
Expand Down
60 changes: 36 additions & 24 deletions docs/cartoon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1457,32 +1457,44 @@ <h1>Cartoon</h1>

<p>Adds a cartoon effect by emphasizing edges and darkening them.</p>
<h2 id="parameters">Parameters</h2>
<p><code>texture</code> <strong>Texture</strong>: The input texture to be filtered. Default: <strong><code>The entire canvas</code></strong>
<p><code>texture</code> <strong>Texture</strong>: The input texture to be filtered. Default: <strong><code>undefined</code></strong>
<br>
<code>texOffset</code> <strong>Vec2:</strong> The offset used for sampling neighboring pixels. Default: <strong><code>(1.0 / width, 1.0 / height)</code></strong>
<br>
<code>edgeThreshold</code> <strong>Float:</strong> The threshold value that determines whether a pixel is considered an edge pixel based on the difference between the center pixel and its neighbors. Default: <strong><code>0.1</code></strong></p>
<code>edgeThreshold</code> <strong>Float:</strong> The threshold value that determines whether a pixel is considered an edge pixel based on the difference between the center pixel and its neighbors. Default: <strong><code>0.0</code></strong></p>
<h2 id="example">Example</h2>
<div class="language-java highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kn">import</span><span class="w"> </span><span class="nn">fip.*</span><span class="p">;</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="n">PShader</span><span class="w"> </span><span class="n">cartoon</span><span class="p">;</span>
</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="n">PImage</span><span class="w"> </span><span class="n">ireland</span><span class="p">;</span>
</span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a>
</span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a><span class="kt">void</span><span class="w"> </span><span class="nf">setup</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a><span class="w"> </span><span class="n">size</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span><span class="w"> </span><span class="mi">1000</span><span class="p">,</span><span class="w"> </span><span class="n">P3D</span><span class="p">);</span>
</span><span id="__span-0-8"><a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a>
</span><span id="__span-0-9"><a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a><span class="w"> </span><span class="n">cartoon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">loadShader</span><span class="p">(</span><span class="s">&quot;cartoon.glsl&quot;</span><span class="p">);</span>
</span><span id="__span-0-10"><a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a>
</span><span id="__span-0-11"><a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a><span class="w"> </span><span class="n">ireland</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">loadImage</span><span class="p">(</span><span class="s">&quot;ireland.jpg&quot;</span><span class="p">);</span>
</span><span id="__span-0-12"><a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a>
</span><span id="__span-0-13"><a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a><span class="w"> </span><span class="n">cartoon</span><span class="p">.</span><span class="na">set</span><span class="p">(</span><span class="s">&quot;edgeThreshold&quot;</span><span class="p">,</span><span class="w"> </span><span class="mf">0.1</span><span class="p">);</span>
</span><span id="__span-0-14"><a id="__codelineno-0-14" name="__codelineno-0-14" href="#__codelineno-0-14"></a><span class="p">}</span>
</span><span id="__span-0-15"><a id="__codelineno-0-15" name="__codelineno-0-15" href="#__codelineno-0-15"></a>
</span><span id="__span-0-16"><a id="__codelineno-0-16" name="__codelineno-0-16" href="#__codelineno-0-16"></a><span class="kt">void</span><span class="w"> </span><span class="nf">draw</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-17"><a id="__codelineno-0-17" name="__codelineno-0-17" href="#__codelineno-0-17"></a><span class="w"> </span><span class="n">image</span><span class="p">(</span><span class="n">ireland</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="n">width</span><span class="p">,</span><span class="w"> </span><span class="n">height</span><span class="p">);</span>
</span><span id="__span-0-18"><a id="__codelineno-0-18" name="__codelineno-0-18" href="#__codelineno-0-18"></a>
</span><span id="__span-0-19"><a id="__codelineno-0-19" name="__codelineno-0-19" href="#__codelineno-0-19"></a><span class="w"> </span><span class="n">filter</span><span class="p">(</span><span class="n">cartoon</span><span class="p">);</span>
</span><span id="__span-0-20"><a id="__codelineno-0-20" name="__codelineno-0-20" href="#__codelineno-0-20"></a><span class="p">}</span>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">layer</span><span class="p">,</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="w"> </span><span class="nx">bird</span><span class="p">,</span>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="w"> </span><span class="nx">cartoon</span><span class="p">;</span>
</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a>
</span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="kd">function</span><span class="w"> </span><span class="nx">preload</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a><span class="w"> </span><span class="nx">cartoon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createShader</span><span class="p">(</span><span class="nx">fip</span><span class="p">.</span><span class="nx">defaultVert</span><span class="p">,</span><span class="w"> </span><span class="nx">fip</span><span class="p">.</span><span class="nx">cartoon</span><span class="p">);</span><span class="w"> </span><span class="c1">// Load the shader</span>
</span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a><span class="w"> </span><span class="nx">bird</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">loadImage</span><span class="p">(</span><span class="s2">&quot;bird.jpg&quot;</span><span class="p">);</span>
</span><span id="__span-0-8"><a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a><span class="p">}</span>
</span><span id="__span-0-9"><a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a>
</span><span id="__span-0-10"><a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a><span class="kd">function</span><span class="w"> </span><span class="nx">setup</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-11"><a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a><span class="w"> </span><span class="nx">createCanvas</span><span class="p">(</span><span class="mf">600</span><span class="p">,</span><span class="w"> </span><span class="mf">600</span><span class="p">,</span><span class="w"> </span><span class="nx">WEBGL</span><span class="p">);</span><span class="w"> </span><span class="c1">// Use WEBGL mode to use the shader</span>
</span><span id="__span-0-12"><a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a><span class="w"> </span><span class="nx">layer</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createFramebuffer</span><span class="p">();</span><span class="w"> </span><span class="c1">// Create a framebuffer to draw the image onto (faster p5.js version of createGraphics())</span>
</span><span id="__span-0-13"><a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a><span class="p">}</span>
</span><span id="__span-0-14"><a id="__codelineno-0-14" name="__codelineno-0-14" href="#__codelineno-0-14"></a>
</span><span id="__span-0-15"><a id="__codelineno-0-15" name="__codelineno-0-15" href="#__codelineno-0-15"></a><span class="kd">function</span><span class="w"> </span><span class="nx">draw</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-16"><a id="__codelineno-0-16" name="__codelineno-0-16" href="#__codelineno-0-16"></a><span class="w"> </span><span class="nx">background</span><span class="p">(</span><span class="mf">0</span><span class="p">);</span>
</span><span id="__span-0-17"><a id="__codelineno-0-17" name="__codelineno-0-17" href="#__codelineno-0-17"></a>
</span><span id="__span-0-18"><a id="__codelineno-0-18" name="__codelineno-0-18" href="#__codelineno-0-18"></a><span class="w"> </span><span class="c1">// Draw an image to a framebuffer </span>
</span><span id="__span-0-19"><a id="__codelineno-0-19" name="__codelineno-0-19" href="#__codelineno-0-19"></a><span class="w"> </span><span class="nx">layer</span><span class="p">.</span><span class="nx">begin</span><span class="p">();</span>
</span><span id="__span-0-20"><a id="__codelineno-0-20" name="__codelineno-0-20" href="#__codelineno-0-20"></a><span class="w"> </span><span class="nx">clear</span><span class="p">();</span>
</span><span id="__span-0-21"><a id="__codelineno-0-21" name="__codelineno-0-21" href="#__codelineno-0-21"></a><span class="w"> </span><span class="nx">scale</span><span class="p">(</span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="p">);</span><span class="w"> </span><span class="c1">// Flip the Y-axis to match the canvas (different coordinate system in framebuffer)</span>
</span><span id="__span-0-22"><a id="__codelineno-0-22" name="__codelineno-0-22" href="#__codelineno-0-22"></a><span class="w"> </span><span class="nx">image</span><span class="p">(</span><span class="nx">bird</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="nx">width</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span>
</span><span id="__span-0-23"><a id="__codelineno-0-23" name="__codelineno-0-23" href="#__codelineno-0-23"></a><span class="w"> </span><span class="nx">layer</span><span class="p">.</span><span class="nx">end</span><span class="p">();</span>
</span><span id="__span-0-24"><a id="__codelineno-0-24" name="__codelineno-0-24" href="#__codelineno-0-24"></a>
</span><span id="__span-0-25"><a id="__codelineno-0-25" name="__codelineno-0-25" href="#__codelineno-0-25"></a><span class="w"> </span><span class="c1">// Apply the shader</span>
</span><span id="__span-0-26"><a id="__codelineno-0-26" name="__codelineno-0-26" href="#__codelineno-0-26"></a><span class="w"> </span><span class="nx">shader</span><span class="p">(</span><span class="nx">cartoon</span><span class="p">);</span>
</span><span id="__span-0-27"><a id="__codelineno-0-27" name="__codelineno-0-27" href="#__codelineno-0-27"></a>
</span><span id="__span-0-28"><a id="__codelineno-0-28" name="__codelineno-0-28" href="#__codelineno-0-28"></a><span class="w"> </span><span class="c1">// Set the shader uniforms</span>
</span><span id="__span-0-29"><a id="__codelineno-0-29" name="__codelineno-0-29" href="#__codelineno-0-29"></a><span class="w"> </span><span class="nx">cartoon</span><span class="p">.</span><span class="nx">setUniform</span><span class="p">(</span><span class="s2">&quot;texture&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">layer</span><span class="p">.</span><span class="nx">color</span><span class="p">);</span><span class="w"> </span><span class="c1">// Set the texture to apply the shader to</span>
</span><span id="__span-0-30"><a id="__codelineno-0-30" name="__codelineno-0-30" href="#__codelineno-0-30"></a><span class="w"> </span><span class="nx">cartoon</span><span class="p">.</span><span class="nx">setUniform</span><span class="p">(</span><span class="s1">&#39;edgeThreshold&#39;</span><span class="p">,</span><span class="w"> </span><span class="mf">0.1</span><span class="p">);</span>
</span><span id="__span-0-31"><a id="__codelineno-0-31" name="__codelineno-0-31" href="#__codelineno-0-31"></a>
</span><span id="__span-0-32"><a id="__codelineno-0-32" name="__codelineno-0-32" href="#__codelineno-0-32"></a><span class="w"> </span><span class="nx">rect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span><span class="w"> </span><span class="c1">// Draw a rectangle to apply the shader to</span>
</span><span id="__span-0-33"><a id="__codelineno-0-33" name="__codelineno-0-33" href="#__codelineno-0-33"></a><span class="w"> </span><span class="nx">resetShader</span><span class="p">();</span><span class="w"> </span>
</span><span id="__span-0-34"><a id="__codelineno-0-34" name="__codelineno-0-34" href="#__codelineno-0-34"></a><span class="p">}</span>
</span></code></pre></div>


Expand Down
Loading

0 comments on commit 592d3d7

Please sign in to comment.