Skip to content
This repository has been archived by the owner on Mar 31, 2022. It is now read-only.

Commit

Permalink
Working implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Luehrsen
Luehrsen committed Apr 7, 2021
1 parent 46c18f9 commit ef87885
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 8 deletions.
12 changes: 11 additions & 1 deletion demo/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,20 @@ textarea {

.w1-pixel-stage {
width: 100%;
height: 100vh;
height: 25vh;
background-image: url(https://unsplash.it/640/360);
background-position: center center;
background-size: cover;
margin-bottom: 50px;
}

.w1-pixel-stage canvas {
opacity: 0;
transition: opacity .5s ease;
}

.w1-pixel-stage-loaded canvas {
opacity: 1;
}


Expand Down
1 change: 1 addition & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<body>

<div class="w1-pixel-stage"></div>
<div class="w1-pixel-stage"></div>

<script type="module" src="/build/index.js"></script>
</body>
Expand Down
45 changes: 44 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 10 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,16 @@
},
"dependencies": {
"@pixi/app": "^6.0.2",
"@pixi/constants": "^6.0.2",
"@pixi/core": "^6.0.2",
"@pixi/display": "^6.0.2",
"@pixi/graphics": "^6.0.2"
"@pixi/graphics": "^6.0.2",
"@pixi/interaction": "^6.0.2",
"@pixi/math": "^6.0.2",
"@pixi/runner": "^6.0.2",
"@pixi/settings": "^6.0.2",
"@pixi/ticker": "^6.0.2",
"@pixi/utils": "^6.0.2",
"@tweenjs/tween.js": "^18.6.4"
}
}
78 changes: 74 additions & 4 deletions src/inc/pixel.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as PIXI from './../pixi.js';
import TWEEN from '@tweenjs/tween.js';

/**
* An object with some default parameters.
Expand All @@ -9,6 +10,17 @@ const pixelDefaults = {
color: 0xFFFFFF,
}

/**
* Get a random integer bewtween min and max.
*
* @type {Function}
*/
const getRandomIntInclusive = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min +1)) + min;
}

export default class W1Pixel extends PIXI.Graphics {

/**
Expand All @@ -26,13 +38,71 @@ export default class W1Pixel extends PIXI.Graphics {
// Define the parameters and its defaults.
this.params = Object.assign({}, pixelDefaults, params);

this.drawPixel( size );
// Define the pixel size
this.pixelSize = size;
this.interactive = true;

// Draw the pixel
this.drawPixel();

// Position the pixel
this.x = x;
this.y = y;
this.alpha = Math.random();
this.duration = 5000 * ( getRandomIntInclusive(50, 100) / 100 );
this.delay = this.duration * ( getRandomIntInclusive(0, 100) / 50 );

// Define the main tween
this.mainTween = new TWEEN.Tween(this);
this.mainTween.to({alpha: 0}, this.duration);
this.mainTween.repeat(Infinity);
this.mainTween.yoyo(true);
this.mainTween.delay(this.delay);
this.mainTween.repeatDelay(0);
this.mainTween.easing(TWEEN.Easing.Cubic.InOut)
this.mainTween.onUpdate((object) => {
this.updateTween(object);
});
this.mainTween.onStart(() => {
this.currentTween = this.mainTween;
});

// Define the hover tween
this.hoverTween = new TWEEN.Tween(this);
this.hoverTween.to({alpha: 0}, this.duration * 2);
this.hoverTween.easing(TWEEN.Easing.Cubic.InOut)
this.hoverTween.onUpdate((object) => {
this.updateTween(object);
});
this.hoverTween.onStart((tween) => {
this.currentTween = this.hoverTween;
});
this.hoverTween.onComplete(() => {
this.mainTween.start();
});

this.fade();

// Hover events
this.on( 'pointerover', function() {
this.currentTween.stop();
this.alpha = 1;
this.hoverTween.start();
});
}

drawPixel() {
this.clear();
this.beginFill(this.params.color);
this.drawRect(0, 0, this.pixelSize, this.pixelSize);
}

updateTween( object ) {
this.alpha = object.alpha;
}

drawPixel( size ) {
this.beginFill(this.params.color, Math.random());
this.drawRect(0, 0, size, size);
fade() {
this.mainTween.start();
this.currentTween = this.mainTween;
}
}
13 changes: 12 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Import external dependencies.
import * as PIXI from './pixi.js';
import TWEEN from '@tweenjs/tween.js';

// Import internal dependencies.
import W1Pixel from './inc/pixel';
Expand All @@ -8,7 +9,7 @@ import W1Pixel from './inc/pixel';
// This should ideally be externalised and be modified by a window object.
const options = {
selectorClassName: 'w1-pixel-stage',
pixelSize: 20, // The default size of one pixel.
pixelSize: 200, // The default size of one pixel.
overflow: false, // If we want to draw pixel over the edge of the stage.
vAlign: 'center', // top, center, bottom
hAlign: 'center', // left, center, right
Expand All @@ -18,6 +19,8 @@ const options = {
window.addEventListener( 'load', function( event ) {
const elements = document.getElementsByClassName( options.selectorClassName );
Array.from( elements ).forEach( ( element ) => {
element.classList.add( options.selectorClassName + '-loading' );

// Generate the PIXI app and add it to the DOMElement.
const app = new PIXI.Application( {
resizeTo: element,
Expand Down Expand Up @@ -63,5 +66,13 @@ window.addEventListener( 'load', function( event ) {
} else if ( options.hAlign === 'right' ) {
container.x = (app.renderer.view.width - container.width);
}

element.classList.remove( options.selectorClassName + '-loading' );
element.classList.add( options.selectorClassName + '-loaded' );
} );

const ticker = PIXI.Ticker.shared;
ticker.add( () => {
TWEEN.update();
} );
});
9 changes: 9 additions & 0 deletions src/pixi.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
/**
* Define the pixi dependencies.
*
* @see https://pixijs.io/customize/
*/

export * from '@pixi/constants';
export * from '@pixi/math';
export * from '@pixi/runner';
Expand All @@ -9,11 +15,14 @@ export * from '@pixi/display';
export * from '@pixi/core';
export * from '@pixi/app';
export * from '@pixi/graphics';
export * from '@pixi/interaction';

// Renderer plugins
import { Renderer } from '@pixi/core';
import { BatchRenderer } from '@pixi/core';
Renderer.registerPlugin('batch', BatchRenderer);
import { InteractionManager } from '@pixi/interaction';
Renderer.registerPlugin('interaction', InteractionManager);

// Application plugins
import { Application } from '@pixi/app';
Expand Down

0 comments on commit ef87885

Please sign in to comment.