Canvas Animation / Render loop

[0pcom]

I'm trying to make a simple demonstration of animation using the canvas, as had previously been suggested.

However, it seems that what I want to do would require a render loop or perhaps setting something else. The documentation is lacking on this.

If it's possible to make an example of just alternating the color of a canvas over time, I can probably work with that.

but if I had some basic example ; such as this webgpu example but just using a canvas:

https://github.com/cogentcore/webgpu/tree/main/examples/cube

That would be even better. I don't need textures at this point.

What I aim to eventually do (among other things) is a canvas animation like this:

https://0magnet.github.io/wasm-stuff/
https://github.com/0magnet/wasm-stuff/blob/master/b.go

And I have an example here of an audio spectrogram display - implemented with 3 GUIs (gomobile, fyne, and wasm) and one TUI (tcell) - which I would really like to try to add an implementation that uses cogentcore:

https://github.com/0magnet/audioprism-go

[kkoreilly]

Here is a simple example of a canvas animation that I have added to the documentation in #1321:

t := 0
c := core.NewCanvas(b).SetDraw(func(pc *paint.Context) {
    pc.DrawCircle(0.5, 0.5, float32(t%60)/120)
    pc.FillStyle.Color = colors.Scheme.Success.Base
    pc.Fill()
})
go func() {
    for range time.Tick(time.Second/60) {
        c.NeedsRender()
        t++
    }
}()

That makes a circle with a changing size based on a time variable incremented in a render loop. If that example is not sufficient, I can definitely help you with the use cases you mentioned; they should absolutely be possible. I am improving the documentation for this in #1321 as mentioned above, and I will continue to work on the documentation.

[0pcom]

Fantastic.

cogentcore-globe-2024-12-30_17.06.09.mp4

Here's the code. Something like this in the canvas documentation / examples would be really eye catching.

package main

import (
	"math"
	"embed"
	"time"
	"cogentcore.org/core/base/mergefs"

	"cogentcore.org/core/core"
	"cogentcore.org/core/colors"
	"cogentcore.org/core/paint"
	"cogentcore.org/core/styles"

)

//go:embed mononoki/*.ttf
var mononoki embed.FS

//go:embed font-test.txt
var fontTest string

const (
	NumLatLines = 12 // Number of latitude lines
	NumLonLines = 24 // Number of longitude lines
	Radius      = 0.4
	CenterX     = 0.5
	CenterY     = 0.5
)

func main() {
	core.TheApp.SetSceneInit(func(sc *core.Scene) {
		sc.SetWidgetInit(func(w core.Widget) {
			w.AsWidget().Styler(func(s *styles.Style) {
				s.Font.Family = "mononoki"
				s.Text.LineHeight.Em(1)
				s.Text.WhiteSpace = styles.WhiteSpacePreWrap
			})
		})
	})

	b := core.NewBody()
	paint.FontLibrary.FontsFS = mergefs.Merge(paint.FontLibrary.FontsFS, mononoki)
	paint.FontLibrary.UpdateFontsAvail()
	core.NewText(b).SetText(fontTest)


	rotationX := 0.0
	rotationY := 0.0
	rotationZ := 0.0

	c := core.NewCanvas(b).SetDraw(func(pc *paint.Context) {
		sinX, cosX := math.Sin(rotationX), math.Cos(rotationX)
		sinY, cosY := math.Sin(rotationY), math.Cos(rotationY)
		sinZ, cosZ := math.Sin(rotationZ), math.Cos(rotationZ)

		projectPoint := func(x, y, z float64) (float32, float32) {
			ry := y*cosX - z*sinX
			rz := y*sinX + z*cosX

			rx := x*cosY + rz*sinY
			z = -x*sinY + rz*cosY

			x = rx*cosZ - ry*sinZ
			y = rx*sinZ + ry*cosZ

			screenX := CenterX + float32(x)
			screenY := CenterY + float32(y)
			return screenX, screenY
		}

		pc.StrokeStyle.Color = colors.Scheme.Primary.Base
		for lat := -math.Pi / 2; lat <= math.Pi/2; lat += math.Pi / float64(NumLatLines) {
			first := true
			var startX, startY float32
			for lon := 0.0; lon <= 2*math.Pi; lon += math.Pi / 100 {
				x := Radius * math.Cos(lat) * math.Cos(lon)
				y := Radius * math.Cos(lat) * math.Sin(lon)
				z := Radius * math.Sin(lat)
				screenX, screenY := projectPoint(x, y, z)
				if first {
					startX, startY = screenX, screenY
					first = false
				} else {
					pc.MoveTo(startX, startY)
					pc.LineTo(screenX, screenY)
					startX, startY = screenX, screenY
				}
			}
			pc.Stroke()
		}

		pc.StrokeStyle.Color = colors.Scheme.Success.Base
		for lon := 0.0; lon <= 2*math.Pi; lon += math.Pi / float64(NumLonLines) {
			first := true
			var startX, startY float32
			for lat := -math.Pi / 2; lat <= math.Pi/2; lat += math.Pi / 100 {
				x := Radius * math.Cos(lat) * math.Cos(lon)
				y := Radius * math.Cos(lat) * math.Sin(lon)
				z := Radius * math.Sin(lat)
				screenX, screenY := projectPoint(x, y, z)
				if first {
					startX, startY = screenX, screenY
					first = false
				} else {
					pc.MoveTo(startX, startY)
					pc.LineTo(screenX, screenY)
					startX, startY = screenX, screenY
				}
			}
			pc.Stroke()
		}
	})

	go func() {
		for range time.Tick(time.Second / 60) {
			rotationX += 0.01
			rotationY += 0.02
			rotationZ += 0.015
			c.NeedsRender()
		}
	}()

	b.RunMainWindow()
}

