Cheap Fake Cubic Easing Curve

easing.c

//
// Copyright (c) 2013 Mikko Mononen [email protected]
//
// This software is provided 'as-is', without any express or implied
// warranty.  In no event will the authors be held liable for any damages
// arising from the use of this software.
// Permission is granted to anyone to use this software for any purpose,
// including commercial applications, and to alter it and redistribute it
// freely, subject to the following restrictions:
// 1. The origin of this software must not be misrepresented; you must not
//    claim that you wrote the original software. If you use this software
//    in a product, an acknowledgment in the product documentation would be
//    appreciated but is not required.
// 2. Altered source versions must be plainly marked as such, and must not be
//    misrepresented as being the original software.
// 3. This notice may not be removed or altered from any source distribution.
//

#include <stdio.h>
#include <math.h>
#ifdef NANOVG_GLEW
#  include <GL/glew.h>
#endif
#define GLFW_INCLUDE_GLEXT
#include <GLFW/glfw3.h>
#include "nanovg.h"
#define NANOVG_GL2_IMPLEMENTATION
#include "nanovg_gl.h"
#include "demo.h"
#include "perf.h"


void errorcb(int error, const char* desc)
{
	printf("GLFW error %d: %s\n", error, desc);
}

int blowup = 0;
int screenshot = 0;
int premult = 0;

static void key(GLFWwindow* window, int key, int scancode, int action, int mods)
{
	NVG_NOTUSED(scancode);
	NVG_NOTUSED(mods);
	if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
		glfwSetWindowShouldClose(window, GL_TRUE);
	if (key == GLFW_KEY_SPACE && action == GLFW_PRESS)
		blowup = !blowup;
	if (key == GLFW_KEY_S && action == GLFW_PRESS)
		screenshot = 1;
	if (key == GLFW_KEY_P && action == GLFW_PRESS)
		premult = !premult;
}

float minf(float a, float b)
{
	return a < b ? a : b;
}

float maxf(float a, float b)
{
	return a < b ? b : a;
}

float clampf(float x, float bmin, float bmax)
{
	return minf(maxf(x, bmin), bmax);
}

int iszero(float x)
{
	return fabsf(x) < 1e-6f;
}

float sqrf(float x)
{
	return x*x;
}

float lerpf(float a, float b, float t)
{
	return a + (b-a)*t;
}


typedef struct Vec2 {
	float x;
	float y;
} Vec2;

float vdist(Vec2 a, Vec2 b)
{
	float dx = a.x - b.x;
	float dy = a.y - b.y;
	return sqrtf(dx*dx + dy*dy);
}

static Vec2 vsub(Vec2 a, Vec2 b)
{
	return (Vec2){ a.x - b.x, a.y - b.y };
}

static float vdot(Vec2 a, Vec2 b)
{
    return a.x*b.x + a.y*b.y;
}

static float vperp(Vec2 a, Vec2 b)
{
    return a.y*b.x - a.x*b.y;
}

static Vec2 vnorm(Vec2 a)
{
    float s = sqrtf(a.x*a.x + a.y*a.y);
    if (s > 1e-6f) s = 1.0f / s;
	return (Vec2){ a.x * s, a.y * s };
}

static Vec2 vlerp(Vec2 a, Vec2 b, float t)
{
	return (Vec2){ a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t };
}


