Coloring in a picture with shape fills (+option to add new colors)

[bluecake]

I was inspired to do a coloring page sort of project with programmatic shape fills by this thread:

Programmatically change fill color

The rectangle that it makes is supposed to be the same size as the clip that it is connected to (changing the size of the clip in the clips timeline changes the size). idk how 2 make complex shapes I do agree with you, it is somewhat confusing, but here’s the source that I used:

Major thanks to pumpkinhead, Hamzah and blurredpixels, this is a really neat feature that has tons of potential for various projects. Here’s a test project I made:
coloring-page-test.wick (16.9 KB)
Preview:

Pretty simple and self-explanatory. I had quite a bit of fun with the custom colors aspect once it was implemented. I might work on trying to create a better color picker though. I’d really like something like Wick’s color picker where you can move a dropper around and get a full range of colors that way.

[awc95014]

randomization is very… interesting

[bluecake]

I take no responsibility for how potentially horrifying the results might be :p

[blurredPixels]

yeas right
this is one of the applications I had in mind
next step is export canvas as picture with .toDataURL()

for color picker you could try to integrate something like jscolor

[bluecake]

I’ll look into jscolor, thanks for the recommendation. I know this is a bit different from saving as a picture, but right now I’m working on something that will allow the user to print the picture that’s in the wick project (and depending on your browser, you may also be able to save it as a .pdf file from the same print dialog). If you’re at all interested, I could share that project here.

[Hamzah_Alani]

Hi @bluecake, I feel like this sounds like what you’re working on right now

Users of Game Share Results of Interactions

Welcome to our forums @Emma_Gibbins. You could add a button to print the results as an option. I put together this example. Copy and paste the share button into your project, and it should do the magic. The button will open a print preview page, so you could instruct your students to save as PDF. They should be able to email that PDF back to you. [image] Print_Example.wick (542.0 KB) Hope this help!

@Jovanny’s example could probably help you if you’re having any trouble with anything.

Also, that project is really nice Well done

[bluecake]

Yeah, it’s similar to that! Something I’m adding to mine is a feature where when you click the print button, it hides all other elements that aren’t part of the picture (like buttons, for example), so when the window.print() is executed, you’re only printing out the picture you colored without all the other stuff in it.

And thank you

[Hamzah_Alani]

Happy to help : )

Good luck with ur project, it’s turning out great :D

[bluecake]

I can post the stuff I’m working with, it might be helpful to someone else. But it’ll have to be in two parts because the css I’m working with is in another html file. The reason for this really, is because I’d want the wick project to be contained in an iframe on a webpage, if it was actually added to a website. And then when window.print() is called, you don’t want it to include other parts of the webpage. And I don’t know if you can write css from wick that’ll tell it to only print the wick project with nothing else. That didn’t seem to work when I was trying from the print example.

[bluecake]

Well, here it is, if it might be useful to anyone:
print-test.html (2.0 MB)
html-test.html (1.3 KB)
You have to download both files to the same folder, then open the html-test one. When you click the print button, it should only print the wick stuff, and also hide certain things in the project before printing (then show them again after print dialog is closed).
Also here’s the wick file:
print-test.wick (3.7 KB)

[bluecake]

Something I noticed is that when trying to hide certain objects before running window.print(), is that it only worked when I called window.print() from a setTimeout function. Otherwise, no matter what I did, the hidden objects were only hidden after window.print() had already run (meaning they still showed up in the print preview). I don’t know if something like this would happen when using .toDataURL() instead of window.print() though.

[blurredPixels]

I thinkered quite alot on how to make a color picker in wick where you can choose every hue
anyone figured out how to make gradients in wick?
being a canvas it should be very possible but I havent made it yet
I dont like the idea of using an image

[awc95014]

you might need to play with css or something, but it isn’t built in i think

[blurredPixels]

made a color picker using a small image
will try later to make one using a gradient

Color picker

following this post about coloring shades I wanted to make a color picker to let the user choose any color i’d rather use a gradient but for instance this uses a small image to obtain the hue rainbow note that you can resize (customize ) both the panel and\or the gradient clips color_picker.wick (3.2 KB)