Open In App

p5.js translate() function

Last Updated : 17 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The translate() function in p5.js is used to specify the amount to displace objects within the display window. The x parameter is used to specify the left/right translation and y parameter is used to specify up/down translation.

Syntax:

translate(x, y, [z])

or

translate(vector)

Parameters: This function accepts three parameters as mentioned above and described below:

  • x: This parameter stores the value of left/right translation.
  • y: This parameter stores the value of up/down translation.
  • z: This parameter stores the value of forward/backward translation.

In another syntax, we can only provide the p5 vector object.

Below programs illustrate the translate() function in p5.js:

Example 1: This example uses translate() function to specify the amount to displace objects.




function setup() {
      
    // Create Canvas of given size
    createCanvas(580, 450);
}
  
function draw() {
      
    // Set the background color
    background(220);
      
    // Fill the color
    fill('lightgreen');
      
    // Set the border weight
    strokeWeight(5);
      
    // Create rectangle
    rect(10, 10, 400, 300);
      
    // Translate the rectangle
    translate(30, 30);
      
    // Create rectangle
    rect(10, 10, 400, 300);
      
    // Translate the rectangle
    translate(30, 30);
      
    // Create rectangle
    rect(10, 10, 400, 300);
}


Output:

Example 2: This example uses translate() function to specify the amount to displace objects within the display window.




function setup() {
      
    // Create Canvas of given size
    createCanvas(580, 450);
}
  
function draw() {
      
    // Set the background color
    background(220);
      
    for(var i=0, j=255; i<255, j>0; i++, j--) {
        fill(i, j, i);
    }
      
    // Set the stroke weight
    strokeWeight(5);
      
    // Use translate function
    translate(width / 2, height / 2);
      
    translate(p5.Vector.fromAngle(millis() / 1000, 200));
      
    // Create rectangle
    rect(10, 10, 40, 30);
}


Output:

Reference: https://p5js.org/reference/#/p5/translate



Previous Article
Next Article

Similar Reads

PHP | ImagickDraw translate() Function
The ImagickDraw::translate() function is an inbuilt function in PHP which is used to apply a translation to the current coordinate system. It applies a translation to the current coordinate system which moves the coordinate system origin to the specified coordinate. Syntax: bool ImagickDraw::translate( $x, $y ) Parameters: This function accepts two
3 min read
CSS translate() Function
The translate() function is an inbuilt function which is used to reposition an element in a horizontal and vertical direction. Syntax: translate( tx ) or translate( tx, ty ) Parameters: tx: This parameter holds the length of translation corresponding to x-axis.ty: This parameter holds the length of translation corresponding to y-axis. If its value
1 min read
D3.js transform.translate() Function
The transform.translate() function in D3.js library is used to get the transformation whose translation tx1 and ty1 is equal to tx0 + tk x and ty0 + tk y, where tx0 and ty0 is the transform’s translation and tk is the transform’s scale. Syntax: transform.translate(x, y) Parameters: This function accepts the following parameter as mentioned above an
2 min read
How To Add Google Translate Button On Your Webpage?
Google Translate is a free multilingual machine translation service developed by Google, to translate text from one language into another. It offers a website interface, mobile apps for Android and iOS, and an API that helps developers build browser extensions and software applications. Google Translate supports over 100 languages at various levels
1 min read
HTML5 translate Attribute
The translate attribute in HTML is used to specify whether the content of an element is translated or not. This attribute is new in HTML5.Supported Tags: It supports all HTML elements. Syntax: &lt;element translate = "yes|no"&gt; Attribute Values: The translate attribute contains two value which are listed below: yes: This attribute is used to spec
1 min read
HTML canvas translate() Method
The HTML canvas translate() Method is used to specify that the object is translated by given translate amount. Syntax: context.translate(x, y) Parameter Values: x: It stores the value, that how much the canvas will move left or right means x-axis wise.y: It stores the value, that how much the canvas will move up and down means y-axis wise. Example
2 min read
How to zoom in on a point using scale and translate ?
You are given a zoom in to particular image by using scale and translate method. In this zooming process, an image should be zoom in from the center of the image. That image has some width and height in case of rectangular shape and has proper dimensions according to the shape of the image. In zoom in process an image get bigger in size as per requ
3 min read
How to translate an image or icon by hovering over it?
Image translation can be an effective way to add a responsive edge to your website. This article will have two sections, the first section will contain the structure for adding the image/icon to the web-page and the second section will contain designing the structure using CSS. Also, to give an idea regarding what this article is about, as soon as
3 min read
Tailwind CSS Translate
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used to translating elements with transform. In CSS, we have done that by using the CSS translate() function. Translate Classes: translate-x-{amount}: This class holds the length of translation corresponding to the x-axis.-translate
1 min read
Explain the scenario to use translate instead of absolute positioning in CSS
In web development, there are several CSS properties that are used to position and manipulate elements on a webpage. Two of the most commonly used properties are translate() and absolute positioning. While both properties can be used to achieve similar results, there are scenarios where one property may be a better option than the other. The purpos
5 min read