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
  • Examples
  • Syntax
  • Description
  1. Reference
  2. Built-in Functions

translate()

Shifts the entire coordinate system by a horizontal and vertical amount

Previoushour()Nextrotate()

Last updated 1 year ago

Examples

translate(100,100)
square(50,100,100)

translate(mouseX,mouseY)
square(50,100,100)

Syntax

translate(x,y)
Input
Description

x

Horizontal translation (left/right)

y

Vertical translation(up/down)

Description

The translate() function is used to move the origin point of the coordinate system to a new location.

When you call the translate() function, all subsequent drawing commands will be relative to the new origin point. This means that if you draw a shape or line at position (50, 50) after calling translate(100, 100), it will actually appear at position (150, 150) on the canvas.

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.

a) Translated tick axes b) Square moved to new position (150,200)