P5 Python Docs
  • Getting Started
  • Simple mode
  • Reference
    • Shapes
      • 2D
        • point()
        • line()
        • rect()
        • square()
        • triangle()
        • circle()
        • ellipse()
        • arc()
        • quad()
        • beginShape()
      • 3D
        • plane()
        • box()
        • sphere()
        • cone()
        • cylinder()
        • ellipsoid()
        • torus()
    • Controlling the environment
      • coordinateMode()
      • rectMode()
      • ellipseMode()
      • frameRate()
      • setup()
      • draw()
    • Built-in Variables
      • Environment
      • Keyboard
      • Mouse
    • Built-in Functions
      • keyIsDown()
      • millis()
      • second()
      • minute()
      • hour()
      • translate()
      • rotate()
      • createSlider()
      • createGraphics()
      • createVector()
    • Events
      • Keyboard
        • keyPressed()
        • keyReleased()
      • Mouse
        • mouseMoved()
        • mouseDragged()
        • mousePressed()
        • doubleClicked()
        • mouseWheel()
    • Text
      • text()
      • textSize()
      • textAlign()
    • Math
      • drawTickAxes()
      • random()
      • randomGaussian()
      • dist()
      • linmap()
      • bounce()
      • wave()
    • Colour and Outline
      • colorMode()
      • fill()
      • stroke()
      • strokeWeight()
      • background()
    • Images & Audio
      • loadImage() and image()
      • loadSound()
    • 3D Controls
      • orbitControl()
      • translate()
      • rotateZ()
      • rotateX()
      • rotateY()
      • scale()
Powered by GitBook
On this page
  • Example
  • Syntax
  • Full Example
  • Description
  1. Reference
  2. 3D Controls

translate()

Translates the 3D coordinate system

PreviousorbitControl()NextrotateZ()

Last updated 2 years ago

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 (, , ), 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 !

We'd love to hear your Feedback/Comments .

rotateX()
rotateY()
rotateZ()
Strivemath
here