Add shadows to bezier curve

thetarnav · May 10, 2024 · 8795e75 · 8795e75
1 parent 24a04a5
commit 8795e75
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 63 deletions.
diff --git a/example/bezier_curve.odin b/example/bezier_curve.odin
@@ -44,10 +44,14 @@ frame_bezier_curve :: proc(s: ^State_Bezier_Curve, delta: f32) {
 	// update t
 	s.t = math.mod(s.t + delta * 0.0008, 1.0)
 
+	ctx.resetTransform()
+	ctx.clearRect(0, 0, canvas_size.x * dpr, canvas_size.y * dpr)
+	ctx.translate(vec2(canvas_size * dpr / 2))
+	ctx.lineWidth(2)
 
 	px_points: [4]vec2
 	for p, i in s.points {
-		px_points[i] = to_px(p)
+		px_points[i] = to_px(p - 0.5)
 	}
 	p1 := px_points[0]
 	p2 := px_points[1]
@@ -63,67 +67,79 @@ frame_bezier_curve :: proc(s: ^State_Bezier_Curve, delta: f32) {
 
 	tp := glm.lerp(r1, r2, s.t)
 
-	ctx.clearRect(0, 0, canvas_size.x, canvas_size.y)
-	ctx.lineWidth(2)
-
-	ctx.strokeStyle(GRAY)
-	for p, i in px_points[1:] {
+	SHADOWS :: 8
+	for shadow in f32(0)..<SHADOWS {
+		ctx.globalAlpha(1.0 - shadow/SHADOWS)
+
+		defer {
+			m: mat3 = 1
+			m *= mat3_translate(p4 - p1)
+			m *= mat3_translate((p1 - p3)/2)
+			m *= mat3_rotate(-PI/3)
+			m *= mat3_scale(0.8)
+			m *= mat3_translate((p3 - p1)/2)
+			ctx.transform(m)
+		}
+
+		ctx.strokeStyle(GRAY)
+		for p, i in px_points[1:] {
+			ctx.beginPath()
+			ctx.moveTo(p)
+			ctx.lineTo(px_points[i])
+			ctx.stroke()
+		}
+
+		ctx.strokeStyle(BLUE)
 		ctx.beginPath()
-		ctx.moveTo(p)
-		ctx.lineTo(px_points[i])
+		ctx.moveTo(q1)
+		ctx.lineTo(q2)
+		ctx.lineTo(q3)
 		ctx.stroke()
-	}
-
-	ctx.strokeStyle(BLUE)
-	ctx.beginPath()
-	ctx.moveTo(q1)
-	ctx.lineTo(q2)
-	ctx.lineTo(q3)
-	ctx.stroke()
-
-	ctx.strokeStyle(GREEN)
-	ctx.beginPath()
-	ctx.moveTo(r1)
-	ctx.lineTo(r2)
-	ctx.stroke()
-
-	ctx.strokeStyle(RED)
-	ctx.beginPath()
-	ctx.moveTo(p1)
-	ctx.bezierCurveTo(p2, p3, p4)
-	ctx.stroke()
-
-	ctx.fillStyle(GRAY)
-	ctx.strokeStyle(WHITE)
-	for p in px_points {
+
+		ctx.strokeStyle(GREEN)
 		ctx.beginPath()
-		ctx.arc(p, 6, 0, TAU)
-		ctx.fill()
+		ctx.moveTo(r1)
+		ctx.lineTo(r2)
 		ctx.stroke()
-	}
-
-	ctx.fillStyle(BLUE)
-	ctx.strokeStyle(TRANSPARENT)
-	for p in ([]vec2{q1, q2, q3}) {
+
+		ctx.strokeStyle(RED)
 		ctx.beginPath()
-		ctx.arc(p, 6, 0, TAU)
-		ctx.fill()
+		ctx.moveTo(p1)
+		ctx.bezierCurveTo(p2, p3, p4)
 		ctx.stroke()
-	}
-
-	ctx.fillStyle(GREEN)
-	ctx.strokeStyle(TRANSPARENT)
-	for p in ([]vec2{r1, r2}) {
-		ctx.beginPath()
-		ctx.arc(p, 6, 0, TAU)
+
+		ctx.fillStyle(GRAY)
+		ctx.strokeStyle(WHITE)
+		for p in px_points {
+			ctx.beginPath()
+			ctx.arc(p, 6, 0, TAU)
+			ctx.fill()
+			ctx.stroke()
+		}
+
+		ctx.fillStyle(BLUE)
+		ctx.strokeStyle(TRANSPARENT)
+		for p in ([]vec2{q1, q2, q3}) {
+			ctx.beginPath()
+			ctx.arc(p, 6, 0, TAU)
+			ctx.fill()
+			ctx.stroke()
+		}
+
+		ctx.fillStyle(GREEN)
+		ctx.strokeStyle(TRANSPARENT)
+		for p in ([]vec2{r1, r2}) {
+			ctx.beginPath()
+			ctx.arc(p, 6, 0, TAU)
+			ctx.fill()
+			ctx.stroke()
+		}
+
+		ctx.fillStyle(RED)
+		ctx.strokeStyle(TRANSPARENT)
+		ctx.beginPath()	
+		ctx.arc(tp, 8, 0, TAU)
 		ctx.fill()
 		ctx.stroke()
 	}
-
-	ctx.fillStyle(RED)
-	ctx.strokeStyle(TRANSPARENT)
-	ctx.beginPath()	
-	ctx.arc(tp, 6, 0, TAU)
-	ctx.fill()
-	ctx.stroke()
 }
diff --git a/example/rectangle.odin b/example/rectangle.odin
@@ -58,11 +58,11 @@ frame_rectangle :: proc(s: ^State_Rectangle, delta: f32) {
 	s.rotation -= 0.01 * delta * mouse_rel.x
 
 	mat: mat3 = 1
-	mat *= mat3_projection(canvas_size)
-	mat *= mat3_translate(mouse_pos - canvas_pos)
+	mat *= mat3_projection(vec2(canvas_size))
+	mat *= mat3_translate(vec2(mouse_pos - canvas_pos))
 	mat *= mat3_scale(scale*2 + 0.4)
 	mat *= mat3_rotate(s.rotation)
-	mat *= mat3_translate(-box_size / 2)
+	mat *= mat3_translate(vec2(-box_size / 2))
 
 	uniform(s.u_matrix, mat)
 

diff --git a/example/utils.odin b/example/utils.odin
@@ -417,15 +417,15 @@ rand_colors_gray :: proc(colors: []u8vec4, r: ^rand.Rand = nil) {
 }
 
 @(require_results)
-mat3_translate :: proc "contextless" (v: [2]f32) -> mat3 {
+mat3_translate :: proc "contextless" (v: vec2) -> mat3 {
 	return {
 		1, 0, v.x,
 		0, 1, v.y,
 		0, 0, 1,
    	}
 }
 @(require_results)
-mat3_scale :: proc "contextless" (v: [2]f32) -> mat3 {
+mat3_scale :: proc "contextless" (v: vec2) -> mat3 {
 	return {
 		v.x, 0,   0,
 		0,   v.y, 0,
@@ -443,7 +443,7 @@ mat3_rotate :: proc "contextless" (angle: f32) -> mat3 {
 	}
 }
 @(require_results)
-mat3_projection :: proc "contextless" (size: [2]f32) -> mat3 {
+mat3_projection :: proc "contextless" (size: vec2) -> mat3 {
 	return {
 		2/size.x, 0,       -1,
 		0,       -2/size.y, 1,

diff --git a/wasm/ctx2d/ctx2d.odin b/wasm/ctx2d/ctx2d.odin
@@ -186,6 +186,16 @@ strokeStyle :: proc (color: rgba) {
 	strokeStyleString(rgba_to_string(buf[:], color))
 }
 
+// ------------------------------ /
+//            FILTERS             /
+// ------------------------------ /
+
+@(default_calling_convention="contextless")
+foreign ctx2d {
+	// Sets the filter to apply to the canvas.
+	filter :: proc (filter: string) ---
+}
+
 // ------------------------------ /
 //              PATH              /
 // ------------------------------ /
@@ -444,8 +454,18 @@ foreign ctx2d {
 	@(link_name="transform")
 	_transform     :: proc (a, b, c, d, e, f: f32) ---
 	rotate         :: proc (angle: f32)            ---
-	scale          :: proc (x, y: f32)             ---
-	translate      :: proc (x, y: f32)             ---
+	@(link_name="scale")
+	scaleXY        :: proc (x, y: f32)             ---
+	@(link_name="translate")
+	translateXY    :: proc (x, y: f32)             ---
+}
+
+scale :: proc (v: glm.vec2) {
+	scaleXY(v.x, v.y)
+}
+
+translate :: proc (v: glm.vec2) {
+	translateXY(v.x, v.y)
 }
 
 getTransform :: proc () -> (m: Transform) {