[04-5] Move to relative position(next_to)

In the previous page, we looked at the 'to_move', 'to_edge' and 'to_corner' method to send an object to the promised position, or absolute position.

 

From this page, we will look at the 'next_to' and 'shift' methods that move around the object based on an object.

 

---

next_to

manimlib.mobject.Mobject.next_to(
	mobject_or_point, direction=RIGHT, buff=DEFAULT_MOBJECT_TO_MOBJECT_BUFFER, 
	aligned_edge=ORIGIN, submobject_to_align=None, 
	index_of_submobject_to_align=None, coor_mask=np.array([1, 1, 1]), )

Based on the target object or position, the object is moved with the buff value spaced in the given direction.

 

Parameters: mobject_or_point
	Mobject or point to be target
	In case of Mobject, it move to the external side of the target Mobject
	In case of point, it move to the left/right/up/down side based on the point 
  
Parameters:  direction=RIGHT
	A value that determines where to be placed the object based on the target
	If the value is LEFT, it is the left side of the target. 
	If the value is RIGHT, it is the RIGHT side of the target.
    
	Mainly used direction values are LEFT/RIGHT/UP/DOWN/UL/UR/DL/DR

Parameters: buff=DEFAULT_MOBJECT_TO_MOBJECT_BUFFER=0.25,
	A value that determines how far away it is from the target object or location point.
	The default value is 0.25.
	
	If the value is zero, 
	object will be located to the place without a gap between the object and tagret-object. 

Parameters: aligned_edge=ORIGIN
	A value indicating how to align with the object or point.
    If mob.next_to(tgt, LEFT, UP) is called, mob move to tgt's RIGHT-UP side.
    
    See picture in detail in the description section below.

Parameters: submobject_to_align=None
	In the case of a group-object in which the object is composed of several sub-objects, 
	a value that specifies which of the sub-objects to move based on. 
    
	The value is the name of the sub-object to be based for aligning
    
	When specifying using the sub-object name like this, 
	index_of_submobject_to_align=None must be specified.
    
Parameters: index_of_submobject_to_align=None
	In the case of a group-object in which the object is composed of several sub-objects, 
	a value that specifies which of the sub-objects to move based on. 
    
	The value is the index number of the sub-object to be based for aligning
    
	When specifying using the sub-object index like this, 
	submobject_to_align=None must be specified.
    
Parameters:  coor_mask=np.array([1, 1, 1])
	Mask value for the position to be moved.
	If the value is [0.5, 0.5, 0], it moves to 1/2 point of the moving direction.
  
Returns:
	The object's instance moved to the position 

 

It is common to do the following when moving objects in Madam.

 

1) move target-object using a absolut-coordinate moving method such as move_to, to_edge or to_corner method

2) move the objects by using next_to method around the target-object.

 

When there is a small rectangle rect1 and a large rectangle rect2, if you do rect1.next_to(rect2, LEFT), rect1 is located on the left side of the large rectangle rect2.

 

When you indicate the direction as RIGHT/UP/DOWN, it moves to the right/up/down respectively. Intuitive and not difficult to understand.

 

Below is a picture illuraThe figure below shows the position moved by the direction of next_to.

The buff specifies the distance from the target object when moved.

 

It is important to note the difference from the 'to_move' method we saw in the previous page. In the case of 'to_move', it is positioned to the inside of the target rectangle, while 'next_to' is positioned to the outside.

You might be asking this question here. When 'to_move' or 'next_to' both move inside or outside based on the target object, why is it called 'to_move' is absolute-position movement and 'next_to' is relative-position movement?

In fact, the classification of the methods by absolute position movement and relative position movement is what I arbitrarily classified, and there is no such division in the Manim library itself.

What I distinguished like this is that in the case of 'to_move', it is directly moved to absolute coordinates, or it is classified as 'move to absolute position' because it moves toward the center of an object as if it is toward absolute coordinates. In the case of 'next_to', based on the target (position or object), it is moved to its surroundings, so it is classified as 'move to relative position'.

So, don't put too much emphasis on the classification, but think of it as a way to organize the methods.

 

buff

The default 'buff' parameter's value is 0.25, but if you specify the buffer as zero, object will be located like below picture.

 

obj.next_to(tgt, LEFT/RIGHT/DOWN/UP, buff=0)

 

When buff=0 in the next_to method

 

