-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #50 from evaristocuesta/dev.0.4.0
Dev.0.4.0
- Loading branch information
Showing
25 changed files
with
580 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content="Pict2Pix.js is a creative coding library to apply fancy pixel animations to images"> | ||
| <meta name="author" content="Evaristo Cuesta"> | ||
| <title>Pict2Pix.js - Halftone effect</title> | ||
| <link rel="canonical" href="https://evaristocuesta.github.io/pict2pix/led-matrix.html"> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.2.0/styles/a11y-dark.css"> | ||
| <link rel="stylesheet" media="screen" href="css/style.css?v=0.4.0"/> | ||
|
|
||
| <meta name="theme-color" content="#7952b3"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <!-- <a class="gh-ribbon red right" href="https://github.com/evaristocuesta/pict2pix" target="_blank"><i class="bi-github" role="img" aria-label="GitHub"></i> Fork me on GitHub!</a> --> | ||
| <header> | ||
| <nav class="navbar navbar-expand-md navbar-dark bg-dark"> | ||
| <div class="container-fluid"> | ||
| <a class="navbar-brand" href="index.html">Pict2Pix.js</a> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||
| <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0"> | ||
| <li class="nav-item col-6 col-md-auto"> | ||
| <a class="nav-link active" aria-current="page" href="index.html#get_started">Get Started</a> | ||
| </li> | ||
| <li class="nav-item col-6 col-md-auto dropdown"> | ||
| <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> | ||
| Effects | ||
| </a> | ||
| <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> | ||
| <li><a class="dropdown-item" href="twisted-particles.html">Twisted Particles</a></li> | ||
| <li><a class="dropdown-item" href="straight-particles.html">Straight Particles</a></li> | ||
| <li><a class="dropdown-item" href="led-matrix.html">Led Matrix</a></li> | ||
| <li><a class="dropdown-item" href="halftone.html">Halftone</a></li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| <hr class="d-lg-none text-white-50"> | ||
| <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> | ||
| <li class="nav-item col-6 col-md-auto"> | ||
| <a class="nav-link active" target="_blank" aria-current="page" href="https://github.com/evaristocuesta/pict2pix"> | ||
| <i class="bi-github" role="img" aria-label="GitHub"></i> | ||
| <small class="ms-2">GitHub</small> | ||
| </a> | ||
| </li> | ||
| <li class="nav-item col-6 col-md-auto"> | ||
| <a class="nav-link active" target="_blank" aria-current="page" href="https://www.linkedin.com/in/evaristocuesta/"> | ||
| <i class="bi-linkedin" role="img" aria-label="Linkedin"></i> | ||
| <small class="ms-2">Linkedin</small> | ||
| </a> | ||
| </li> | ||
| <li class="nav-item col-6 col-md-auto"> | ||
| <a class="nav-link active" target="_blank" aria-current="page" href="https://twitter.com/evaristocuesta"> | ||
| <i class="bi-twitter" role="img" aria-label="Twitter"></i> | ||
| <small class="ms-2">Twitter</small> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
|
|
||
| <section class="py-2 text-center container"> | ||
| <div class="row py-lg-5"> | ||
| <div class="col-lg-6 col-md-8 mx-auto"> | ||
| <h1 class="fw-light">Halftone Effect</h1> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <div class="album py-5 bg-light"> | ||
| <div class="container"> | ||
|
|
||
| <div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 g-3"> | ||
| <div class="col"></div> | ||
| <div class="col"> | ||
| <div class="card shadow-sm"> | ||
| <img id="image-jh" src="images/jimi-hendrix.jpg" alt="Pict2Pix.js library"> | ||
| <div class="card-body"> | ||
| <h5 class="card-text">Halftone Effect</h5> | ||
| <div class="d-flex justify-content-between align-items-center"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <section class="get-started bg-light py-2"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div> | ||
| <h3 class="fw-light">Setting up Halftone Effect</h3> | ||
| </div> | ||
| </div> | ||
| <div class="row py-2"> | ||
| <div> | ||
| <ul> | ||
| <li> | ||
| <div>Get the image element and call to pict2pix.animate function</div> | ||
| <div> | ||
| <pre><code class="javascript">const imagejh = document.getElementById('image-jh'); | ||
|
|
||
| window.onload = function initialize() { | ||
| pict2pix.animate({ | ||
| image: imagejh, | ||
| dotSize: 4, | ||
| particleType: 'halftone', | ||
| transitionTime: 10000, | ||
| idleTime: 4000, | ||
| color: 'black', | ||
| separation: 8 | ||
| }); | ||
| }</code></pre> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div>Options</div> | ||
| <ul> | ||
| <li><b>image</b>: Required. The html element to apply the effect</li> | ||
| <li><b>particleType</b>: Required. The effect to apply to the image. In this case is 'halftone'</li> | ||
| <li><b>dotSize</b>: Optional. Dot size. Must be greater than 4. Default value 4.</li> | ||
| <li><b>transitionTime</b>: Optional. Trasitions time in ms. Default value 8000.</li> | ||
| <li><b>idleTime</b>: Optional. Idle time in ms. Default value 4000.</li> | ||
| <li><b>color</b>: Optional. Dot color. Default value rgb(30, 30, 30).</li> | ||
| <li><b>separation</b>: Optional. Separation among dots. Default value 10.</li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer class="text-muted py-5"> | ||
| <div class="container"> | ||
| <button class="btn btn-xs toTop" title="Back to top" id="toTop"> | ||
| <i class="bi bi-arrow-up"></i> | ||
| </button> | ||
| <p class="mb-0">Developed by <a target="_blank" href="https://www.evaristocuesta.com">Evaristo Cuesta</a> inspired by effects of <a target="_blank" href="https://www.youtube.com/c/Frankslaboratory/">Frank's Laboratory</a>.</p> | ||
| </div> | ||
| </footer> | ||
|
|
||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.4.0/dist/pict2pix.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/languages/javascript.min.js"></script> | ||
| <script src="js/app.js?v=0.4.0"></script> | ||
| <script src="js/halftone.js?v=0.4.0"></script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| const imagejh = document.getElementById('image-jh'); | ||
|
|
||
| window.onload = function initialize() { | ||
| pict2pix.animate({ | ||
| image: imagejh, | ||
| dotSize: 4, | ||
| particleType: 'halftone', | ||
| transitionTime: 10000, | ||
| idleTime: 4000, | ||
| color: 'black', | ||
| separation: 10 | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.