# MathJs Tutorial 2: Circles and Rectangles

## Lesson Overview and Objectives

In this lesson, students learn two of the important constituents of the Tychos world, namely the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object, and the [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object as well as how to use the [`Arrow`](https://docs.tychos.org/docs/learn/language-reference-api-1#arrow) object to add vector arrows to visualize matrix quantities.

Students will learn:

* How to create  [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle)  objects.
* How to create  [`Rectangle`](https://app.gitbook.com/@tychos/s/docs/~/drafts/-MObwcPfDBh_nSGFNO7-/learn/language-reference-api#rectangle) objects.
* How to change certain attributes such as the position, size and color of these objects.
* How to represent these objects using images rather than the default graphic representations.

Click on the link below to open the Tychos scenario in a new browser tab where you can follow along, or use the embedded frame that contains the scenario below:

[Lesson 2: Circles and Rectangles](https://www.tychos.org/en/scenarios/augVxi)

Now it's time to actual simulate something in the simulated environment, and we are going to define the simplest, most basic objects of our simulation - the `Rectangle` and `Circle` objects.

You are going to learn today how you can create simulated objects in Tychos and how you can place those objects at different positions within the simulated 2D space.

## Creating Circles

[`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) objects are meant to be representative of any object in your simulated world. They could represent a spherical object such as a planet or a ball, but could also represent any object, as long as it serves your purpose of simply representing the position of the object.

If all you need is a *general* sense of the object's size and position, then a Tychos [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) is probably the object that you are going to use.

To create a [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) in the simulation, you need to first identify a valid variable name to store the reference to the object. You then assign the variable to the result of a command that *invokes* or essentially brings the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object into existence:

```coffeescript
c1 = Circle()
```

This particular [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object is created and placed in the virtual world at the position of x = 0 and y = 0 with a default radius of 10 and a default color.

The above code uses the default attributes of a [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object, but you can actually create one with your own initial values. For example, you can also define the size of the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle). 

Here is how you can create a [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object with a radius of 10:

```coffeescript
c1 = Circle({radius: 10})
```

This changes the visual size of the particle on the screen. Notice the use of `{` and `}`. The text in between these *curly braces* is a list of name and value pairs that define the attributes of the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object. There a number of these attributes that can be set or changed in your simulation:

* `pos` — The initial position of your `Circle` in `[X,Y]` coordinates.
* `radius` — The radius of the circle that is drawn in the World View to represent this particle.
* `color` — The circle will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".
* `image`  — A URL that identifies a JPEG, GIF, SVG or PNG image.
* `opacity` — The circle will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.
* `visible` — The circle can be hidden from view by setting this flag to `false`. 
* `motion_map` — This flag tells Tychos to attach a series of strobe images called a motion map.
* `label` - You can attach a label to the `Circle` object by indicating a the `text` and `color` of the label.  

So for example, you can also change the initial position or color of the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object when you create one:

```coffeescript
c1 = Circle({pos:[10,10], radius:10, color:"red"})
```

Notice that the attributes follow a pattern:

```
name: value
```

The first text is the name of the attribute, and then a colon, and then the value of the attribute. The order that you have them in does not matter, just as long as you get the names correct:

```coffeescript
c1 = Circle({radius:10, color:"red", pos:[10,10]})
```

You can create more than one  [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) , you just have to assign it a different variable name. The code below creates two different  [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) objects. The names that you use can be almost anything:

```coffeescript
g_car = Circle({pos:[0, 100], radius:10, color:"green"})
r_car = Circle({pos:[100, 0], radius:10, color:"red"})
```

Again, here the  [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) objects are representing a green car and another representing a red car.

### The Position Attribute

You can change the position of a  [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle)  object by referencing its "pos" attribute. This is done by using a common computer science notation called "dot" notation. Its quite easy:

```coffeescript
c1.pos = [100, 0]
```

This line of code is read "The object c1*'s* position is now x = 100 and y = 0".

This ends the introductory lessons for orienting you to the simulation tool that we will be using frequently to help us discover the scientific models that best describe and predict nature's behavior.

## Creating Rectangles

The [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object is another Tychos object that you can use to represent of an object in your simulated world. They could represent objects such as a box, or a table top, but could also represent any object. The big difference between a [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object and a [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object is that  [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) objects have a **length** and a **width** rather than a radius.  

If you need an object that visually represents the important difference between the length and width of the object, then a Tychos  [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object is probably the object that you are going to use.

To create a [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object in the simulation, once again you need to first identify a valid variable name to store the reference to the object. Just like with the  the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object, you create a [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object by assigning the variable to the result of a command that *invokes* or essentially brings the [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object into existence:

```coffeescript
r1 = Rectangle()
```

This [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object is created and placed in the virtual world at the position of x = 0 and y = 0 with a default length and width of 5 and 5.

Just as with the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object, you can override the default attribute values of your  [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object by giving it a set of name: value pairs in a list:

```coffeescript
r1 = Rectangle({pos: [10, 10], size:[10, 20], color:"purple"})
```

Rather than defining a radius as the visual size attribute, the size attribute here gives your  [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object a width (or X size value) and length (or Y size value).

The other attributes of the [`Rectangle`](https://docs.tychos.org/docs/learn/language-reference-api-1#rectangle) object are very similar to the [`Circle`](https://docs.tychos.org/docs/learn/language-reference-api-1#circle) object. Here is a full listing of those attributes:

* `pos` — The initial position of your `Rectangle` in `[X,Y]` coordinates.
* `size` — The width and height of the `Rectangle` that is drawn in the World View to represent this particle.
* `color` — The `Rectangle` will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".
* `image`  — A URL that identifies a JPEG, GIF, SVG or PNG image.
* `opacity` — The `Rectangle` will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.
* `visible` — The `Rectangle` can be hidden from view by setting this flag to `false`. 
* `motion_map` — This flag tells Tychos to attach a series of strobe images called a motion map.
* `label` - You can attach a label to the `Rectangle` object by indicating a the `text` and `color` of the label.  .

## Using Images to Represent Your Objects

You are not limited to visually representing your objects using only simple circles and rectangles. You can also use any image from the web.

This is done by changing the `image` attribute like this:

```coffeescript
c1.image = "https://upload.wikimedia.org/wikipedia/en/thumb/e/ec/Soccer_ball.svg/240px-Soccer_ball.svg.png"
```

Tychos will now replace the simple image of a solid colored circle with this image:

![svg image of a soccer ball](https://2165864134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCBQtB7AkKJtVQIbOdo%2F-MOc9CvhsFoK_q2x271F%2F-MOcAWEwsauiFF5KLCK1%2F240px-Soccer_ball.svg.png?alt=media\&token=644bfc04-2e0f-4ba0-8dcb-f3c9cb6c6291)

It is recommended that you use either **svg** images that are scalable, or **png** and **gif** files that allow you to store transparency values.

Keep in mind that the physical dimensions of the image will be scaled to the object `size` defined in either the `radius` attribute or the size attribute of the object.