Jump to content

How to continually update the image src of a PIXI.Sprite(resources.image.texture) on scroll?


jtruax303
 Share

Recommended Posts

I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. 

Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you!

 

 

I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project.

Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like. 

HTML: 


<body>

<article class="image section">
  <img src="book1.png">
</article>
<article class="image section">
  <img src="book2.png">
</article>
<article class="image section">
  <img src="book3.png">
</article>
<article class="image section">
  <img src="book4.png">
</article>
<article class="image section">
  <img src="book5.png">
</article>
<article class="image section">
<img src="book1.png">
</article>
<article class="image section">
<img src="book2.png">
</article>
<article class="image section">
<img src="book3.png">
</article>
<article class="image section">
<img src="book4.png">
</article>
<article class="image section">
<img src="book5.png">
</article>
<article class="image section">
<img src="book1.png">
</article>
<article class="image section">
<img src="book2.png">
</article>
<article class="image section">
<img src="book3.png">
</article>
<article class="image section">
<img src="book4.png">
</article>
<article class="image section" section>
<img src="book5.png">
</article>

</main>



<section class="one">
</section>

JS:

const sectionTag = document.querySelector('section')
const articleTags = document.querySelectorAll('article')
const bodyTag = document.querySelector('body')
const pixels = window.pageYOffset
const pageHeight = bodyTag.getBoundingClientRect().height

let originalImage = null
let originalImageSource = null

sectionTag.innerHTML = ''

// Set up a pixi application
const app = new PIXI.Application({
  width: 2000,
  height: 2000,
  transparent: true
})

// Add the pixi application to the section tags
sectionTag.appendChild(app.view)

// Make image equall nothing
let image = null
let displacementImage = null
let displacementImage2 = null

// Make a new loader
const loader = new PIXI.loaders.Loader()

// Load in our image
loader.add('image', originalImageSource)
loader.add('displacement', 'displacement3.jpg')
loader.add('displacement2', 'displacement1.jpg')
loader.load((loader, resources) => {
  // Once the image has loaded, now do this
  image = new PIXI.Sprite(resources.image.texture)
  displacementImage = new PIXI.Sprite(resources.displacement.texture)
  displacementImage2 = new PIXI.Sprite(resources.displacement2.texture)

  image.width = 2000
  image.height = 2000
  image.interactive = true

  image.anchor.y = -0.1

  displacementImage.width = 1000
  displacementImage.height = 1000
  displacementImage2.width = 1000
  displacementImage2.height = 1000
  displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT
  displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT

  image.filters = [
    new PIXI.filters.DisplacementFilter(displacementImage, 200),
    new PIXI.filters.DisplacementFilter(displacementImage2, 50)
  ]
  
  // Add the image to the app
  app.stage.addChild(image)
  app.stage.addChild(displacementImage)
  app.stage.addChild(displacementImage2)

  // add rotation
  app.ticker.add(() => {
    displacementImage.x = displacementImage.x + 0.5
    displacementImage2.x = displacementImage2.x - 0.5
  })
})

articleTags.forEach(article => {
document.addEventListener("scroll", function () {
    if(article.offsetTop - 200 <= pixels){
      originalImage = article.querySelector("img")
      originalImageSource = originalImage.getAttribute("src")
    }
})
})

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...