A various color Matrix filters and Presets for pixi.js

Overview

Pixi Color Effects

A various color Matrix filters for pixi.js with TON of presets!

DEMO

img

Install

# npm
npm install pixi-color-effects

# yarn
yarn add pixi-color-effects

Usage

import { Tint } from "pixi-color-effects";

const app = new Application({
  // **
});

let filter = new Tint();
app.stage.filters = [filter];

//  change value
let num = 0;
app.ticker.add((delta) => {
  num += 0.1;
  filter.value = Math.sin(num) * 1;
});

Use Preset

import { Preset } from "pixi-color-effects";
let filter = new Preset("aladin");
app.stage.filters = [filter];

License

This project is licensed under the MIT License.

You might also like...

Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Oct 25, 2022

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Nov 15, 2022

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

Jun 27, 2022

A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex 🎨 A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Oct 1, 2022

An Obsidian plugin that allows adding iframes with custom styling as editor tabs. Also comes with presets for Google Keep and more.

An Obsidian plugin that allows adding iframes with custom styling as editor tabs. Also comes with presets for Google Keep and more.

Obsidian Custom Frames An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep an

Jan 8, 2023

Web Application for admin of T-quest game to manage presets of questions

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jun 30, 2022

LukeZhu's ESLint config presets

@luke358/eslint-config eslint monorepo Usage Install pnpm add -D eslint @luke358/eslint-config Config .eslintrc { "extends": "@luke358" } You don't

Jun 13, 2022

Soybean's eslint config presets

Soybean's eslint config presets Auto fix for formatting with prettier TypeScript, Vue, React out-of-box Lint also for json, yaml, markdown Sorted impo

Dec 21, 2022

create custom search presets for vscode 🔎

create custom search presets for vscode 🔎

VSCode Search Presets vscode extension to configure search presets Sometimes you want to search through a specific set of files, you can use vscode's

Oct 14, 2022
Comments
  • Simplify Dependencies Using Packages

    Simplify Dependencies Using Packages

    Another suggestion is to use @pixi/core instead of pixi.js for filter dependencies. This will support both pixi.js, pixi.js-legacy and custom bundles.

    // Before
    import { Filter } from 'pixi.js';
    
    // After
    import { Filter } from '@pixi/core';
    

    This is how https://github.com/pixijs/filters does it.

    enhancement 
    opened by bigtimebuddy 2
  • Fix dependencies to use PixiJS packages

    Fix dependencies to use PixiJS packages

    Fixes #3

    Changed

    • Converts the pixi.js dependency to use the @pixi/* packages instead
    • Removes @types/pixi.js at this is not longer necessary

    Advantages

    • Allows end-users to create the smallest possible footprint (e.g. https://pixijs.io/customize)
    • Works with either pixi.js or pixi.js-legacy bundle
    • Better conforms to PixiJS's filters repo: https://github.com/pixijs/filters
    opened by bigtimebuddy 1
  •  b0o0m

    b0o0m

    image

    点击 beachflower 大约20次后就出现bug了

    user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.45 Safari/537.36
    
    opened by puzzle9 1
  • Sharpen Edges

    Sharpen Edges

    Screen Shot 2022-05-10 at 5 15 35 PM

    Awesome library! I just shared this on the PixiJS Discord.

    I saw a minor issue with the Sharpen filter, seems like the edges of the image are sharpened and I would not expect them to be.

    Welcome PR 
    opened by bigtimebuddy 0
Owner
A various color Matrix filters and Presets for pixi.js
null
Use Matrix as a backend for local-first applications with the Matrix-CRDT Yjs provider.

Matrix CRDT Matrix-CRDT enables you to use Matrix as a backend for distributed, real-time collaborative web applications that sync automatically. The

Yousef 604 Jan 7, 2023
matrix <=> discord moderation with the power of matrix-appservice-discord

graim matrix <=> discord moderation with the power of matrix-appservice-discord Social graim's website is viewable at gra.im. You can join the graim M

null 19 Dec 24, 2022
Utility to generate adwaita presets for use with AdwCustomizer from images using Google's MaterialU color generator.

Adwaita Preset Generator using Material U Color Generation Material U Color generation is done using the material-color-utilities available here: http

Avanish Subbiah 30 Oct 31, 2022
CSS only library to apply color filters.

filters.css CSS only library to apply color filters. See the full documentation Features Only CSS. No JavaScript! ~1KB minified and gzipped! Supports

Jitender Bansal 340 Dec 17, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Using Storybook for Pixi.js graphics development

Storybook for Pixi.js Using Storybook for Pixi.js graphics development This project includes: Storybook Pixi.js Pixi Viiewport Background Often conven

Jason Sturges 5 Mar 9, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This project will be using various AI and Rule Engine algorithm to detect various attack against a company!

?? Introduction This project will be using various AI and Rule Engine algorithm to detect various attack against a website! ?? Mission After starting

Harish S.G 4 Apr 29, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022