JSFiddle - React, Tailwind, and code Playground

by ainop

JavaScript

function draw(ts) {
		var phase = 0;
		var count = 0;
		ctx.clearRect(0, 0, 300, 150);
    ctx.beginPath();
    count = 3000;
    phase = Mat.sin(count + timestamp / 1000) * 149 + 150;
}

		;; 
		(set_local $count (i32.const 3000))

		;; Mark loop start
		(loop $continue
			;; May the Forth be with you.
			;; (https://en.wikipedia.org/wiki/Forth_(programming_language)#Programmer.27s_perspective)

			(get_local $phase) ;; Restore $phase
			(f64.mul (f64.const 1.75)) ;; Multiply by 3/4 to get a nice Lissajous curve
			(f64.const 1.5707963267948966) ;; Pi/2. Wasm is a binary format, so there's no penalty for being too precise
			(f64.add)
			(call $sin) ;; Math.sin(). But since we've added Pi/2, it's actually a cos. Or -cos. Who cares if it looks good?
			(f64.mul (f64.const 74)) ;; This would be an Y coord. Scale by 74
			(f64.add (f64.const 75)) ;; Translate by 75

			;; Stack size here is 2: [f64] [f64]

			;; Call lineTo with two topmost stack values
			(call $lineTo)

			;; Subtract 30 from $count and place result on top of stack
			(i32.sub (get_local $count) (i32.const 30))
			;; Save new value to $count *and leave that value on top of stack*
			(tee_local $count)

			;; Branch ("goto") to the start of the loop if the topmost i32 value is not zero
			(br_if $continue)
		)

		;; Finally, stroke()
		(call $stroke)
	)
)