https://pixijs.com/assets/js/6e17f6f4.a86fd3d3.js

1"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([["1807"],{59047(e,t,r){r.d(t,{al:()=>a});var a={colors:{surface1:"#ffffff",surface2:"#F3F3F3",surface3:"#f5f5f5",clickable:"#959da5",base:"#24292e",disabled:"#d1d4d8",hover:"#24292e",accent:"#24292e"},syntax:{keyword:"#d73a49",property:"#005cc5",plain:"#24292e",static:"#032f62",string:"#032f62",definition:"#6f42c1",punctuation:"#24292e",tag:"#22863a",comment:{color:"#6a737d",fontStyle:"normal"}},font:{body:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',mono:'"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',size:"13px",lineHeight:"20px"}}},88948(e,t,r){r.r(t),r.d(t,{metadata:()=>a,default:()=>m,frontMatter:()=>l,contentTitle:()=>d,toc:()=>u,assets:()=>c});var a=JSON.parse('{"id":"examples/filters-basic/displacement-map-flag","title":"Displacement Map Flag","description":"","source":"@site/versioned_docs/version-7.x/examples/filters-basic/displacement-map-flag.mdx","sourceDirName":"examples/filters-basic","slug":"/examples/filters-basic/displacement-map-flag","permalink":"/7.x/examples/filters-basic/displacement-map-flag","draft":false,"unlisted":false,"editUrl":null,"tags":[],"version":"7.x","sidebarPosition":3,"frontMatter":{"hide_table_of_contents":true,"hide_edit_this_page":true,"sidebar_position":3,"custom_edit_url":null,"title":"Displacement Map Flag"},"sidebar":"examplesSidebar","previous":{"title":"Displacement Map Crawlies","permalink":"/7.x/examples/filters-basic/displacement-map-crawlies"},"next":{"title":"Mouse Blending","permalink":"/7.x/examples/filters-advanced/mouse-blending"}}'),i=r(74848),n=r(28453),s=r(80423),o=r(46146);let l={hide_table_of_contents:!0,hide_edit_this_page:!0,sidebar_position:3,custom_edit_url:null,title:"Displacement Map Flag"},d,c={},u=[];function p(e){return(0,i.jsx)(s.m,{files:{"index.js":"import * as PIXI from 'pixi.js';\n\nconst app = new PIXI.Application({ resizeTo: window });\n\ndocument.body.appendChild(app.view);\n\napp.stage.eventMode = 'static';\n\nconst container = new PIXI.Container();\n\napp.stage.addChild(container);\n\nconst flag = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/flag.png');\n\ncontainer.addChild(flag);\nflag.x = 100;\nflag.y = 100;\n\nconst displacementSprite = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/displacement_map_repeat.jpg');\n// Make sure the sprite is wrapping.\n\ndisplacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;\nconst displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);\n\ndisplacementFilter.padding = 10;\n\ndisplacementSprite.position = flag.position;\n\napp.stage.addChild(displacementSprite);\n\nflag.filters = [displacementFilter];\n\ndisplacementFilter.scale.x = 30;\ndisplacementFilter.scale.y = 60;\n\napp.ticker.add(() => {\n  // Offset the sprite position to make vFilterCoord update to larger value.\n  // Repeat wrapping makes sure there's still pixels on the coordinates.\n  displacementSprite.x++;\n  // Reset x to 0 when it's over width to keep values from going to very huge numbers.\n  if (displacementSprite.x > displacementSprite.width) {\n    displacementSprite.x = 0;\n  }\n});\n"},dependencies:{"pixi.js":o.npm}})}function m(e={}){let{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},60714(e,t,r){r.d(t,{K:()=>g});var a=r(74848),i=r(96540);let n={colors:{surface1:"#242426",surface2:"#444950",surface3:"#44475a",clickable:"#fff",base:"#f8f8f2",disabled:"#6272a4",hover:"#f8f8f2",accent:"#e91e63",error:"#f8f8f2",errorSurface:"#44475a"},syntax:{plain:"#f8f8f2",comment:{color:"#6272a4",fontStyle:"italic"},keyword:"#ff79c6",tag:"#ff79c6",punctuation:"#ff79c6",definition:"#f8f8f2",property:"#50fa7b",static:"#bd93f9",string:"#f1fa8c"},font:{body:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',mono:'"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',size:"13px",lineHeight:"20px"}},s=async e=>{let t=`pixi-definitions-${e}`,r=JSON.parse(localStorage.getItem(t))||null;if(!r)try{let r=await fetch(`https://cdn.jsdelivr.net/npm/pixi.js@${e}/dist/pixi.js.d.ts`),a=await r.text();if(a.startsWith("// Generated by dts-bundle-generator"))return localStorage.setItem(t,JSON.stringify(a)),a;return null}catch(e){return console.error("Failed to fetch pixi.js types:",e),null}return r};var o=r(56963),l=r(83941),d=r(14518);function c({fontSize:e=12,style:t,pixiVersion:r,handleEditorCodeChanged:n}){var u;let{code:p,updateCode:m}=(0,o.Pe)(),{sandpack:f}=(0,o.ny)(),x=function(){let[e,t]=(0,i.useState)(null),r=(0,i.useRef)(!0),a=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let e=d.wG.__getMonacoInstance();if(e)return void t(e);if(!a.current){d.wG.config({"vs/nls":{availableLanguages:{}}});try{a.current=d.wG.init(),a.current.then(e=>{r.current&&t(e)}).catch(e=>{r.current&&"cancelation"!==e.type&&console.error("Monaco initialization error:",e)})}catch(e){console.error("Failed to initialize Monaco:",e)}}return()=>{r.current=!1}},[]),e}(),g=(u=f.activeFile,(0,i.useMemo)(()=>{let e,t;return"js"===(t=(e=u.split("."))[e.length-1])?"javascript":"ts"===t?"typescript":"vert"===t||"frag"===t?"glsl":t},[u])),{colorMode:h}=(0,l.G)();return((e,t="latest")=>{(0,i.useEffect)(()=>{let r=async e=>{let r=await s(t),a=`declare module 'pixi.js' { ${r} }`,i=`
2            declare module '*.wgsl' {
3                const shader: 'string';
4                export default shader;
5            }
6
7            declare module '*.vert' {
8                const shader: 'string';
9                export default shader;
10            }
11
12            declare module '*.frag' {
13                const shader: 'string';
14                export default shader;
15            }`;e.languages.typescript.typescriptDefaults.addExtraLib(a,"file:///node_modules/pixi.js/index.d.ts"),e.languages.typescript.javascriptDefaults.addExtraLib(a,"file:///node_modules/pixi.js/index.d.ts"),e.languages.typescript.typescriptDefaults.addExtraLib(i),e.languages.typescript.javascriptDefaults.addExtraLib(i),function(e){let{languages:t}=e,r="glsl";t.register({id:r,extensions:[".frag",".vert"]}),t.setLanguageConfiguration(r,{comments:{lineComment:"//",blockComment:["/*","*/"]},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"',notIn:["string"]},{open:"'",close:"'",notIn:["string"]}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}]}),t.setMonarchTokensProvider(r,{tokenPostfix:".glsl",defaultToken:"invalid",directives:["#","#define","#undef","#if","#ifdef","#ifndef","#else","#elif","#endif","#error","#pragma","#extension","#version","#line"],macros:["__L

15INE__","__FILE__","__VERSION__"],storage:["in","out","uniform","layout","attribute","varying","precision","highp","mediump","lowp"],types:["void","bool","int","uint","float","double","vec2","vec3","vec4","ivec2","ivec3","ivec4","bvec2","bvec3","bvec4","uvec2","uvec3","uvec4","dvec2","dvec3","dvec4","mat2","mat3","mat4","mat2x2","mat2x3","mat2x4","mat3x2","mat3x3","mat3x4","mat4x2","mat4x3","mat4x4","dmat2","dmat3","dmat4","dmat2x2","dmat2x3","dmat2x4","dmat3x2","dmat3x3","dmat3x4","dmat4x2","dmat4x3","dmat4x4","sampler1D","texture1D","image1D","sampler1DShadow","sampler1DArray","texture1DArray","image1DArray","sampler1DArrayShadow","sampler2D","texture2D","image2D","sampler2DShadow","sampler2DArray","texture2DArray","image2DArray","sampler2DArrayShadow","sampler2DMS","texture2DMS","image2DMS","sampler2DMSArray","texture2DMSArray","image2DMSArray","sampler2DRect","texture2DRect","image2DRect","sampler2DRectShadow","sampler3D","texture3D","image3D","samplerCube","textureCube","imageCube","samplerCubeShadow","samplerCubeArray","textureCubeArray","imageCubeArray","samplerCubeArrayShadow","samplerBuffer","textureBuffer","imageBuffer","subpassInput","subpassInputMS","isampler1D","itexture1D","iimage1D","isampler1DArray","itexture1DArray","iimage1DArray","isampler2D","itexture2D","iimage2D","isampler2DArray","itexture2DArray","iimage2DArray","isampler2DMS","itexture2DMS","iimage2DMS","isampler2DMSArray","itexture2DMSArray","iimage2DMSArray","isampler2DRect","itexture2DRect","iimage2DRect","isampler3D","itexture3D","iimage3D","isamplerCube","itextureCube","iimageCube","isamplerCubeArray","itextureCubeArray","iimageCubeArray","isamplerBuffer","itextureBuffer","iimageBuffer","isubpassInput","isubpassInputMS","usampler1D","utexture1D","uimage1D","usampler1DArray","utexture1DArray","uimage1DArray","usampler2D","utexture2D","uimage2D","usampler2DArray","utexture2DArray","uimage2DArray","usampler2DMS","utexture2DMS","uimage2DMS","usampler2DMSArray","utexture2DMSArray","uimage2DMSArray","usampler2DRect","utexture2DRect","uimage2DRect","usampler3D","utexture3D","uimage3D","usamplerCube","utextureCube","uimageCube","usamplerCubeArray","utextureCubeArray","uimageCubeArray","usamplerBuffer","utextureBuffer","uimageBuffer","atomic_uint","usubpassInput","usubpassInputMS","sampler","samplerShadow"],operators:["*","+","-","/","~","!","%","<<",">>","<",">","<=",">=","==","!=","&","^","|","&&","^^","||","=","+=","-=","*=","/=","%=","<<=",">>=","&=","^=","|="],builtin_vars:["gl_VertexID","gl_InstanceID","gl_VertexIndex","gl_InstanceIndex","gl_DrawID","gl_BaseVertex","gl_BaseInstance","gl_Position","gl_PointSize","gl_ClipDistance","gl_CullDistance","gl_Color","gl_SecondaryColor","gl_Normal","gl_Vertex","gl_MultiTexCoord0","gl_MultiTexCoord1","gl_MultiTexCoord2","gl_MultiTexCoord3","gl_MultiTexCoord4","gl_MultiTexCoord5","gl_MultiTexCoord6","gl_MultiTexCoord7","gl_FogCoord"],constants:["gl_MaxVertexAttribs","gl_MaxVertexUniformVectors","gl_MaxVertexUniformComponents","gl_MaxVertexOutputComponents"],intsuffix:"[uU]?",floatsuffix:"([fF]|(fl|FL))?",tokenizer:{root:[[/\/\/.*$/,"comment.line"],[/\/\*/,"comment.block","@comment"],[/#[a-z]*/,{cases:{"@directives":"keyword.control.preprocessor","@default":"invalid"}}],["GL_ES","meta.preprocessor"],[/__[A-Z_]+__/,{cases:{"@macros":"meta.preprocessor","@default":"invalid"}}],[/[{}()\[\]]/,"@brackets"],[/(true|false)/,"constant"],[/[\=\+\-\*\/\>\<\&\|\%\!\^]+/,{cases:{"@operators":"operator","@default":"invalid"}}],[/[a-zA-Z][a-zA-Z0-9_]*(?=\()/,"entity.name.function"],[/[a-zA-Z][a-zA-Z0-9_]*/,{cases:{"@storage":"storage.type","@types":"entity.name.type","@builtin_vars":"keyword","@default":"variable.name"}}],[/\d*\d+[eE]([\-+]?\d+)?(@floatsuffix)/,"number.float"],[/\d*\.\d+([eE][\-+]?\d+)?(@floatsuffix)/,"number.float"],[/0[xX][0-9a-fA-F](@intsuffix)/,"number.hex"],[/0[0-7](@intsuffix)/,"number.octal"],[/\d+(@intsuffix)/,"number"],[/[;,.]/,"delimiter"]],comment:[["\\*/","comment.block","@pop"],[".*","comment.block"]]}})}(e)};e&&r(e)},[e,t])})(x,r),(0,a.jsxs)(o.aN,{style:{height:"100%",margin:0,...t},children:[(0,a.jsx)(o.fQ,{}),(0,a.jsx)("div",{style:{flex:1,paddingTop:8,background:"dark"===h?"#1e1e1e":"#FFFFFE"},children:(0,a.jsx)(d.KE,{width:"100%",height:"100%",language:g,theme:"dark"===h?"vs-dark":"light",defaultValue:p,onChange:e=>{m(e||""),n?.(e)},options:{minimap:{enabled:!1},scrollBeyondLastLine:!1,wordWrap:"on",automaticLayout:!0,fontSize:e}},f.activeFile)})]})}let u=({onClick:e})=>(0,a.jsx)(o.Gb,{style:{position:"relative"},onClick:e,children:(0,a.jsx)(o.D0,{})}),p=({onSelectionChange:e,defaultSelection:t="both"})=>{let[r,n]=(0,i.useState)(t),{colorMode:s}=(0,l.G)(),o=t=>{n(t),e(t)},d={height:"100%",width:"max-content",padding:"0 16px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",color:"dark"===s?"#F6F8FA":"#2E3138",border:"none"},c="dark"===s?"#22232A":"#e2e2e2";return(0,a.jsxs)("div",{style:{height:32,width:"100%",overflow:"hidden",backgroundColor:"dark"===s?"#2E3138":"#F6F8FA",display:"flex",justifyContent:"right",borderBottomLeftRadius:4,borderBottomRightRadius:4},children:[(0,a.jsx)("button",{onClick:()=>o("editor"),style:{backgroundColor:"editor"===r?c:"transparent",...d},children:"Editor"}),(0,a.jsx)("button",{onClick:()=>o("preview"),style:{backgroundColor:"preview"===r?c:"transparent",...d},children:"Preview"}),(0,a.jsx)("button",{onClick:()=>o("both"),style:{backgroundColor:"both"===r?c:"transparent",...d},children:"Both"})]})};function m(e){let{viewType:t,showConsole:r,fontSize:n,pixiVersion:s}=e,[l,d]=(0,i.useState)(r),[m,f]=(0,i.useState)(t),x=(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(u,{onClick:()=>d(e=>!e)})});return(0,a.jsxs)("div",{style:{height:"100%",width:"100%",display:"flex",flexDirection:"column"},children:[(0,a.jsxs)(o.am,{style:{height:"100%",overflow:"hidden",borderBottomLeftRadius:0,borderBottomRightRadius:0,flexWrap:"nowrap"},children:[(0,a.jsx)(c,{fontSize:n,style:{flexGrow:+("preview"!==m),flexShrink:+("preview"!==m),flexBasis:"editor"===m?"100%":0,width:"100%",overflow:"hidden"},pixiVersion:s,handleEditorCodeChanged:e.handleEditorCodeChanged}),(0,a.jsxs)(o.aN,{style:{height:"100%",width:"100%"},children:[(0,a.jsx)(o.G5,{style:{flexGrow:100*("editor"!==m),flexShrink:100*("editor"!==m),flexBasis:"editor"!==m?"100%":0,overflow:"hidden"},showOpenInCodeSandbox:!1,actionsChildren:x}),l&&(0,a.jsx)("div",{style:{flexGrow:35*!!l,flexShrink:35*!!l,flexBasis:l?"35%":0,width:"100%",overflow:"hidden"},children:(0,a.jsx)(o.X2,{showHeader:!1})})]})]}),(0,a.jsx)(p,{onSelectionChange:e=>{f(e)},defaultSelection:m})]})}

15var f=r(59047),x=r(9526);function g({viewType:e="both",showConsole:t=!1,width:r="100%",height:s="100%",dependencies:d={"pixi.js":"latest"},files:c={"index.js":"// Your code here"},fontSize:u=12,handleEditorCodeChanged:p}){let{colorMode:h}=(0,l.G)(),y={...c};delete y["index.js"];let[b]=(0,i.useState)({"/index.html":{code:'<!doctype html>\n<html>\n  <head>\n    <title>PixiJS Playground</title>\n    <meta charset="UTF-8" />\n    <link rel="stylesheet" href="./styles.css" />\n  </head>\n  <body>\n    <script src="index.js"><\/script>\n  </body>\n</html>\n',hidden:!0},"/styles.css":{code:"body {\n  margin: 0;\n  overflow: hidden;\n}\n",hidden:!0},"sandbox.config.json":{code:'{"infiniteLoopProtection": false}',hidden:!0},"index.ts":{code:"",hidden:!0,active:!1},"index.js":{code:c["index.js"]??"// Your code here",hidden:!1,active:!0},...y});return(0,a.jsx)(x.A,{children:()=>(0,a.jsx)(o.l5,{template:"vanilla-ts",theme:"dark"===h?n:f.al,files:b,customSetup:{dependencies:d,entry:"index.html"},style:{height:s,width:r,margin:"0 auto",maxWidth:"100%"},options:{recompileDelay:500},children:(0,a.jsx)(m,{handleEditorCodeChanged:p,viewType:e,showConsole:t,fontSize:u,pixiVersion:d["pixi.js"]})})})}},80423(e,t,r){r.d(t,{m:()=>s});var a=r(74848),i=r(60714),n=r(78570);function s(e){return(0,n.zW)("example",!0),(0,a.jsx)(i.K,{height:"calc(100vh - 325px)",fontSize:14,...e})}},78570(e,t,r){r.d(t,{qn:()=>n,xi:()=>s,zW:()=>i});var a=r(96540);let i=(e,t=!0)=>{(0,a.useEffect)(()=>{let r=document.querySelector("main > .container");if(null!==r&&t)return r.classList.add(e),()=>{r.classList.remove(e)}},[e,t])},n=(e,t=!0)=>{(0,a.useEffect)(()=>{let r=document.querySelector(".container > .row");if(null!==r&&t)return r.classList.add(e),()=>{r.classList.remove(e)}},[e,t])},s=(e,t,r=!0)=>{(0,a.useEffect)(()=>{let a=document.querySelector(e);if(null!==a&&r)return a.classList.add(t),()=>{a.classList.remove(t)}},[e,t,r])}},28453(e,t,r){r.d(t,{R:()=>s,x:()=>o});var a=r(96540);let i={},n=a.createContext(i);function s(e){let t=a.useContext(n);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),a.createElement(n.Provider,{value:t},e.children)}},46146(e){e.exports=JSON.parse('{"versionLabel":"v7.x","version":"7.4.2","releaseNotes":"https://github.com/pixijs/pixijs/releases/tag/v7.4.2","build":"https://pixijs.download/v7.4.2/pixi.min.js","docs":"https://pixijs.download/v7.4.2/docs/index.html","npm":"7.4.2","prerelease":false,"latest":false}')}}]);