void cubicToQuad(Vec2 qpts[5], Vec2 pts[4])
{
	// Hack.
    // When boost=1.5 the middle point follows the cubic curve quite nicely, but overshoots and bulges a lot.
    // When boost=1.0, the curve does not reach the cubic on extremes, but behaves really well.
    // The code below tries to balance the two. It does make the curve adjustment a little odd at times (compared to cubic).
    // If boost=1.0, no need to fix monotonicity below.
    Vec2 dir0 = vnorm(vsub(pts[0],pts[1]));
    Vec2 dir1 = vnorm(vsub(pts[3],pts[2]));
    float perpWeight = sqrf(fabsf(vperp(dir0, dir1)));      // boost when handles at 90° angle 
    float sameWeight = sqrf(maxf(0.0f, vdot(dir0, dir1)));  // boost when handles are towards same direction

	// Handle length biasing
	float da = sqrtf(vdist(pts[0], pts[1]));
	float db = sqrtf(vdist(pts[2], pts[3]));
	float ba = da / (da+db);
	float bb = db / (da+db);

    float lenWeight = sqrf(minf((da + db) * 0.5f, 1.0f));
    float boost = 1.0f + lenWeight * maxf(perpWeight, sameWeight) * 0.5f;

	// Set end points, and adjust cubic handles to work as quad handles.
	qpts[0] = pts[0];
	qpts[1] = vlerp(pts[0], pts[1], ba * boost);
	qpts[3] = vlerp(pts[3], pts[2], bb * boost);
	qpts[4] = pts[3];

	// Make sure the curve stays monotonic.
	float midx = clampf((qpts[1].x + qpts[3].x) * 0.5f, 0.0f, 1.0f);
	float dx, mdx;
	dx = qpts[1].x - qpts[0].x;
	mdx = midx - qpts[0].x;
	if (dx > mdx) {
		float s = mdx / dx;
		qpts[1] = vlerp(qpts[0], qpts[1], s);
	}

	dx = qpts[4].x - qpts[3].x;
	mdx = qpts[4].x - midx;
	if (dx > mdx) {
		float s = mdx / dx;
		qpts[3] = vlerp(qpts[4], qpts[3], s);
	}

	// Calculate shared end point of the quad segments.
	// Bias towards smaller handle (handle pushes towards smaller handle)
	float u = ba;
	qpts[2] = vlerp(qpts[1], qpts[3], u);
}

typedef struct QuadCoeffs {
	float ax, ay, by, bx, cx, cy, iax;
} QuadCoeffs;

QuadCoeffs quadCoeffs(Vec2 p0, Vec2 p1, Vec2 p2)
{
    QuadCoeffs q;
    // Make sure we always have valid quad
    if (iszero(p0.x - 2.0f * p1.x + p2.x))
        p1.x += 1e-6f;
	q.ax = p0.x - 2.0f * p1.x + p2.x;
    q.ay = p0.y - 2.0f * p1.y + p2.y,
    q.bx = -2.0f * (p0.x - p1.x);
	q.by = -2.0f * (p0.y - p1.y);
    q.cx = p0.x;
    q.cy = p0.y;
    q.iax = 1.0f / q.ax;

    return q;
}

float quadYforXC(float x, QuadCoeffs* q)
{
	float d = maxf(q->bx * q->bx - 4.0f * q->ax * (q->cx - x), 0.0f);
	float t = (-q->bx + sqrtf(d)) * q->iax * 0.5f;
	return (q->ay * t + q->by) * t + q->cy;
}

typedef struct Curve {
    QuadCoeffs qa;
    QuadCoeffs qb;
    float midx;
} Curve;

void prepareCurve(Curve* c, Vec2 pts[4])
{
    Vec2 qpts[5];
    cubicToQuad(qpts, pts);
    c->qa = quadCoeffs(qpts[0], qpts[1], qpts[2]);
    c->qb = quadCoeffs(qpts[2], qpts[3], qpts[4]);
    c->midx = qpts[2].x;
}

float evalCurve(float x, Curve* c)
{
    return quadYforXC(x, (x < c->midx) ? &c->qa : &c->qb);
}

void drawTick(NVGcontext* vg, float x, float y, float s)
{
    nvgMoveTo(vg, x-s, y-s);    
    nvgLineTo(vg, x+s, y+s);    
    nvgMoveTo(vg, x-s, y+s);    
    nvgLineTo(vg, x+s, y-s);    
}

int main()
{

	GLFWwindow* window;
	NVGcontext* vg = NULL;
	double prevt = 0;

	int sel = -1, hit = -1;

	float vx = 10; //150;
	float vy = 310; //410;
	float vw = 500;
	float vh = -300;

	Vec2 pts[4];
	const int npts = 4;
	for (int i = 0; i < npts; i++) {
		pts[i].x = (float)i / (float)(npts-1);
		pts[i].y = (float)i / (float)(npts-1);
	}

	Vec2 startPt, startM;

	if (!glfwInit()) {
		printf("Failed to init GLFW.");
		return -1;
	}

	glfwSetErrorCallback(errorcb);

	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 2);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 0);
