[Journal] Making 'Stretcher' - bezier curve (Pixiv Fanbox)

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

┃ This journal is tech-related. Mainly consists of low-level maths, and testing stuff ┃

┃ If you're not interested in those things, this journal will be extremely boring ┃

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

I wanted to make living-suit H-scene for a long time, and I finally made one very recently. At the time when I was thinking about it, I had to come up with the corresponding monster design. And that monsters concept was like this.

The thing is, I didn't have skills to make it happen. there was so many things to do just for a single monster. Anti-alising, texture distortion, curves and conflicting artstyle between characters and map texture. I ended up make my mind to just make monster being simpler, and bland.

After I uploaded "???-N1 Hscene" post, I saw a comment that has a similar nuance with the given up idea. If there's a one who brought up similar idea even without talking to each other, wouldn't be that idea is the right way. That's why I made up my mind to challange what I've once gave up. After all, wouldn't that be a reason all the support for?

This is the plan(or key point) I was thinking at the time.

1) Make sure to monster texture blends to map well.

2) For curves, use bezier expression

3) Somehow handle the image distortion.

I started to tackle the bezier curve first.

So what is bezier curve? The most easiest and closest example would be the curve tool in Windows paint.

When given two 'end points' with several 'control points', we can calculate the curve using the bezier expression.

(I've took animation from the blog 「sigbus.info by Rui Ueyama」. Check the link if you're interested.)

And this scary looking expression is what we're looking for.

(it's scary for me at least.)

But it's less scary when it's solved into other form. as 't' is only variable that's malleable yet others decided, it should be solved based on 't'.

As equation is ready, we need to decide how would we position the points. as we won't manually set the point poisitions for every each time we need it, position setting should be done somewhat automatic. I've set variables to control end points and control points.

(I did wrote explanations for it, but as it was just words and words... I scraped it.)

By using it, we can have our own bezier curve generator.

By placing bezier curve side by side, we can fit our texture to the bezier curves.

But wait! there's obvious visible distortion, especially close to the each edges.

If we look at how polygon constructed, we can see where this problem comes from.

It happens becuase as the quad distorted by bezier curve, the area for each triangle becomes not even. The solution is very simple, chop it up more fine.

The more it's divided, the less distorted.

Now our texture looks good. Looks good only when it's at its original texture size.

if it shrinks(expends) or goes to diagnal direction, thing doesn't look so great.

To solve this problem, each parameters must be able to act seperately according to position change. that part will be post on the next journal.