[0pcom]

In another globe I have which compiles directly to webassembly, I'm using frag shader code and vert shader code like this

const vertShaderCode = `
attribute vec3 position;
uniform mat4 Pmatrix;
uniform mat4 Vmatrix;
uniform mat4 Mmatrix;
attribute vec3 color;
varying vec3 vColor;

void main(void) {
	gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);
	vColor = color;
}
`
const fragShaderCode = `
precision mediump float;
varying vec3 vColor;
void main(void) {
	gl_FragColor = vec4(vColor, 1.);
}
`

It basically just gives a red to blue color gradient to make the rotation of the globe more apparent.

How can this kind of thing be implemented using cogentcore ; in the code I posted in the previous reply?

...

I should probably also take the opportunity here to ask about mouse interactions with the canvas. Not that I'm needing to do that, currently, but to know if it's possible would be appreciated.

If it was possible, to grab the globe animation with the mouse at a certain point, and be able to drag it or spin it along whichever axis of rotation - that would be an interesting / fun example to interact with, at least.

Also if you can have animated effects from the mouse moving over the canvas, those tend to make really eye-catching examples as well.

...

Is it possible to play sound via a cogentcore application? Or is it simple enough to do that cross-platform already. I notice the video example, I assume it might be possible to do it via embedded audio files using the same method.

...

Another related question ; when is webgpu anticipated to be widely supported, or at least supported on linux? I've attempted to get some of those examples working in waterfox and brave browser, without success - regardless of the flags used on the browser which supposedly enable experimental support.

[0pcom]

After additional testing, I note that the web / wasm view of the same (60FPS) app fails to load.

If I reduce the frame rate to 30 frames per second, it works. Any higher and it just gets stuck on the loading / preview.

CPU usage is a bit higher for both web and desktop views than with other GUI frameworks I've used - at high frame rates.

I also note that in my case - with onboard graphics - the desktop version uses CPU directly in proportion to the size of the window, regardless of the size of the animation in the window.

I also experimented with adding the animation code to the live view of the canvas documentation here, since it's editable

https://www.cogentcore.org/core/widgets/media/canvases

The performance was lacking when I added the animation there. It seems that the more stuff on a page, the slower any animation is because (I guess) the whole page is being re-rendered at a certain point. That is the only way I can think of to explain it.

After adding and removing the animation there, it seems that the CPU usage stayed higher than it should be. That might merit investigation ; but I'm unsure such an issue would impact most people, as the setup for a live-editable code is not very common.

It may be worthwhile to handle such a case differently than it is currently handled, as it can cause the page to become unresponsive when the animation should be visible.