#ifdef DEMO_MSAA
	glfwWindowHint(GLFW_SAMPLES, 4);
#endif

	window = glfwCreateWindow(1000, 600, "NanoVG", NULL, NULL);
	if (!window) {
		glfwTerminate();
		return -1;
	}

	glfwSetKeyCallback(window, key);

	glfwMakeContextCurrent(window);
#ifdef NANOVG_GLEW
    if(glewInit() != GLEW_OK) {
		printf("Could not init glew.\n");
		return -1;
	}
#endif

#ifdef DEMO_MSAA
	vg = nvgCreateGL2(NVG_STENCIL_STROKES | NVG_DEBUG);
#else
	vg = nvgCreateGL2(NVG_ANTIALIAS | NVG_STENCIL_STROKES | NVG_DEBUG);
#endif
	if (vg == NULL) {
		printf("Could not init nanovg.\n");
		return -1;
	}

	glfwSwapInterval(0);

	glfwSetTime(0);
	prevt = glfwGetTime();

	int prevMouse = 0;

	while (!glfwWindowShouldClose(window))
	{
		double mx, my, t, dt;
		int winWidth, winHeight;
		int fbWidth, fbHeight;
		float pxRatio;

		t = glfwGetTime();
		dt = t - prevt;
		prevt = t;

		glfwGetCursorPos(window, &mx, &my);
		glfwGetWindowSize(window, &winWidth, &winHeight);
		glfwGetFramebufferSize(window, &fbWidth, &fbHeight);

        Vec2 m = { mx, my};
		int mouse = glfwGetMouseButton(window, GLFW_MOUSE_BUTTON_LEFT);

		hit = -1;
		for (int i = 0; i < npts; i++)
		{
            Vec2 v = {vx + pts[i].x * vw, vy + pts[i].y * vh};
			if (vdist(m, v) < 6.0f)
				hit = i;
		}

		if (prevMouse == GLFW_RELEASE && mouse == GLFW_PRESS)
		{
			// Mouse down
			if (hit != -1)
			{
				sel = hit;
				startPt = pts[sel];
				startM = m;
			}
		}
		else if (prevMouse == GLFW_PRESS && mouse == GLFW_RELEASE)
		{
			// Mouse up
			sel = -1;
		}
		
		if (mouse == GLFW_PRESS)
		{
			// Drag
			if (sel != -1)
			{
				float dx = (m.x - startM.x) / vw;
				float dy = (m.y - startM.y) / vh;

				pts[sel].x = clampf(startPt.x + dx, 0.0f, 1.0f);
				pts[sel].y = clampf(startPt.y + dy, 0.0f, 1.0f);

				if (sel == 0)
					pts[sel].x = 0.0f;
				else if (sel == npts-1)
					pts[sel].x = 1.0f;

			}
		}

		prevMouse = mouse;

		// Calculate pixel ration for hi-dpi devices.
		pxRatio = (float)fbWidth / (float)winWidth;

		// Update and render
		glViewport(0, 0, fbWidth, fbHeight);
		if (premult)
			glClearColor(0,0,0,0);
		else
			glClearColor(0.3f, 0.3f, 0.32f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);

		nvgBeginFrame(vg, winWidth, winHeight, pxRatio);

		nvgBeginPath(vg);
		nvgRect(vg, vx, vy, vw, vh);
		nvgFillColor(vg, nvgRGBA(255,255,255,32));
		nvgFill(vg);

        // Real cubic bezier
		nvgBeginPath(vg);
		nvgMoveTo(vg, vx + pts[0].x * vw, vy + pts[0].y * vh);
		nvgBezierTo(vg, vx + pts[1].x * vw, vy + pts[1].y * vh, vx + pts[2].x * vw, vy + pts[2].y * vh, vx + pts[3].x * vw, vy + pts[3].y * vh);
		nvgStrokeWidth(vg, 5.0f);
		nvgStrokeColor(vg, nvgRGBA(0,0,0,64));
		nvgStroke(vg);

        // Approximated
		Vec2 qpts[5];
		cubicToQuad(qpts, pts);

		nvgBeginPath(vg);
		nvgMoveTo(vg, vx + qpts[0].x * vw, vy + qpts[0].y * vh);
		nvgQuadTo(vg, vx + qpts[1].x * vw, vy + qpts[1].y * vh, vx + qpts[2].x * vw, vy + qpts[2].y * vh);
		nvgQuadTo(vg, vx + qpts[3].x * vw, vy + qpts[3].y * vh, vx + qpts[4].x * vw, vy + qpts[4].y * vh);
		nvgStrokeWidth(vg, 5.0f);
		nvgStrokeColor(vg, nvgRGBA(255,64,0,128));
		nvgStroke(vg);

        // Approx points
		nvgBeginPath(vg);
		nvgMoveTo(vg, vx + qpts[0].x * vw, vy + qpts[0].y * vh);
		nvgLineTo(vg, vx + qpts[1].x * vw, vy + qpts[1].y * vh);
		nvgLineTo(vg, vx + qpts[2].x * vw, vy + qpts[2].y * vh);
		nvgLineTo(vg, vx + qpts[3].x * vw, vy + qpts[3].y * vh);
		nvgLineTo(vg, vx + qpts[4].x * vw, vy + qpts[4].y * vh);
		drawTick(vg, vx + qpts[1].x * vw, vy + qpts[1].y * vh, 4.0f);
		drawTick(vg, vx + qpts[2].x * vw, vy + qpts[2].y * vh, 4.0f);
		drawTick(vg, vx + qpts[3].x * vw, vy + qpts[3].y * vh, 4.0f);
		nvgStrokeWidth(vg, 1.0f);
		nvgStrokeColor(vg, nvgRGBA(0,0,0,64));
		nvgStroke(vg);

        // Handles
        nvgBeginPath(vg);
		nvgMoveTo(vg, vx + pts[0].x * vw, vy + pts[0].y * vh);
		nvgLineTo(vg, vx + pts[1].x * vw, vy + pts[1].y * vh);
		nvgMoveTo(vg, vx + pts[2].x * vw, vy + pts[2].y * vh);
		nvgLineTo(vg, vx + pts[3].x * vw, vy + pts[3].y * vh);
		nvgStrokeWidth(vg, 2.0f);
		nvgStrokeColor(vg, nvgRGBA(255,255,255,128));
		nvgStroke(vg);

        // Value at mouse pos
		float ft = clampf((m.x - vx) / vw, 0.0f, 1.0f);
		nvgBeginPath(vg);
		nvgMoveTo(vg, vx + ft * vw, vy);
		nvgLineTo(vg, vx + ft * vw, vy + vh);
		nvgStrokeWidth(vg, 2.0f);
		nvgStrokeColor(vg, nvgRGBA(255,192,0,64));
		nvgStroke(vg);

        // This could be precalculated.
        Curve c;
        prepareCurve(&c, pts);

        // Per item call
        float fy = evalCurve(ft, &c);

		nvgBeginPath(vg);
		nvgCircle(vg, vx + ft * vw, vy + fy * vh, 4.0f);
		nvgFillColor(vg, nvgRGBA(255,192,0,192));
		nvgFill(vg);

        // Cubic control points
		for (int i = 0; i < npts; i++)
		{
			nvgBeginPath(vg);
			nvgCircle(vg, vx + pts[i].x * vw, vy + pts[i].y * vh, 4.0f);
			if (sel == i)
				nvgFillColor(vg, nvgRGB(255,255,255));
			else if (hit == i)
				nvgFillColor(vg, nvgRGB(255,196,0));
			else
				nvgFillColor(vg, nvgRGB(192,192,192));
			nvgFill(vg);
		}

		nvgEndFrame(vg);
		
		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	nvgDeleteGL2(vg);

	glfwTerminate();
	return 0;
}