Objects


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.

Cloud Object Disintegration

Create an Object

To create and draw any object on the canvas, declare and draw it using the object statement. Declaration of a shape involves

  • specifying the name of the object
  • specifying the shapes that would create this object
  • ending the declaration using 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.

Example

In this example, we animate create a cloud and make it go left and right, as shown below

Revine Cloud Animation

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.

Revine 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