Jump to content
Search Community

SVG isometric cube (SSR style) problem

knalle 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

I need to be able to tween the size of a cube on all three axis (pseudo).

But when the properties overlap (as seen in the last part of the animation) it breaks. Of course :)

 

But what would be a better an more intuitive way of setting this up? Also, scaling "across" 0  (eg. sizeX(5) to sizeX(-5) ) is not working unless i use onUpdate or something and check for the value.

 

Ideally, I would like the size tweening working as great as regular 3d scale (X, Y, Z) and the isometric pseudo-3d position of the cube be working like x,y,z.  

See the Pen KKKwJWN by knalle (@knalle) on CodePen

Link to comment
Share on other sites

23 minutes ago, knalle said:

Is the ticker the right approach if i have 5-10 cubes animating?

Well, you didn't mention that ;) 

 

It should be able to be done that way without a noticeable performance impact but it may not be the optimal way. Why are you using pseudo-3D as opposed to WebGL anyway? This sort of thing is easily done in WebGL. 

 

Maybe it'd help if you described your end goal more, as your code is a little murky to figure out exactly what you're trying to do.

Link to comment
Share on other sites

You are right, Zach. I could describe it a bit better ?

The webGL would outperform this approach I am sure. But I will need this code for display banners primarily. So take up only few kb is a requirement. Perhaps I’ll be animating only 3-5 cubes. So it will probably perform ok. 

Link to comment
Share on other sites

What is SSR?

 

I would just animate the points of some polygons for this. Some info about isometric and how diametric is easier to work with.

 

 

 

See how this demo works. It's moving tiles, but instead of moving tiles, it could be moving points of a polygon.

 

See the Pen QGGreb by osublake (@osublake) on CodePen

 

 

I might make a demo later tonight. I like isometric type questions. 

 

  • Like 1
Link to comment
Share on other sites

2 minutes ago, OSUblake said:

I would just animate the points of some polygons for this.

 

Super simple.

 

var svg = document.querySelector("#svg");
var polygon = document.querySelector("#polygon");

// Create and add points to the polygon
var point1 = polygon.points.appendItem(svg.createSVGPoint());
var point2 = polygon.points.appendItem(svg.createSVGPoint());
var point3 = polygon.points.appendItem(svg.createSVGPoint());
var point4 = polygon.points.appendItem(svg.createSVGPoint());

// Now animate it. That's it!
var tl = new TimelineMax()
  .to(point1, 1, { x: 50, y: 10 }, 0)
  .to(point2, 1, { x: 90, y: 90 }, 0.5)
  .to(point3, 1, { x: 10, y: 90 }, 1)
  .to(point4, 1, { x: 20, y: 30 }, 1.5)

 

See the Pen 257de52aaa703757eec0fe9b92292c1a by osublake (@osublake) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

8 hours ago, OSUblake said:

What is SSR?

 

I would just animate the points of some polygons for this. Some info about isometric and how diametric is easier to work with.

 

 

 

See how this demo works. It's moving tiles, but instead of moving tiles, it could be moving points of a polygon.

 

 

 

 

 

I might make a demo later tonight. I like isometric type questions. 

 

SSR = Scale, Skew, Rotate (https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058)
I just thought it would be easier to wrap my head around the translations of a square that has been transformed than moving the points on an angle. but performance is probably better in your without the transformations in SSR approach (?)

  • Like 1
Link to comment
Share on other sites

2 hours ago, knalle said:

 

Very interesting tutorial!

 

2 hours ago, knalle said:

I just thought it would be easier to wrap my head around the translations of a square that has been transformed than moving the points on an angle. but performance is probably better in your without the transformations in SSR approach (?)

 

It's hard to say, but I'd guess they'd be about the same since SVG transforms aren't hardware accelerated in most browsers.

 

Here's what I came up with. You can control the start and end points for the x, y, and z axis. It's not true isometric, so the z axis might look a little squished if it's set to 1. 

 

See the Pen JjjdJGz by osublake (@osublake) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

5 hours ago, OSUblake said:

 

Very interesting tutorial!

 

 

It's hard to say, but I'd guess they'd be about the same since SVG transforms aren't hardware accelerated in most browsers.

 

Here's what I came up with. You can control the start and end points for the x, y, and z axis. It's not true isometric, so the z axis might look a little squished if it's set to 1. 

 

 

 

 

 

Great example - why is it squished at 1? also it clips a bit when z is 0.

By the way, those coding math videos are excellent. Easy to follow :) 

Link to comment
Share on other sites

1 hour ago, knalle said:

Great example - why is it squished at 1?

 

Because the angle isn't as steep as it is in true isometric, 116.565 degrees vs 120 degrees. That video talks about the difference starting at around 1:30.

 

1 hour ago, knalle said:

also it clips a bit when z is 0.

 

A quick fork that allows you adjust the values. I'm not sure I'm not seeing that when I set z1 and z2 to the same value. Do you mean that it should be hidden when z is 0? And what browser are you seeing that in?

 

See the Pen 44a86e5c54ec6d6ad0c85cfe50f4fcf2 by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

42 minutes ago, knalle said:

I have made a isometric (not dimetric) pen based on your pen.  I hope the math is right :)

 

Hey, that looks good! ?

 

I was actually going to make another version that was true isometric, but you beat me to it. Although, I was going to try a different approach. Instead of messing around with trig, I was going to use vectors, kind of like here.

 

 

But what have should be fine, so I probably wouldn't worry about. 

 

  • Like 1
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...