translate()

Translates the 3D coordinate system

Example

Syntax

translate(x, y, [z])

Parameter	Description
x	right-left translation
y	up-down translation
z	forward-backward translation (only in WEBGL mode)

Full Example

Example Full Code

def setup():
  createCanvas(300,300, WEBGL)

def draw():
  background(255, 79, 132)
  fill(112, 88, 255)
  stroke(176, 235, 51)
  strokeWeight(2)

  torus(100, 25)
  translate(100*cos(frameCount), 0, 100*sin(frameCount))
  cone(50, 50)

Description

It shifts the origin on the coordinate system. Calling translate(50, 0, 0) makes the point (50, 0, 0) the new origin. To illustrate:

• if one draws the point (10, 0, 0) before the translation, it appears 10 pixels to the right of the original center.

• if one draws the point (10, 0, 0) after the translation, it appears 10 pixels to the right of the new center, which is 60 pixels from the original center.

Like other transformations in the library (rotateX(), rotateY(), rotateZ()), this effect is cumulative. That is, calling translate(10, 0, 0) then translate(20, 0, 0) is the same as translate(30, 0, 0)

Find these documents helpful? Let the people who made them help your child learn to code at Strivemath!

We'd love to hear your Feedback/Comments here.