Update site, embed example, add collection, update getting started

prontopablo · Feb 25, 2024 · 7d34189 · 7d34189
1 parent dfc9c6b
commit 7d34189
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -11,10 +11,17 @@ p5.FIP is a library that allows you to add post-processing / image-processing ef
 
 ## Getting Started
 
-The reference for each shader can be found in the sidebar of this website.
+To use FIP you can include it in your index.html file:
+```html
+    <head>
+    <!-- ...-->
+    <script src="https://prontopablo.github.io/p5.FIP/assets/javascripts/p5.FIP.js"></script>
+    <!-- ...-->
+    </head>
+```
 
 ## Examples
-Example sketches are included in the [examples folder](https://github.com/prontopablo/p5.FIP/tree/main/examples) on GitHub. 
+Example sketches can be found in this collection [here](https://editor.p5js.org/prontopablo/collections/MA4R8jvck) and they are also included in the [examples folder](https://github.com/prontopablo/p5.FIP/examples) on GitHub.
 
 ## p5.js Library Guidelines
 In accordance with the [p5.js library guidelines](https://github.com/processing/p5.js/blob/main/contributor_docs/creating_libraries.md):

diff --git a/docs/index.html b/docs/index.html
@@ -1449,16 +1449,25 @@ <h2 id="p5fip-fast-image-processing">p5.FIP (Fast Image Processing)</h2>
 </blockquote>
 <h2 id="what-is-it">What is it?</h2>
 <p>p5.FIP is a library that allows you to add post-processing / image-processing effects to your p5.js sketch. </p>
+<iframe width="610" height="650" src="https://editor.p5js.org/prontopablo/full/2-UYUk2qP"></iframe>
+<p><em>Left and right arrow keys cycle filters, up and down arrow keys cycle images.</em></p>
 <h2 id="features">Features</h2>
 <ul>
 <li>44 Effects</li>
 <li>Hardware Accelerated</li>
-<li>Lightweight</li>
+<li>Lightweight   </li>
 </ul>
 <h2 id="getting-started">Getting Started</h2>
+<p>To use FIP you can include it in your index.html file:
+<div class="language-html 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="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
+</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a>    <span class="cm">&lt;!-- ...--&gt;</span>
+</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a>    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://prontopablo.github.io/p5.FIP/assets/javascripts/p5.FIP.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
+</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a>    <span class="cm">&lt;!-- ...--&gt;</span>
+</span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a>    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
+</span></code></pre></div></p>
 <p>The reference for each shader can be found in the sidebar of this website.</p>
 <h2 id="examples">Examples</h2>
-<p>Example sketches are included in the <a href="https://github.com/prontopablo/p5.FIP/examples">examples folder</a> on GitHub. </p>
+<p>Example sketches can be found in this collection <a href="https://editor.p5js.org/prontopablo/collections/MA4R8jvck">here</a> and they are also included in the <a href="https://github.com/prontopablo/p5.FIP/examples">examples folder</a> on GitHub. </p>
 <h2 id="p5js-library-guidelines">p5.js Library Guidelines</h2>
 <p>In accordance with the <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/creating_libraries.md">p5.js library guidelines</a>:</p>
 <ol>

diff --git a/docs/search/search_index.js b/docs/search/search_index.js
diff --git a/docs/search/search_index.json b/docs/search/search_index.json
diff --git a/docs/sitemap.xml.gz b/docs/sitemap.xml.gz
diff --git a/mdDocs/index.md b/mdDocs/index.md
@@ -4,17 +4,29 @@
 ## What is it?
 p5.FIP is a library that allows you to add post-processing / image-processing effects to your p5.js sketch. 
 
+<iframe width="610" height="650" src="https://editor.p5js.org/prontopablo/full/2-UYUk2qP"></iframe>
+_Left and right arrow keys cycle filters, up and down arrow keys cycle images._
+
 ## Features
 - 44 Effects
 - Hardware Accelerated
 - Lightweight
 
 ## Getting Started
 
+To use FIP you can include it in your index.html file:
+```html
+    <head>
+    <!-- ...-->
+    <script src="https://prontopablo.github.io/p5.FIP/assets/javascripts/p5.FIP.js"></script>
+    <!-- ...-->
+    </head>
+```
+
 The reference for each shader can be found in the sidebar of this website.
 
 ## Examples
-Example sketches are included in the [examples folder](https://github.com/prontopablo/p5.FIP/examples) on GitHub. 
+Example sketches can be found in this collection [here](https://editor.p5js.org/prontopablo/collections/MA4R8jvck) and they are also included in the [examples folder](https://github.com/prontopablo/p5.FIP/examples) on GitHub. 
 
 ## p5.js Library Guidelines
 In accordance with the [p5.js library guidelines](https://github.com/processing/p5.js/blob/main/contributor_docs/creating_libraries.md):