This article or section may not have content matching Scratch Wiki editing standards. Please improve it according to Scratch Wiki:Guidelines and Scratch Wiki:Editing Conventions. (February 2024) |
This tutorial explains how to create a drawing tool.
What Is a Drawing Tool?
A drawing tool is something that is used to help people draw things. The method this tutorial uses can do several things.
What Will This Drawing Tool Do?
The drawing tool will be able to change the pen's size, color, saturation, brightness, and transparency.
What Is Needed?
First, 3 sprites and 2 backdrops are needed. One sprite should be named "Draw Tool", another should be named "Color State", and the final sprite should be named "Pause State".
One backdrop should be named "Paused" and the other should be "Unpaused". Both of the backdrops should be blank.
We also will need to use the Pen Extension.
The Variables
(Brightness:\:: variables) // This should be a slider. Min: 0.00, Max: 100.00
(Color:) // This should be a slider. Min: 0.00, Max: 200.00
(paused?) // Can be either yes or no. This states if it is paused or unpaused.
(Pen Size:) // This should be a slider. Min: 1.00, Max: 200.00
(Pen Up?) // Can be either yes or no. This states if the pen is up or down.
(Saturation:) // This should be a slider. Min: 0.00, Max: 100.00
(Transparency:) // This should be a slider. Min: 0.00, Max: 100.00
Draw Tool Sprite
This is a small ball, just use "ball-c" from the Sprite Library.
Color State Sprite
This is just a big red square that is set at 0,0. Please note that this sprite will not display the changes to the brightness.
Pause State Sprite
This sprite will show when the tool is paused. The black bar is where the settings to change the drawing stuff will be.
The Code
First, you need to start with the easiest part of the code.
Pause State Code
when green flag clicked show go to x:(0) y:(0)
when [p: v] key pressed // this states what happens with this sprite when it is paused if <(paused?)=[yes]> then hide // hides this sprite when unpaused else show // shows when paused go to [front: v] layer end
Color State Code
when green flag clicked show go to x:(0) y:(0)
when green flag clicked forever // this is to change the color state that this sprite is in, it reflects a close replica of what the drawing color will be, but it will not be able to change the brightness if <(paused?)=[yes]> then set [color v] effect to (Color:) set [brightness v] effect to ([100]-(Saturation:)) // this block shouldn't have been named brightness when it doesn't even change the brightness, when testing was being done we found that this block changed the saturation of the sprite and not the brightness set [ghost v] effect to (Transparency:) end
when [p: v] key pressed // this states what happens with this sprite when it is paused if <(paused?)=[yes]> then hide // hides this sprite when unpaused else show // shows when paused end
Draw Tool Code
when green flag clicked erase all // clears the drawing every time the flag is clicked switch backdrop to (paused: v) // states that the tool starts up puased set [Pen Up?: v] to [yes] set [Color: v] to [0] // default start color, which is red set [Pen Size: v] to [50] // default pen size, should be close to the same size as this sprite, so when this number changes the size of this sprite changes with it set [Saturation: v] to [100] // default saturation, if this is set to 0 then the color will be white set [Brightness: v] to [100] // default brightness, if this is set to 0 then the color will be black set [Transparency: v] to [0] // default transparency set [paused?: v] to [yes] go to x:(184) y:(129)
when green flag clicked forever if <(paused?)=[no]> then go to (mouse-pointer v) else set size to (Pen Size:)% set pen size to ((Pen Size:)/[2.272727272727273]) set pen (color v) to (Color:) set pen (saturation v) to (Saturation:) set pen (brightness v) to (Brightness:\:: variables) set pen (transparency v) to (Transparency:) end
when [s v] key pressed // this is so that you can start and stop drawing at your leisure without having to pause if <not <(paused?)=[yes]>> then pen down set [Pen Up?: v] to [no] else pen up set [Pen Up?: v] to [yes] end
when [p v] key pressed // this states what happens with this sprite when it is paused if <(paused?)=[yes]> then hide variable [Pen Size: v] hide variable [Color: v] hide variable [Saturation: v] hide variable [Brightness: v] hide variable [Transparency: v] switch backdrop to (unpaused: v) set [Paused?: v] to [no] // sets to unpaused else pen up set [Pen Up?: v] to [yes] show variable [Pen Size: v] show variable [Color: v] show variable [Saturation: v] show variable [Brightness: v] show variable [Transparency: v] switch backdrop to (paused: v) set [Paused?: v] to [yes] // sets to paused end