Goals:
- create code to display some different shapes in estuary using punctual notation
- change parameters to control size and position of the shape
Reference:
!presetview fulltexteditor
Choose Punctual from the language dropdown
circle [0,0] 0.25 >> add;
Position [0,0] is the centre of the screen. A positive coordinate moves it right (x axis) or up (y axis). A negative value moves it left (xaxis) or down (y axis).
Try moving it around
circle [0.5,-0.8] 0.25 >> add;
Note that moving it more than 1 unit in any direction places the coordinate off-screen!
Change the size (radius) by modifying the third number
circle [0.5,-0.8] 0.75 >> add;
circle is defined in the Punctual Reference as:
circle [x,y,...] [r] -- returns 1 when current fragment within a circle at x and y with radius r
Let's map this definition onto our example, so we can try and make sense of the all the definitions in the Punctual Reference
Firstly, we can see that circle matches the function name
circle ... >> add;
Our first set of [ ] brackets contain the [x,y,...] coordinates - this is known as an argument or parameter to a function
circle [0.5,-0.8] ... >> add;
And the last argument or parameter is the radius [r] of the circle
circle [0.5,-0.8] 0.25 >> add;
The ... inside the square brackets means that you can specify more x and y coordinates for the circle function. Try it!
circle [0.5,-0.8,0.2,0.3] 0.25 >> add;
Now we have two circles - you can keep making as many as you want!
Here are some more shape functions, and their definition in the Punctual Reference
vline is a vertical line - lines in Punctual extend the width or height (in this case) of the screen, so for a vline we only need an x coordinate, and a line thickness, or width
Note that prefixing a line with -- creates a "comment" that Punctual will just ignore
-- vline [x] [w]
vline 0.25 0.02 >> add;
Similarly for hline (horizontal line), except on the y axis
-- hline [y] [w]
hline 0.3 0.02 >> add;
rect is a rectangle that requires both [x,y] coordinates, as well as width and height arguments
-- rect [x,y,...] [w,h,...]
rect [0,0] [0.5,0.6] >> add;
point is just a pixel (and very small!). It has a fixed width and height, so the only arguments it needs are [x,y] coordinates
-- point [x,y,...]
point [0.5,0.5] >> add;
It's so small! Can you find it based on the x,y coordinates given?
We can replace any individual number with a list of numbers contained in [ ]. When we do this we get different results on different colour "channels" of the add output - red, green, and blue:
Create three vline objects, one for each of the red, green, and blue channels by creating multiple [x] coordinate arguments
vline [-0.25,0,0.25] 0.01 >> add;
Notice that all the lines are the same width - why is that?
If you don't specify a position for at least three channels, remaining channels share the last value in the list, to prove this:
Create a vline specifying only two x coordinates
vline [-0.25,0.25] 0.01 >> add;
Notice the line on the right (x coordinate 0.25) is a light blue colour, which is the combination of both green and blue channels (who are sharing the same x coordinate)
In this next example, we specify four x coordinates. The first 3 values are assigned to red, green, blue respectively, but the last value creates a fourth white vline - why is that?
vline [0.25, 0, -0.25, 0.5] 0.01 >> add;
Values can also be specified as fractions, using the Haskell Language syntax
vline [(-2)/3, 0, 2/3] 0.01 >> add;
-
Create a scene with at least two different shapes
-
Try modifying the width of a
vline- what value of thewparameter fills the screen?
vline 0 0.002 >> add;
- How wide is a line width of
1?
-
Using
vline, can you make an entirelybluescreen? -
Beginning with the example below, can you split the screen into thirds (using any of our shapes), with each third showing a different
RGBcolour?
vline [(-2)/3, 0, 2/3] 0.002 >> add;