# 2D basics

Learn the fundamentals of 2D graphics

Before we start making some graphics, let’s cover the basics.

# Coordinate system

First, it’s important to know that visible objects drawn in the window follow a coordinate system. Instead of something you might be familiar with from your math classes, this system has its origin, or `(0, 0)`, in the upper-left corner, and the x and y values get larger toward the bottom-right. This might seem odd, but it’s actually common in 2D computer graphics. In this documentation, `x` is the x-coordinate and `y` is the y-coordinate. When an object has multiple pairs of x and y coordinates, they will be numbered, for example: `x1`, `y1` or `x2`, `y2`.

# Adding and removing objects

All objects that can be drawn in the window are added automatically. When you called `Triangle.new` in the “get started” tutorial, its `add` method was called for you, which added the triangle to the window. If you want to remove an object from the window, simply call `remove`. Here’s an example showing how to remove, then add a shape back to the window:

``````s = Square.new  # a square is created and added to the window
s.remove  # square is removed...
s.add     # ...and added back to the window
``````

All objects can be removed from the window by simply calling `clear`:

``````Triangle.new
Square.new
clear  # everything now gone from the window
``````

# Depth

Objects are drawn in the order they are created. For example, if you call `Triangle.new` and then `Square.new`, the triangle will be behind the square. You can override this behavior by setting a “z-index” for the object. An object with a higher index will be “above” (in front) of another with a lower value. All objects start with a z-index of `0`.

For example, to make the following triangle appear above the square, we can set it’s z-index like so:

``````t = Triangle.new
s = Square.new
t.z = 1
``````

# Contains

You can check if a point is within the bounds of an object by calling its `contains?` method like so:

``````s = Square.new(x: 50, y: 50, size: 100)
s.contains? 75, 75  # returns true
s.contains? 10, 20  # returns false
``````

# Example of moving a square shape with keys

``````require 'ruby2d'

# Define a square shape.
@square = Square.new(x: 10, y: 20, size: 25, color: 'blue')

# Define the initial speed (and direction).
@x_speed = 0
@y_speed = 0

# Define what happens when a specific key is pressed.
# Each keypress influences on the  movement along the x and y axis.
on :key_down do |event|
if event.key == 'j'
@x_speed = -2
@y_speed = 0
elsif event.key == 'l'
@x_speed = 2
@y_speed = 0
elsif event.key == 'i'
@x_speed = 0
@y_speed = -2
elsif event.key == 'k'
@x_speed = 0
@y_speed = 2
end
end

update do
@square.x += @x_speed
@square.y += @y_speed
end

show
``````

Continue to the next topic ▸