Skip to content

Commit

Permalink
Chore: Move demo to examples
Browse files Browse the repository at this point in the history
  • Loading branch information
bigtimebuddy committed Jan 21, 2024
1 parent e73535f commit 35d0e1a
Show file tree
Hide file tree
Showing 101 changed files with 165 additions and 213 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ jobs:
run: npm ci

- name: Build for Distribution
run: xvfb-run --auto-servernum npm run deploy:ci
run: xvfb-run --auto-servernum npm run dist

# All the below are deploy-related steps
- name: Extract Branch Name
Expand Down
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ docs
dist
lib
deploy
tools/demo/index.js
tools/demo/index.js.map
.DS_Store
/out
/screenshots
Expand Down
82 changes: 41 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## Demo

[View the PixiJS Filters Demo](https://pixijs.io/filters/demo/) to interactively play with filters to see how they work.
[View the PixiJS Filters Demo](https://pixijs.io/filters/examples/) to interactively play with filters to see how they work.

## Filters

Expand Down Expand Up @@ -109,43 +109,43 @@ npm run watch
API documention can be found [here](http://pixijs.io/filters/docs/).

<!-- references -->
[Adjustment_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=AdjustmentFilter
[AdvancedBloom_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=AdvancedBloomFilter
[Ascii_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=AsciiFilter
[Bevel_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=BevelFilter
[Bloom_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=BloomFilter
[BulgePinch_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=BulgePinchFilter
[ColorGradient_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ColorGradientFilter
[ColorMap_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ColorMapFilter
[ColorOverlay_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ColorOverlayFilter
[ColorReplace_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ColorReplaceFilter
[Convolution_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ConvolutionFilter
[CrossHatch_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=CrossHatchFilter
[CRT_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=CRTFilter
[Dot_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=DotFilter
[DropShadow_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=DropShadowFilter
[Emboss_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=EmbossFilter
[Glitch_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=GlitchFilter
[Glow_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=GlowFilter
[Godray_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=GodrayFilter
[Grayscale_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=GrayscaleFilter
[HslAdjustment_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=HslAdjustmentFilter
[KawaseBlur_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=KawaseBlurFilter
[MotionBlur_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=MotionBlurFilter
[MultiColorReplace_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=MultiColorReplaceFilter
[OldFilm_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=OldFilmFilter
[Outline_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=OutlineFilter
[Pixelate_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=PixelateFilter
[RadialBlur_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=RadialBlurFilter
[Reflection_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ReflectionFilter
[RGBSplit_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=RGBSplitFilter
[Shockwave_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ShockwaveFilter
[SimpleLightmap_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=SimpleLightmapFilter
[TiltShift_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=TiltShiftFilter
[Twist_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=TwistFilter
[ZoomBlur_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ZoomBlurFilter
[Alpha_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=AlphaFilter
[Blur_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=BlurFilter
[ColorMatrix_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=ColorMatrixFilter
[Displacement_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=DisplacementFilter
[Noise_demo]: https://filters.pixijs.download/main/demo/index.html?enabled=NoiseFilter
[Adjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdjustmentFilter
[AdvancedBloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdvancedBloomFilter
[Ascii_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AsciiFilter
[Bevel_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BevelFilter
[Bloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BloomFilter
[BulgePinch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BulgePinchFilter
[ColorGradient_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorGradientFilter
[ColorMap_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorMapFilter
[ColorOverlay_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorOverlayFilter
[ColorReplace_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorReplaceFilter
[Convolution_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ConvolutionFilter
[CrossHatch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=CrossHatchFilter
[CRT_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=CRTFilter
[Dot_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DotFilter
[DropShadow_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DropShadowFilter
[Emboss_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=EmbossFilter
[Glitch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GlitchFilter
[Glow_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GlowFilter
[Godray_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GodrayFilter
[Grayscale_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GrayscaleFilter
[HslAdjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=HslAdjustmentFilter
[KawaseBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=KawaseBlurFilter
[MotionBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=MotionBlurFilter
[MultiColorReplace_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=MultiColorReplaceFilter
[OldFilm_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=OldFilmFilter
[Outline_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=OutlineFilter
[Pixelate_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=PixelateFilter
[RadialBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=RadialBlurFilter
[Reflection_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ReflectionFilter
[RGBSplit_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=RGBSplitFilter
[Shockwave_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ShockwaveFilter
[SimpleLightmap_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=SimpleLightmapFilter
[TiltShift_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=TiltShiftFilter
[Twist_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=TwistFilter
[ZoomBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ZoomBlurFilter
[Alpha_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AlphaFilter
[Blur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BlurFilter
[ColorMatrix_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorMatrixFilter
[Displacement_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DisplacementFilter
[Noise_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=NoiseFilter
10 changes: 10 additions & 0 deletions examples/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"globals": {
"PIXI": true,
"lil": true,
"ga": true
},
"rules": {
"func-names": "off"
}
}
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
5 changes: 3 additions & 2 deletions tools/demo/index.html → examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://pixijs.download/next-v8/pixi.min.js"></script>
<link rel="stylesheet" href="index.css" />
<script src="../dist/pixi-filters.js"></script>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="container">
<canvas id="stage" width="300" height="300"></canvas>
<a id="logo" href="http://www.pixijs.com"><img src="images/pixijs-logo.png"></a>
</div>
<script src="index.js"></script>
<script type="module" src="./src/index.mjs"></script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,21 +1,5 @@
import PixiFilters, {
Application,
Assets,
Container,
EventEmitter,
Rectangle,
Sprite,
TilingSprite
} from 'pixi.js';
import * as filters from '../../../lib';

/* global lil,ga*/
/**
* Demo show a bunch of fish and a lil-gui controls
* @class
* @extends Application
*/
export default class DemoApplication extends Application
/** Demo show a bunch of fish and a lil-gui controls */
export default class DemoApplication extends PIXI.Application
{
constructor()
{
Expand All @@ -36,7 +20,7 @@ export default class DemoApplication extends Application
this.initHeight = initHeight;
this.animating = true;
this.rendering = true;
this.events = new EventEmitter();
this.events = new PIXI.EventEmitter();
this.animateTimer = 0;
this.bg = null;
this.pond = null;
Expand All @@ -45,9 +29,9 @@ export default class DemoApplication extends Application
this.fishFilters = [];
this.pondFilters = [];

this.filterArea = new Rectangle();
this.filterArea = new PIXI.Rectangle();
this.padding = 100;
this.bounds = new Rectangle(
this.bounds = new PIXI.Rectangle(
-this.padding,
-this.padding,
initWidth + (this.padding * 2),
Expand Down Expand Up @@ -93,8 +77,8 @@ export default class DemoApplication extends Application
*/
async load(manifest)
{
Assets.addBundle('bundle', manifest);
this.resources = await Assets.loadBundle('bundle');
PIXI.Assets.addBundle('bundle', manifest);
this.resources = await PIXI.Assets.loadBundle('bundle');
this.setup();
this.start();
}
Expand All @@ -107,13 +91,13 @@ export default class DemoApplication extends Application
const { bounds, initWidth, initHeight } = this;

// Setup the container
this.pond = new Container();
this.pond = new PIXI.Container();
this.pond.filterArea = this.filterArea;
this.pond.filters = this.pondFilters;
this.stage.addChild(this.pond);

// Setup the background image
this.bg = new Sprite(resources.background);
this.bg = new PIXI.Sprite(resources.background);
this.pond.addChild(this.bg);

// Create and add the fish
Expand All @@ -122,7 +106,7 @@ export default class DemoApplication extends Application
for (let i = 0; i < this.fishCount; i++)
{
const id = `fish${(i % fishVariations) + 1}`;
const fish = new Sprite(resources[id]);
const fish = new PIXI.Sprite(resources[id]);

fish.anchor.set(0.5);
fish.filters = this.fishFilters;
Expand All @@ -140,7 +124,7 @@ export default class DemoApplication extends Application
}

// Setup the tiling sprite
this.overlay = new TilingSprite({
this.overlay = new PIXI.TilingSprite({
texture: resources.overlay,
width: initWidth,
height: initHeight,
Expand Down Expand Up @@ -299,7 +283,7 @@ export default class DemoApplication extends Application

const app = this;
const folder = this.gui.addFolder(options.name).close();
const ClassRef = filters[id] || PixiFilters[id];
const ClassRef = PIXI.filters[id] || PIXI[id];

if (!ClassRef)
{
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { ColorGradientFilter } from '../../../../lib/index.mjs';

const deepCopy = (value) => JSON.parse(JSON.stringify(value));
const { ColorGradientFilter } = PIXI.filters;

export default function ()
{
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { Sprite } from 'pixi.js';

export default function ()
{
const app = this;

this.resources.map.source.addressMode = 'repeat';
const displacementSprite = new Sprite(this.resources.map);
const displacementSprite = new PIXI.Sprite(this.resources.map);

this.addFilter('DisplacementFilter', {
enabled: true,
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function ()
{
this.animating = true;

app.events.on('animate', () =>
app.events.on('animate', function ()
{
if (this.animating)
{
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { Point } from 'pixi.js';

export default function ()
{
const app = this;
Expand All @@ -23,7 +21,7 @@ export default function ()
}
});

app.events.on('animate', () =>
app.events.on('animate', function ()
{
if (this.animating)
{
Expand Down
File renamed without changes.
File renamed without changes.
42 changes: 42 additions & 0 deletions examples/src/filters/index.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* eslint-disable simple-import-sort/exports */
// Order here is the dat-gui order
export { default as adjustment } from './adjustment.mjs';
export { default as advancedBloom } from './advanced-bloom.mjs';
export { default as alpha } from './alpha.mjs';
export { default as ascii } from './ascii.mjs';
export { default as bevel } from './bevel.mjs';
export { default as bloom } from './bloom.mjs';
export { default as blur } from './blur.mjs';
export { default as bulgePinch } from './bulge-pinch.mjs';
export { default as colorGradient } from './color-gradient.mjs';
export { default as colorMap } from './color-map.mjs';
export { default as colorMatrix } from './color-matrix.mjs';
export { default as colorOverlay } from './color-overlay.mjs';
export { default as colorReplace } from './color-replace.mjs';
export { default as convolution } from './convolution.mjs';
export { default as crossHatch } from './cross-hatch.mjs';
export { default as crt } from './crt.mjs';
export { default as displacement } from './displacement.mjs';
export { default as dot } from './dot.mjs';
export { default as dropShadow } from './drop-shadow.mjs';
export { default as emboss } from './emboss.mjs';
export { default as glitch } from './glitch.mjs';
export { default as glow } from './glow.mjs';
export { default as godray } from './godray.mjs';
export { default as grayscale } from './grayscale.mjs';
export { default as hslAdjustment } from './hsl-adjustment.mjs';
export { default as kawaseBlur } from './kawase-blur.mjs';
export { default as motionBlur } from './motion-blur.mjs';
export { default as multiColorReplace } from './multi-color-replace.mjs';
export { default as noise } from './noise.mjs';
export { default as oldFilm } from './old-film.mjs';
export { default as outline } from './outline.mjs';
export { default as pixelate } from './pixelate.mjs';
export { default as radialBlur } from './radial-blur.mjs';
export { default as reflection } from './reflection.mjs';
export { default as rgb } from './rgb.mjs';
export { default as shockwave } from './shockwave.mjs';
export { default as simpleLightmap } from './lightmap.mjs';
export { default as tiltShift } from './tilt-shift.mjs';
export { default as twist } from './twist.mjs';
export { default as zoomBlur } from './zoom-blur.mjs';
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function ()
folder.add(this, 'alpha', 0, 1);

// eslint-disable-next-line no-empty-function
this._noop = () => {};
this._noop = function () {};
folder.add(this, '_noop').name('<img src="./images/lightmap.png" width="220" height="13">');
},
});
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
1 change: 0 additions & 1 deletion tools/demo/src/ga.js → examples/src/ga.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* global ga*/
/* eslint-disable */
(function (i, s, o, g, r, a, m)
{
Expand Down
8 changes: 4 additions & 4 deletions tools/demo/src/index.js → examples/src/index.mjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import DemoApplication from './DemoApplication';
import * as filters from './filters';
import { getEnabledFiltersFromQueryString } from './utils';
import './ga';
import DemoApplication from './DemoApplication.mjs';
import * as filters from './filters/index.mjs';
import { getEnabledFiltersFromQueryString } from './utils.mjs';
import './ga.mjs';

const main = async () =>
{
Expand Down
File renamed without changes.
Loading

0 comments on commit 35d0e1a

Please sign in to comment.