OSUblake last won the day on July 17

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,612
  • Joined

  • Last visited

  • Days Won

    351

Everything posted by OSUblake

  1. OSUblake

    Safari/Firefox/CPU jitters

    Those might be guesses about how far to animate the background, which I wouldn't recommend. That is, don't guess the distance, and don't animate the background position. Animate the position using transforms i.e. x and y. Perhaps a related issue about animating clouds. Keep in mind that HTML was not designed to handle a ton of animations. Judging by some of the keywords you use like clouds, sea, ship, alps, flame, a canavs/WebGL solution might be better. You might want to check out PixiJS. http://pixijs.io/examples/#/basics/basic.js http://pixijs.io/pixi-filters/tools/demo/ https://greensock.com/docs/Plugins/PixiPlugin
  2. OSUblake

    Whatsup Guys?

    Poor Jack, he is like the lonely repairman from Maytag.
  3. OSUblake

    Banners taking all CPU from games site

    Tank ads? Running multiple WebGL contexts could be the problem. That's assuming Phaser is also using WebGL.
  4. OSUblake

    Randomize value onUpdate.

    I like to animate x and y separately for random movement. Another approach is a Lissajous curve.
  5. OSUblake

    I've made it to 2,000 posts!!

    Nice demo!!! I was working on a SVG module for PixiJS. Resolution independence!
  6. Related to @Carl suggestion. You could also make use of an event emitter.
  7. OSUblake

    Scrollmagic parallax + sidebar navigation

    Sorry about causing any alarms, but I was having serious problems. Updating Windows to version 1803 seems to have fixed the problem in case anybody else is having problems.
  8. OSUblake

    Scrollmagic parallax + sidebar navigation

    Has anyone else noticed performance issues with these browsers? Scrolling and changing tabs has been really slow for me, and I've been going insane the past couple of weeks trying to figure out the problem.
  9. OSUblake

    Directional rotations do not work with PIXI plugins

    Directional rotation is not built into the plugin. Maybe @GreenSock can add it. You'll have to use it at as separate plugin. tl.to(rectangle, 4, { pixi: { ... }, directionalRotation: { rotation: degToRad(90) + "_cw", useRadians: true } }, 1)
  10. OSUblake

    Swap 2 or more SVG elements

    If you need help, post a demo instead of code. It's hard to understand what's going on without one. That's why I'm going to have to take a guess on this one. If something goes crazy when you change tabs and come back, it's probably because you're using setTimeout or setInterval. And I don't know if you should really be using xOrigin and yOrigin like that. Those are used for internal calculations done by GSAP, so they might not be what you expect. For SVG positioning, look at this thread.
  11. OSUblake

    Creating a 'plastic pillow' dimple effect

    Hi @ScottJenson There's really no spec for this. The filters in Pixi are shaders, little programs that run on the GPU. The displacement filter is a fragment shader, which runs every pixel through a function to get it's color. That's what gl_FragColor returns. To learn more about shaders, The Book of Shaders is a good place to start. varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; uniform sampler2D uSampler; uniform sampler2D mapSampler; uniform vec4 filterArea; uniform vec4 filterClamp; void main(void) { vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale / filterArea.xy; gl_FragColor = texture2D(uSampler, clamp(vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y), filterClamp.xy, filterClamp.zw)); } The colors used in the displacement map aren't too important. What matters are the channels in the color. In an image, each pixel is an rgba value. In the displacement map, each pixel represents an xy value. A 2D vector. // color channels from 0-255 var color = { r: 100, g: 200, b: 0, a: 255 }; // convert to values from -0.5 to 0.5 var map = { x: (color.r / 255) - 0.5, y: (color.g / 255) - 0.5 }; So the red and green channel are what matters. The red channel is the x displacement, and the green channel is the y displacement. The displacement values will be from -0.5 to 0.5. If the channel is 0, the displacement value will be -0.5. If the channel is 128, the displacement will be 0. If the channel is 255, the displacement value will be 0.5. The filter uses the coordinates of the texture pixel being processed and offsets it by the corresponding displacement and scale value in the map, and returns the color of the texture at those coordinates. So if the red and green channel are both 128, it's going to return the same pixel. It's neutral. If the red channel is less than 128, it's going to return a pixel to the left of it. If the green channel is less than 128, it's going to return a pixel above it. This displacement map will work almost like the one you posted. The gray background has an rgb value of 128, 128, 128. The brownish background in the image you posted has an rgb value of 128, 128, 0. The red and green channels are what matters, so no displacement happens in those areas. Here are some terms worth knowing as they are kind of related. Displacement mapping - https://en.wikipedia.org/wiki/Displacement_mapping Heightmap - https://en.wikipedia.org/wiki/Heightmap Normal mapping - https://en.wikipedia.org/wiki/Normal_mapping A normal map is used for lighting, but it's similar to a displacement map. http://www.falloutsoftware.com/tutorials/gl/normal-map.html https://cpetry.github.io/NormalMap-Online/ This tutorial shows the relationship between a normal map and a displacement map. http://zarria.net/nrmphoto/nrmphoto.html And here's a demo I made for some fabric. You can drag the letter. The displacement map is black and white.
  12. OSUblake

    How to toggle tweens in a DRY fashion

    I've read a lot of articles on why ES6 classes are bad, and I can summarize every single one of them. Classes are bad, classical inheritance is bad, functional programming is good. It's all opinions. I'm not saying there's no merit to their claims, but there are no technical reasons for why classes are bad. But here's the thing about classes, what they do isn't new. It's mostly just syntactic sugar for constructor functions. https://hacks.mozilla.org/2015/07/es6-in-depth-classes/ I personally use classes all the time. The biggest argument against using classes is one of the reasons why I like using them, classical inheritance, creating a class from another class. The people that wrote those articles would consider my CustomSprite class bad, but they would be OK with my CustomElement class. They're essentially doing the same thing. See how to create a custom element. You need to use a class. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements // Inherits from PIXI.Sprite class CustomSprite extends PIXI.Sprite { constructor() { super(); } customMethod() { } } // Inherits from HTMLElement class CustomElement extends HTMLElement { constructor() { super(); } customMethod() { } }
  13. OSUblake

    code hinting for GSAP products

    Did you not look at my last post? Look at those links. Everything has changed since I wrote this back in 2016. The error is probably because you're importing gsap. If you're not actually importing GSAP, then comment out that line, or try putting it in another file.
  14. OSUblake

    translating CSS cubic-bezier easing to GSAP

    Well, it doesn't matter anymore. You can do this now with the CustomEase. https://greensock.com/docs/Easing/CustomEase
  15. OSUblake

    Minor problem only in chrome

    https://mackay2588.github.io/ https://github.com/mackay2588/mackay2588.github.io Minor problem only in Chrome? Edge is using over 40% of a GPU just sitting there, and that is on a gaming PC. You simply have too many animations going on, and animating "left" instead of "x" only makes it worse.
  16. OSUblake

    How to toggle tweens in a DRY fashion

    Gotcha. I wasn't sure if you wanted to target single and multiple elements, so that's why I brought up the event emitter. It's a great way to keep things decoupled. That's actually how reactive libraries like React, Vue, Angular and RxJS work, although they call it a observer/observable. A silly event emitter demo I made for another thread. 45 different input ranges are being driven by animating a simple object.
  17. OSUblake

    Can't use ThrowProps in Webpack

    @gogo125 There's plenty of examples. I know because I made them. Webpackbin merged with CodeSandbox, so all those demos are gone, but if somebody asks, I can make another version. Another thing that might make searching harder, don't use a version number. It's Angular. Also, you can add scripts to the .angular.cli.json file instead of importing. https://github.com/angular/angular-cli/wiki/stories-global-scripts "scripts": [ "assets/gsap/TweenMax.js", "assets/gsap/plugins/DrawSVGPlugin.js" ]
  18. OSUblake

    Force onDrag to Fire

    I don't know anything about Appium, but from a quick search can't you do a TouchAction moveTo? https://github.com/appium/appium/blob/62700d3b1dc0edd985502cc1279747a782f3ee74/docs/en/writing-running-appium/touch-actions.md https://github.com/appium/appium/issues/10178
  19. OSUblake

    Moving Clouds

    How wide are your clouds? How wide is the stage? Why is 0 such an awesome number? If a cloud is 200, the stage is 1000, and that cloud is positioned at 0. var tl = new TimelineMax({ repeat: -1 }) .set(cloud, { x: -200 }) .to(cloud, 10, { x: 1000 }) .progress(Math.random()) Here's a hint. Your SVG is 2645.22 wide. <svg viewBox="0 0 2645.22 1529.55"></svg> Now move your clouds to 0, and head on over to this thread.
  20. OSUblake

    How to toggle tweens in a DRY fashion

    The only thing I would have done differently is to handle the click inside the createAnimation function. const createAnimation = (element) => { let tween = TweenLite.to(element, 1, { width: 400, backgroundColor: "#673AB7", borderRadius: 0, ease: Elastic.easeOut }).reverse(); element.addEventListener("click", () => tween.reversed(!tween.reversed())); }
  21. OSUblake

    How to toggle tweens in a DRY fashion

    I'd just let each element handle the click individually instead of looping through the entire set. And who needs loops when you can when you can emit events. I do that a lot in games.
  22. OSUblake

    stop the scroll

    Yes, that's a problem because the element is fixed. https://developers.google.com/web/updates/2016/12/url-bar-resizing But the gap is at the top because the scroller moves in the opposite direction. Not sure how to fix at the moment. There might be a solution somewhere in here. https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome
  23. OSUblake

    Way to inflating SVG Rect

    Or use the ModifiersPlugin...
  24. It depends. Every browser handles rendering a little different, but a retina display can put a lot of strain on the browser during an animation, especially if you're using high DPI images or SVG. Setting display to none probably freed up a lot resources.
  25. OSUblake

    Loops, arrays, and delays. oh - my

    Using a callback...