WickBrush for Custom Brush help

Help
#1

Fill this out this info to make it easier for the community to help you! If you don’t fill out this information, your post may be deleted or removed.

What Wick Editor Version are you using?
web version - 1.19.3

Describe the Problem
I want to do hand drawn animation but I do not like the default brush look. After looking for ways I came across WickBrush - https://github.com/Wicklets/WickBrush (JS library for brushes). I code for fun, doing some creative coding or automating stuff, so I am not sure how to go about this. Where I am stuck is how do I go about testing this or the whole scripting thing. I know about buttons and events but the brush is a global phenomenon I want to happen not just when something is clicked and such.

Although looking at the WickBrush Git repo what seems feasible to me is:

  1. create a new brush by simply changing the brush tip property png. I could host my brush tip png in GitHubPages for WickBrush to use.
  2. a simple procedural brush tip that looks like a crayon with stagger, like this

WickBrush.BitmapBrush.enable();

// Step 1: Create a simple circular brush tip
const canvas = document.createElement(“canvas”);
canvas.width = 16;
canvas.height = 16;
const ctx = canvas.getContext(“2d”);

ctx.fillStyle = “black”;
ctx.beginPath();
ctx.arc(8, 8, 4, 0, Math.PI * 2);
ctx.fill();

// Step 2: Create Image and apply it as the brush tip
const img = new Image();
img.src = canvas.toDataURL();

img.onload = () => {
const tip = WickBrush.BitmapBrush.createBrushFromImage(img);
WickBrush.BitmapBrush.setBrushTip(tip);

// Step 3: Add stagger (jitter)
WickBrush.BitmapBrush.setBrushJitter(2); // Staggers the position
WickBrush.BitmapBrush.setSpacing(0.1); // Smooth stroke with overlap

console.log(“:crayon: Simple crayon brush with stagger ready!”);
};

What have you tried so far?

  1. Tried downloading the WickBrush.js on local storage to import to Wick editor. I am not being able to import .js files or maybe I am doing something wrong.
  2. Tried to see if I could plug the code into the console itself so it ran on my browser, cant make heads and tails of it.

I’d really appreciate the help since I travel a lot and dont want to download softwares. I prefer web based apps. Wick Editor is perfect for my hand drawn animation needs but would love to be able to change the brush tip, since I think it is a feasible option via WickBrush.

Would also appreciate help on how to get started with Scripting. Looked around the forum but there are methods and documentation but not actually how to start (except for the button etc etc) from the Learn page.
Thank you.

#2

To create a custom brush you’d practically need to edit the editor’s source code.
A few things about Wick’s current state— since its been handed to Carnegie Mellon University the software hasn’t been updated. On the bright side, it’s an open source, so community members have started working on updating it lately.

I cannot make promises, but this could be a feature we can start working on.

Good find, this repository was created by Nick, an old member of the Wick team
Though it is made simpler than the way the Wick brush tool works, it definitely helps break down the process of how it works. You’d still need to edit the source code to add custom brushes into Wick since it’s somewhat of a separate project, so I can’t give you a simple answer
Thanks for sharing that though!

This post here might help you with getting started:
https://forum.wickeditor.com/t/w3schools-tutorial/9100/3?u=hamzah_alani

#3

Hello, thank you for responding!
I was very happy to have found the WickBrush too since custom brushes seemed feasible.

I did go through the tutorials and got a vague idea but I can only script frame, clip etc etc. not the project itself while the custom brush would require the project to load the brush.

What does this mean

To create a custom brush you’d practically need to edit the editor’s source code.

so this cannot be done via the web version where frame and clips can be scripted, i think

#4

Wick Editor is an open source software— meaning the actual code written to create Wick Editor is on Github and anyone can fork it (create a new version and add the features they want).
If you want to add a new specific brush to Wick Editor, that’s the path you’d wanna go, if you’re a beginner though I wouldn’t recommend starting here.

In theory it would be possible to create a brush tool by running code inside the editor, if you were to program the brush similar to how I created a pixel brush here—

As a matter of fact you can probably download this wick file, and go inside the “pixel” clip and give it a different “tip” (it wouldn’t be smooth without some more tinkering). Only thing about this method though is you would need to open the wick file and run it to draw every time you want to use the brush

to summarize wick is a game engine. You can write code in wick to make games and not to edit Wick itself— though it’s still possible to write code in wick to edit the actual editor it would be easier to edit Wick by editing it’s actual source code than by writing code inside of it—

#5

OH! Thank you so much for the quick reply!

I have been out and travelling and hence could not reply sooner. Will try this.

I have been making a frame animation plugin for Photopea (it is web based) but owing to it not having a timeline it is difficult, but I do believe it can be powerful - so have been tinkering on and about. - maybe you could explore that. (not requesting - just considering the possibilities here but need to take resource constraints obviously)
Forking and all is way above my skillset since I only recently learnt how to host plugins using Githubpages and Vercel (I dont have the time either because I would want to utilize that time for creating artwork)

Thank you once again for your time!

1 Like