-
-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
332 changed files
with
17,710 additions
and
6,872 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
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
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,67 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Demo Canvas 019a</title> | ||
| <link href="css/normalize.css" rel="stylesheet" /> | ||
| <link href="css/tests.css" rel="stylesheet" /> | ||
|
|
||
| <style> | ||
| img { | ||
| display: none; | ||
| } | ||
| canvas { | ||
| display: block; | ||
| margin: 0 auto 1em; | ||
| border: 1px solid red; | ||
| } | ||
| .controls { | ||
| grid-template-columns: 1fr 1fr; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 019a</h1> | ||
| <h2>Gradient and Color factories - transparency - alternative approach using Cells instead of images</h2> | ||
|
|
||
| <div class="controls"> | ||
| <canvas id="hackney" width="400" height="400"></canvas> | ||
| <canvas id="heathrow" width="400" height="400"></canvas> | ||
| <canvas id="kingston" width="400" height="400"></canvas> | ||
| <canvas id="burglary" width="400" height="400"></canvas> | ||
| </div> | ||
|
|
||
| <p id="reportmessage"></p> | ||
|
|
||
| <div class="testinfo"> | ||
| <h4>Test purpose</h4> | ||
| <ul> | ||
| <li>Use the four canvases to display a separate image, defined in the DOM.</li> | ||
| <li>Check that the `scrawl.createImageFromEntity` functionality works, and that we can capture and use blurred images created dynamically from the originals.</li> | ||
| <li>Create four (radial) gradients, each with a transparent hole in the middle. We are testing the following values for CSS transparency:</li> | ||
| <ul> | ||
| <li>"transparent"</li> | ||
| <li>"rgba(0,0,0,0)"</li> | ||
| <li>"#00000000"</li> | ||
| <li>"#0000"</li> | ||
| </ul> | ||
| <li>Check that all canvases display as expected, with in-focus areas of the image centred either on the mouse cursor, or in the middle of the canvas.</li> | ||
| </ul> | ||
| <p><b>Known issue</b>: generating the blurred images from the originals takes a very long time in some browsers (for example: Safari). once the images are generated, then the Demo should be performant across all browsers.</p> | ||
| <p><a href="../docs/demo/canvas-019a.html">Annotated code</a></p> | ||
| </div> | ||
|
|
||
| <img id="hackney-bg" src="img/hackney-grey.jpg" class="places" /> | ||
| <img id="heathrow-bg" src="img/heathrow-grey.jpg" class="places" /> | ||
| <img id="kingston-bg" src="img/kingston-grey.jpg" class="places" /> | ||
| <img id="burglary-bg" src="img/burglary-grey.jpg" class="places" /> | ||
|
|
||
| <script src="canvas-019a.js" type="module"></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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,190 @@ | ||
| // # Demo Canvas 019a | ||
| // Gradient and Color factories - transparency - alternative approach using Cells instead of images | ||
|
|
||
| // [Run code](../../demo/canvas-019a.html) | ||
| import scrawl from '../source/scrawl.js'; | ||
|
|
||
|
|
||
| // #### Scene setup | ||
| const canvases = scrawl.library.canvas; | ||
|
|
||
| // Import the images we defined in the DOM (in <img> elements) | ||
| scrawl.importDomImage('.places'); | ||
|
|
||
| // For this scene, we'll build a data structure which we can iterate over, to build the entitys, assets and gradients required by the scene | ||
| const data = [ | ||
| { | ||
| canvas: canvases['hackney'], | ||
| image: 'hackney-bg', | ||
| transparency: 'transparent', | ||
| }, | ||
| { | ||
| canvas: canvases['heathrow'], | ||
| image: 'heathrow-bg', | ||
| transparency: 'rgba(0,0,0,0)', | ||
| }, | ||
| { | ||
| canvas: canvases['kingston'], | ||
| image: 'kingston-bg', | ||
| transparency: '#00000000', | ||
| }, | ||
| { | ||
| canvas: canvases['burglary'], | ||
| image: 'burglary-bg', | ||
| transparency: '#0000', | ||
| }, | ||
| ]; | ||
|
|
||
| // This array will hold a set of functions which we will invoke in turn at the start of each Display cycle | ||
| const checkFunctions = []; | ||
|
|
||
| // The blur filter is temporary - we use it once on each image to generate a blurred version of that image | ||
| // + We do it this way because the blur filter is computationally very expensive - capturing a blurred version of the image is a lot better for end user power consumption | ||
| scrawl.makeFilter({ | ||
| name: 'blur', | ||
| method: 'blur', | ||
| radius: 20, | ||
| passes: 2, | ||
| }); | ||
|
|
||
| // Iterate through our data array to create Scrawl-canvas objects | ||
| data.forEach(scene => { | ||
|
|
||
| // Firstly, build the blurred image in its own cell | ||
| // + We only need to compile this once, thus don't include the cell in any part of the Display cycle | ||
| let mycell = scene.canvas.buildCell({ | ||
|
|
||
| name: `${scene.image}-blurred-cell`, | ||
| dimensions: ['100%', '100%'], | ||
| cleared: false, | ||
| compiled: false, | ||
| shown: false, | ||
| }); | ||
|
|
||
| scrawl.makePicture({ | ||
|
|
||
| name: `${scene.image}-blurred-image`, | ||
| group: `${scene.image}-blurred-cell`, | ||
|
|
||
| asset: `${scene.image}`, | ||
|
|
||
| dimensions: ['100%', '100%'], | ||
| copyDimensions: ['100%', '100%'], | ||
|
|
||
| filters: ['blur'], | ||
| method: 'fill', | ||
| }); | ||
|
|
||
| // The new Cell's compile action is blocking, because the blur filter takes a long time to complete. To get something up on the screen we can defer the compile action until after the current RAF completes by putting it in a setTimeout invocation. | ||
| setTimeout(() => mycell.compile(), 0); | ||
|
|
||
|
|
||
| // Next, build a gradient using transparency and apply it in a second Block which displays in the original canvas | ||
| scrawl.makeRadialGradient({ | ||
|
|
||
| name: `${scene.image}-gradient`, | ||
| start: ['50%', '50%'], | ||
| end: ['50%', '50%'], | ||
| startRadius: '5%', | ||
| endRadius: '20%', | ||
| }) | ||
| .updateColor(0, `${scene.transparency}`) | ||
| .updateColor(999, 'lightgray'); | ||
|
|
||
| const gradientBlock = scrawl.makeBlock({ | ||
|
|
||
| name: `${scene.image}-gradient-block`, | ||
| group: `${scene.canvas.base.name}`, | ||
|
|
||
| start: ['center', 'center'], | ||
| handle: ['center', 'center'], | ||
| dimensions: ['200%', '200%'], | ||
|
|
||
| fillStyle: `${scene.image}-gradient`, | ||
| lockFillStyleToEntity: true, | ||
| }); | ||
|
|
||
| // Now we can draw our blurred image into the scene | ||
| // + We use some compositing magic so it only appears where the gradient is not transparent | ||
| scrawl.makePicture({ | ||
|
|
||
| name: `${scene.image}-blurred-block`, | ||
| group: scene.canvas.base.name, | ||
|
|
||
| asset: `${scene.image}-blurred-cell`, | ||
|
|
||
| dimensions: ['100%', '100%'], | ||
| copyDimensions: ['100%', '100%'], | ||
|
|
||
| method: 'fill', | ||
| globalCompositeOperation: 'source-atop', | ||
| }); | ||
|
|
||
| // Lastly, display the original image in the canvas | ||
| // + Again, we use compositing magic to draw on the bits missed by the blurred image | ||
| scrawl.makePicture({ | ||
|
|
||
| name: `${scene.image}-original-image`, | ||
| group: scene.canvas.base.name, | ||
|
|
||
| asset: `${scene.image}`, | ||
|
|
||
| dimensions: ['100%', '100%'], | ||
| copyDimensions: ['100%', '100%'], | ||
|
|
||
| method: 'fill', | ||
| globalCompositeOperation: 'destination-over', | ||
| }); | ||
|
|
||
| // Check whether the mouse cursor is hovering over this canvas, and update the filter Block entity's positioning accordingly | ||
| const f = () => { | ||
|
|
||
| const here = scene.canvas.here; | ||
|
|
||
| return function () { | ||
|
|
||
| gradientBlock.set({ | ||
| lockTo: (here.active) ? 'mouse' : 'start', | ||
| }); | ||
| } | ||
| }; | ||
| checkFunctions.push(f()); | ||
| }); | ||
|
|
||
| // #### Scene animation | ||
| // Function to display frames-per-second data, and other information relevant to the demo | ||
| let report = function () { | ||
|
|
||
| let testTicker = Date.now(), | ||
| testTime, testNow, dragging, | ||
| testMessage = document.querySelector('#reportmessage'); | ||
|
|
||
| return function () { | ||
|
|
||
| testNow = Date.now(); | ||
|
|
||
| // Because we are using the same render object to animate all four canvases, this report function gets run four times for each Display cycle (once each time each canvas is rendered). The fix is to choke the functionality so it actions only after a given number of milliseconds since it was last run - typically 2 milliseconds is enough to ensure the action only runs once per cycle. | ||
| if (testNow - testTicker > 2) { | ||
|
|
||
| testTime = testNow - testTicker; | ||
| testTicker = testNow; | ||
|
|
||
| testMessage.textContent = `Screen refresh: ${Math.ceil(testTime)}ms; fps: ${Math.floor(1000 / testTime)}`; | ||
| } | ||
| }; | ||
| }(); | ||
|
|
||
|
|
||
| // Create the Display cycle animation | ||
| scrawl.makeRender({ | ||
|
|
||
| name: 'demo-animation', | ||
| target: [canvases['hackney'], canvases['heathrow'], canvases['kingston'], canvases['burglary']], | ||
|
|
||
| commence: () => checkFunctions.forEach(f => f()), | ||
| afterShow: report, | ||
| }); | ||
|
|
||
|
|
||
| // #### Development and testing | ||
| console.log(scrawl.library); |
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.