Multiple shapes can be combined to create an object. The object can then be animated or interacted with as a singular entity rather than individual shapes. For example, a cloud (shown below) is composed of 5 overlapping circles; and hence we can create an object named cloud
consisting of 5 shapes of type circle.
To create and draw any object on the canvas, declare and draw it using the object
statement. Declaration of a
shape involves
endobject
object <name of shape>():
shape <somename>(<type>):
.<property2> = value2
.<property3> = value3
endshape
shape <somename>(<type>):
.<property2> = value2
.<property3> = value3
endshape
...
endshape
Note, you can wrap any number and types of shapes within an object and you will find information about the properties supported by a shape in the documentation of that shape.
Once an object is defined you can animate the object by using its name. To understand it in detail, check the example below.
In this example, we animate create a cloud and make it go left and right, as shown below
We see that a cloud is made up of 5 overlapping circles and hence we first create 5
shapes of type circles of varied radii.
shape c1(circle):
.center = (100, 200)
.radius = 60
.color = lightgrey
.fill = lightgrey
endshape
shape c2(circle):
.center = (170, 170)
.radius = 80
.color = lightgrey
.fill = lightgrey
endshape
shape c3(circle):
.center = (270, 160)
.radius = 100
.color = lightgrey
.fill = lightgrey
endshape
shape c4(circle):
.center = (330, 180)
.radius = 60
.color = lightgrey
.fill = lightgrey
endshape
shape c5(circle):
.center = (380, 200)
.radius = 60
.color = lightgrey
.fill = lightgrey
endshape
When we run above snippet of code, we get a cloud.
Now that we have the desired object, we wrap it up in Object declaration and name it cloud
as shown below. We have just wrapped the 5 shapes between object cloud():
and endobject
. This groups the 5 circles and create an object named cloud
.
object cloud():
shape c1(circle):
.center = (100, 200)
.radius = 60
.color = lightgrey
.fill = lightgrey
endshape
shape c2(circle):
.center = (170, 170)
.radius = 80
.color = lightgrey
.fill = lightgrey
endshape
shape c3(circle):
.center = (270, 160)
.radius = 100
.color = lightgrey
.fill = lightgrey
endshape
shape c4(circle):
.center = (330, 180)
.radius = 60
.color = lightgrey
.fill = lightgrey
endshape
shape c5(circle):
.center = (380, 200)
.radius = 60
.color = lightgrey
.fill = lightgrey
endshape
endobject
Now that we have a cloud
, making it go right is simple. we simply invoke the move command as shown below
loop
cloud.move(RIGHT)
endloop
The above commands will move cloud
to the right. The complete example can be seen in the showcase.
Notice any errors or typos? Please let us know or feel free to edit objects.md and issue a pull request.
Follow us on twitter @RevineLang
Built by Arpit Bhayani