aligned_edge

It is convenient to understand that aligned_edge is that the src object is aligned with tgt again after moving in the direction of the outer edge of the tgt object.

 

For example, if the code is 'src.next_to(tgt, LEFT, buff=0, aligned_edge=DOWN)', src is located on the left side of tgt, then src is aligned with the bottom side of the tgt.

 

Of course, it is not that the src moves to the center of the left side of the tgt and then moves down again, but it is moved at once.

 

Only aligned_edge=UP/DOWN is meaningful for direction=LEFT/RIGHT, only aligned_edge=LEFT/RIGHT is meaningful for direction=UP/DOWN. (aobove picture)

 

By the way, what if the direction=LEFT/RIGHT, but the aligned_edge is also LEFT/RIGHT?

 

It gets a little weird.

 

The picture below shows the movement when dircetion=LEFT and aligned_edge=LEFT/RIGHT.

So, I'm not recommend you to use as below.

 

In case of target is a point

When the target is a point, it is moved left/right/up/down to the outside of the point.

 

obj.next_to(ORIGIN, LEFT/RIGHT/UP/DOWN)

 

---

Below is a sample code showing how to move by changing each parameters of next_to method.

You can easily understand it by looking at the code and video.

class NextToTest(Scene):
    def construct(self):
        dir_str = ['ORIGIN', 'LEFT', 'RIGHT', 'UP', 'DOWN', 'UL', 'UR', 'DL', 'DR']
        dir_list = [ORIGIN, LEFT, RIGHT, UP, DOWN, UL, UR, DL, DR]

        #1. next_to(obj, ORIGIN/LEFT/RIGHT/UP/DOWN/UL/UR/DL/DR)
        for str, d in zip(dir_str, dir_list):
            self.next_to_obj(str,d)

        #2. next_to(obj, direction, buff=0.5)
        for str, d in zip(dir_str, dir_list):
            self.next_to_obj(str+" buff=0.5",d, buff=0.5)

        #3. next_to(obj, LEFT, buff=0, aligned_edge=ORIGIN/LEFT/RIGHT/UP/DOWN
        for i in range(0,5):
            self.next_to_obj("LEFT, aligned_edge="+dir_str[i], LEFT, buff=0, aligned_edge=dir_list[i])

        # 4 next_to(obj, LEFT, buff=0.5, aligned_edge=ORIGIN/LEFT/RIGHT/UP/DOWN
        for i in range(0, 5):
            self.next_to_obj("LEFT, buff=0.5, aligned_edge=" + dir_str[i], LEFT, buff=0.5, aligned_edge=dir_list[i])

        # 5. next_to(point, ORIGIN/LEFT/RIGHT/UP/DOWN/UL/UR/DL/DR)
        for str, d in zip(dir_str, dir_list):
            self.next_to_point(str,d)

    def next_to_obj(self, str, direction=ORIGIN, buff=0, aligned_edge=ORIGIN):
        rect1 = Rectangle(width=0.4, height=0.2, stroke_color=RED)
        rect2 = Rectangle(width=1.5, height=1.5, stroke_color=BLUE).move_to(np.array([2, 2, 0]))
        text = Text(str, font='굴림', stroke_width=0, size=0.4).next_to(rect1, DOWN)

        self.add(rect1, rect2, text)
        self.wait(0.3)

        self.play(rect1.next_to, rect2, direction, {"buff":buff, "aligned_edge": aligned_edge})
        self.wait()
        self.remove(rect1, rect2, text)

    def next_to_point(self, str, direction=ORIGIN, buff=0, aligned_edge=ORIGIN):
        rect1 = Rectangle(width=0.4, height=0.2, stroke_color=RED)
        rect2 = Rectangle(width=1.5, height=1.5, stroke_color=BLUE).move_to(np.array([2, 2, 0]))
        text = Text(str, font='굴림', stroke_width=0, size=0.4).next_to(rect1, DOWN)

        tgt_point = np.array([2,2,0])

        self.add(rect1, rect2, text)
        self.wait(0.3)

        self.play(rect1.next_to, tgt_point, direction, {"buff": buff, "aligned_edge": aligned_edge})
        self.wait()
        self.remove(rect1, rect2, text)

 

 

 

 

---

Next Page: [04-6] Move to relative position(shift)

[04-6] Move to relative position(shift)

Go To: [99] Table of Contents