Jump to content
Search Community

Is it possible to use GSAP to return XY cords from supplied array of points?

boy2k test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

i am trying to find a way of plotting extra steps between a set of points.

 

The issue is i am using a pixi / phaser 'rope' to draw a line across the screen like this.

 

rope2.png.95426f87ffbc56d133d1229c01b933

 

This is a mockup of how i want it to look. 

The problem is when i supply the 7 points it gets stretched too far and distorts like this.

rope.png.609cd11d651078dc419b439f9255192

 

 

The problem can be solved by incorporating more points into the path. My problem is i can only find Smoothing scripts which make it loose the edges.

 

I really would like to keep the iniform shape but need a way to plot in extra points.

I wasn't sure if GSAP would be able to plot points between the 7 supplied points and keep the straightness? 
I could then use those points to draw the rope.

Any help would be great :)
 

Link to comment
Share on other sites

Hi OSUblake,

 

Thanks for the quick response. I don't need it to tile, i have a graphic which is the right size and works well when more points are introduced. I just want the linear paths without the curves.

 EaH3bd.jpg

It actually works a lot better without the black BG but i thought it easier to show this way.

EDIT: i mean idealy i would love to just draw a line in code and add a glow :) but i cant seem to do that :(

 

Link to comment
Share on other sites

I'm not sure I totally understand what you want. Can you make a demo?

 

You can draw lines on a regular canvas like this.

http://greensock.com/forums/topic/15253-bezier-data-through-onupdateparams/?p=66228

 

Or draw stuff like this animating a bunch of points. That's SVG, but it doesn't matter. Same concept. 

See the Pen 4b7d24a5c99772b218fd09658847766d?editors=0010 by osublake (@osublake) on CodePen

 

There's a bunch of ways to draw stuff with Pixi, but I can only guess at what you're trying to do. Make a demo, and I might be able to point you in the right direction, probably using a renderTexture.

  • Like 1
Link to comment
Share on other sites

Thanks for the info OSUblake, :) some great examples there!

I'm writing a slot machine and i need to draw the win lines.

If your not familiar with these games this is basically a line which passes though each of the winning reel items.
eg.
6NdoXa.jpg
 

The problem i have is that i need the line to be uniform (which can be done drawing shapes) but it needs to have quite an aggressive glow on the line which is what is causing me problems. 

 

As i showed above i can use a rope on a bitmap but it only really works when you add in alot of points. I have found a few smoothing functions which produce a very uniform line but they all smooth the line through the points. Ideally i need it to be straight as my example above.
 

Link to comment
Share on other sites

If you can draw it, then it seems like the glow could be done using a glow filter or alpha masking. 

 

What version of Pixi are you using? Glow filters are part of newer versions of Pixi, but you said you were using Phaser.  Here's a glow filter for v2 of Pixi. You might be able to get that working with Phaser.

 

See the Pen raKzrm by mishaa (@mishaa) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks for the example OSUblake,

I'm using phaser 2.6.2 (latest version) so i guess i will look into webGL filters.

I will also need to work out a fallback for canvas though as it needs to run on as many devices/ browsers as possible.

Plus everyone i have spoken to tells me not to rely on webGL :/

Link to comment
Share on other sites

Hmm interesting idea,

so you mean have an off screen canvas to render elements on. I will look into this thanks.

 

I would love to use just webGL but i know someone will find a device that it wont work on haha.

I will look into using it though for sure but i would need a fall back so thank you for the input its been very helpful :)

Link to comment
Share on other sites

Yep. I got the idea from this issue about drawing stuff using Paper.js.
https://github.com/pixijs/pixi.js/issues/2674
 
Drawing stuff with Pixi is limited because they want the api to work the same for canvas and WebGL, but it's hard drawing stuff in WebGL. Even a simple line is hard to do. So you can't do a lot of normal canvas drawing commands with Pixi.
http://www.goodboydigital.com/pixi-webgl-primitives/
 
And that's where the renderTexture comes in. It's a dynamic texture, and you can draw anything on it from a variety of different sources, incuding an offscreen canvas.
http://www.goodboydigital.com/the-pixi-js-rendertexture-arrives/
 
But of course the WebGL/filter approach is the easiest. I know you said you can't rely on WebGL, but caniuse shows support at 89%.
http://caniuse.com/#feat=webgl
 
If WebGL is only used for a filter, then they would still be able to see the line, there just wouldn't be a glow.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

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