Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added quality options updated options
- Loading branch information
Tuqire Hussain
committed
Jun 23, 2019
1 parent
37276ac
commit 304cc3a
Showing
15 changed files
with
2,830 additions
and
2,711 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| { | ||
| "plugins": ["transform-object-rest-spread"], | ||
| "presets": [ | ||
| ["env", { | ||
| "modules": false | ||
| ["@babel/preset-env", { | ||
| "modules": false, | ||
| "targets": "> 0.25%, not dead" | ||
| }] | ||
| ] | ||
| } |
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 |
|---|---|---|
| @@ -1,26 +1,21 @@ | ||
| # WEBGL Webcam Outline | ||
| # Webcam Outline | ||
|
|
||
| This project converts your webcam fed into a comic like visual. Built using `THREE.js`, and `GPGPU`. | ||
| This project manipulates a particle system using your webcam. Built using `Javascript`, `THREE.js`, and [`GPGPU`](https://en.wikipedia.org/wiki/General-purpose_computing_on_graphics_processing_units). | ||
|
|
||
| ## Run locally | ||
| Requires access to your webcam. | ||
|
|
||
| ## To run locally | ||
|
|
||
| ```bash | ||
| yarn start | ||
| yarn && yarn start | ||
| ``` | ||
|
|
||
| Then visit [http://localhost:8091](http://localhost:8091) | ||
| Then visit http://localhost:8091 | ||
|
|
||
| ## Working Demo | ||
|
|
||
| [https://tuqire.github.io/webcam-outline/](https://tuqire.github.io/webcam-outline/) | ||
| [tuqire.github.io/webcam-outline/](https://tuqire.github.io/webcam-outline/) | ||
|
|
||
| ## Contributers | ||
|
|
||
| * Tuqire Hussain <me@tuqire.com> | ||
|
|
||
| ## TODO | ||
|
|
||
| 1. adjust image diff map | ||
| 2. remove excess params in size simulation shader | ||
| 3. add low and high val to particles and uniforms | ||
| 4. move image map to shader |
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 was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
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,137 @@ | ||
| <!doctype html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <title>Webcam Outline - By Tuqire Hussain</title> | ||
| <style> | ||
| body { | ||
| color: rgb(238, 238, 238); | ||
| background-color: #000000; | ||
| height: 100vh; | ||
| margin: 0px; | ||
| overflow: hidden; | ||
| font-family: Arial, sans-serif; | ||
| font-size: 12px; | ||
| line-height: 1.7; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| #container { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative; | ||
| } | ||
|
|
||
| #select-quality { | ||
| display: none; | ||
| font-size: 15px; | ||
| position: relative; | ||
| top: 50%; | ||
| -ms-transform: translateY(-50%); | ||
| transform: translateY(-50%); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .quality-selector { | ||
| cursor: pointer; | ||
| background: none; | ||
| color: inherit; | ||
| text-decoration: none; | ||
| font-size: 15px; | ||
| padding: 10px; | ||
| margin: 0 10px; | ||
| border: 1px solid white; | ||
| } | ||
|
|
||
| .quality-selector:hover { | ||
| background: #333; | ||
| } | ||
|
|
||
| h4 { | ||
| font-size: 25px; | ||
| margin: 0 20px 30px; | ||
| } | ||
|
|
||
| #no-support { | ||
| display: none; | ||
| position: relative; | ||
| top: 50%; | ||
| -ms-transform: translateY(-50%); | ||
| transform: translateY(-50%); | ||
| text-align: center; | ||
| } | ||
|
|
||
| #info { | ||
| display: none; | ||
| line-height: 2; | ||
| background-color: rgb(26, 26, 26); | ||
| position: absolute; | ||
| bottom: 0px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .info-content { | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .hide-info-button { | ||
| display: block; | ||
| cursor: pointer; | ||
| background-color: rgb(20, 20, 20); | ||
| padding: 5px 10px; | ||
| position: absolute; | ||
| width: 100%; | ||
| min-width: 80px; | ||
| left: 0; | ||
| top: -30px; | ||
| } | ||
| </style> | ||
| <meta property="og:url" content="https://tuqire.github.com/webcam-outline/" /> | ||
| <meta property="og:type" content="article" /> | ||
| <meta property="og:title" content="Webcam Outline" /> | ||
| <meta property="og:description" content="A particles simulation driven by Webcam" /> | ||
| <meta property="og:image" content="https://tuqire.github.com/webcam-outline/images/fb-share.jpg" /> | ||
| </head> | ||
| <body> | ||
| <div id="container"> | ||
| <div id="simulation"></div> | ||
| <div id="select-quality"> | ||
| <h4>Select Quality</h4> | ||
| <a class="quality-selector" href="?quality=50000">Very Low</a> | ||
| <a class="quality-selector" href="?quality=75000">Low</a> | ||
| <a class="quality-selector" href="?quality=100000">Medium</a> | ||
| <a class="quality-selector" href="?quality=150000">High</a> | ||
| <a class="quality-selector" href="?quality=250000">Very High</a> | ||
| </div> | ||
| <div id="no-support"> | ||
| <h4>Your device or browser is not supported. Please use the latest version of Chrome on desktop.</h4> | ||
| </div> | ||
| <div id="info"> | ||
| <a class="hide-info-button">Close</a> | ||
| <div class="info-content"> | ||
| Number of particles: <span class="num-particles">0</span><br> | ||
| By <a target="_blank" href="http://www.tuqire.com">Tuqire Hussain</a> | ||
| [<a target="_blank" href="https://github.com/tuqire/webcam-outline">View Code</a>]<br> | ||
| Select Quality: | ||
| <a href="?quality=50000">V Low</a> | | ||
| <a href="?quality=75000">Low</a> | | ||
| <a href="?quality=100000">Medium</a> | | ||
| <a href="?quality=150000">High</a> | | ||
| <a href="?quality=250000">V High</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> |
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,16 @@ | ||
| const getParameterByName = (name, url) => { | ||
| if (!url) { | ||
| url = window.location.href | ||
| } | ||
|
|
||
| name = name.replace(/[[\]]/g, '\\$&') | ||
| const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`) | ||
| const results = regex.exec(url) | ||
|
|
||
| if (!results) return null | ||
| if (!results[2]) return '' | ||
|
|
||
| return decodeURIComponent(results[2].replace(/\+/g, ' ')) | ||
| } | ||
|
|
||
| export default getParameterByName |
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 @@ | ||
| export default () => window.matchMedia('(min-width: 480px)').matches |
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,20 @@ | ||
| import getParameterByName from './getParameterByName' | ||
|
|
||
| export default () => { | ||
| const infoContent = document.querySelector('.info-content') | ||
| const infoHider = document.querySelector('.hide-info-button') | ||
| const quality = Number(getParameterByName('quality')) | ||
|
|
||
| document.getElementById('info').style.display = 'inline' | ||
| document.querySelector('.num-particles').innerHTML = quality.toLocaleString() | ||
|
|
||
| infoHider.addEventListener('click', () => { | ||
| if (infoHider.innerHTML === 'Close') { | ||
| infoHider.innerHTML = 'Open Info' | ||
| infoContent.style.display = 'none' | ||
| } else { | ||
| infoHider.innerHTML = 'Close' | ||
| infoContent.style.display = 'block' | ||
| } | ||
| }) | ||
| } |
Oops, something went wrong.