How can I create a Kivy app with a mouse shader like in p5.js?

I want to create a Kivy app that displays a real-time mouse shader effect, similar to the one on this OpenProcessing website: https://openprocessing.org/sketch/835887. In the p5.js code, the shader uses the position of the mouse.

So far, I have created mouse cursor trail which changes color every 3 seconds:

from kivy.app import App
from kivy.graphics import Color, Line
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.core.window import Window
from kivy.clock import Clock
from kivy import Config

Config.read("config.ini")

class MyGrid(Widget):
def __init__(self, \*\*kwargs):
super(MyGrid, self).__init__(\*\*kwargs)
self.trail = \[\]
self.color = (1, 0, 0, 0.3)  # set the trail color to red by default
self.label = Label()
self.add_widget(self.label)
Window.bind(mouse_pos=self.mouse_pos)
self.line = Line(points=self.trail, width=20, mode='mesh', blur=10)
self.canvas.add(Color(\*self.color))
self.canvas.add(self.line)
self.color_index = 0
Clock.schedule_interval(self.change_color, 3)

    def on_touch_up(self, touch):
        self.canvas.remove(self.line)
        self.trail = []
        self.line = Line(points=self.trail, width=20, mode='mesh', blur=10)
        self.canvas.add(Color(*self.color))
        self.canvas.add(self.line)

    def mouse_pos(self, window, pos):
        self.trail.append(pos)
        if len(self.trail) > 10:
            self.trail.pop(0)
        self.line.points = self.trail

    def change_color(self, dt):
        self.canvas.remove(self.line)
        colors = [(1, 0, 1, 0.3), (0, 1, 0, 0.3), (1, 1, 0, 0.3), (1, 0.3, 0, 0.3)]
        self.color_index = (self.color_index + 1) % len(colors)
        self.color = colors[self.color_index]
        self.canvas.add(Color(*self.color))
        self.canvas.add(self.line)

class CursorApp(App):
def build(self):

        return MyGrid()

if __name__ == "__main__":
CursorApp().run()

Can someone please provide some guidance on how to implement this effect in Kivy, or suggest some resources that might help me get started?

Blog

How can I create a Kivy app with a mouse shader like in p5.js?

Linas Kapočius

Join Our Newsletter. No Spam, Only the good stuff.

Related