More Drawing
Quick Help
Did you notice the extra Star command that popped up in the last chapter?
If you click on a command inside the GotoJSE code editor, then look at the bottom of the screen, you'll notice there's a QuickHelp that shows you what parameters the command expects.
Little words of advice
This can be super helpful if you quickly need to refresh yourself on how the parameters of a command work.
If you need even more help, you can hit Ctrl+? on the keyboard, or hit the [?] icon on the main GotoJSE Gui.
This will bring up a full Help Page, which describes the command, and even gives you a lovely example of how to use it.
More words of advice
Type the word Star into GotoJSE, then click into the help documents, to see a lovely example of how we can use it.
Drawing Stars
So, the Star.
It looks almost the same as how we draw an Oval.
Star X,Y, Inner Radius, Outer Radius, Points
If you imagine a 5 pointed star, the Outer Radius would be the points, and the Inner Radius is how thick the middle of the star is.
Repeat
CLS
Inny=Rand(32,64)
Outty=Rand(72,128)
Points=Rand(5,8)
if Points==6 then Points=9
Star 320,240,Outty,Inny,Points
Text 320,400,"Click for a New Star",1
Flip
// This command waits for input
// A mouse click will make it carry on
WaitAny()
Forever
What a pretty star!
Stretching
Unlike the Oval command, which has Width and Height, the Star command doesn't let us make the star any taller or wider.
How do we change that, then?
Well, in this case, we can make use of the SetScale command to change its Scale.
Repeat
CLS
Inny=Rand(32,64)
Outty=Rand(72,128)
Points=Rand(5,8)
if Points==6 then Points=9
// SetScale Width Scale,Height Scale
SetScale 0.5,3
Star 320,240,Outty,Inny,Points
Text 320,400,"Click for a New Star",1
Flip
WaitAny()
Forever
Stretchy!
SetScale tells GotoJSE to draw things with an extra scale in mind. 1 is normal, 0.5 is half, 2.0 is double.
In this example, we set it to SetScale 0.5,3, which is half as wide, and three times as tall.
We'll definitely need to use ResetDraw after using this.
It's a very powerful command!
Take it All Back
We can use minus numbers as Scales, too.
This gives the drawing commands a backwards scale, which means things get drawn backwards!
Text 160,200,"ABCDabcd,'-->",1
SetScale -1,1
Text 480,200,"ABCDabcd,'-->",1
SetScale 1,-1
Text 160,280,"ABCDabcd,'-->",1
SetScale -1,-1
Text 480,280,"ABCDabcd,'-->",1
Backwards and upside down!
Oval 100,100,32,32
Rect 100,300,32,32
SetScale 2,2
Oval 300,100,32,32
Rect 300,300,32,32
SetScale 0.5,0.5
Oval 500,100,32,32
Rect 500,300,32,32
Scaling also impact other drawing shapes!
Transparency
When drawing things, we can make them semi-transparent.
We use the command SetAlpha to set this value, between 0.0 (completely invisible) to 1.0 (fully solid)
Repeat
CLS
ResetDraw
SetAlpha 0.2
Oval MouseX(),MouseY(),240
SetAlpha 0.4
Oval 320,240,240
SetAlpha 0.6
Oval 640-MouseX(),480-MouseY(),240
Flip
Forever
Three layers of transparency that mix together.
We can quickly set the Alpha using SetCol's fourth parameter.
Repeat
CLS
ResetDraw
Starfield 2,0
SetCol 255,255,0,0.4
Oval MouseX(),MouseY(),240
Flip
Forever
Chunky Lines
GotoJSE also has a super handy command for thickness, when drawing lines and outlines.
The SetThick command is used for making any lines a bit thicker.
Repeat
CLS
ResetDraw
for J=1 to 10
SetThick J
X=J*60
Y=J*40
DrawOval X,Y,32,32
Line X,Y,X,480
Next
Flip
Forever
Nice and chunky!
Repeat
CLS
ResetDraw
for J=1 to 10
SetThick J
X=J*60
Y=J*40
DrawOval X,Y,32,32
Line X,Y,X,480
Next
SetThick 500
DrawOval 320,240,640
Flip
Forever
Sparkling Stars
Repeat
CLS
SetThick 5
SeedRnd 1
For J=0 to 50
DrawStar Rand(0,640),Rand(0,480),32,16
Next
Flip
Forever
A number of stars scattered over the screen.
Can you use the Rand() command to make each star a different colour?
Drawing a 3-sided Oval creates a Triangle.
If we draw a long thin triangle, we get a nice pointy arrow.
Oval 320,240,90,240,3
Pointy!
Can you use the SetRot command to draw a triangle that points Right, Down and Left?
Our Snowman has a very odd shaped carrot for its nose.
I bet if you give him a 3-sided oval, and pointed it to the right, then that would look better.
Pointy carrot nose!