Creating 2D texture on a 3D shape in p5.js.

5 min readMay 17, 2019

It’s a very mesmerising way to give a dynamic 2D texture to the 3D object . It can be simple sketch to a very sophisticated design pattern using simple programming in p5.js.

Let’s get started .Create a new project using p5.js Web Editor. A new project in the p5js Web Editor has following two functions. The setup() function runs only once and draw() function runs in a loop.

Making a 2D Radial Pattern:

For making the radial pattern , we will use the Polar coordinates(r,a) and convert them to Cartesian coordinates(x,y) .

What are polar coordinates?

The polar coordinates are two dimensional coordinates system ,where each point in the plane is determined by the distance of the point from the reference point,which is “r” called the radial coordinate and the angle which it is making with the reference point , which is “a” called the polar angle.

For making a radial pattern , make two variables one for radial coordinate r ,give it a value of 10 and other for polar angle a,give it value of 0.

Now, increment the value of variable a in the function draw()

In graphics, to calculate the Polar coordinates(r , a) ,it needs to be converted to Cartesian coordinates (x , y). And for that we will use trigonometry.

Put the x and y variables in the ellipse() function.The circle appeared but its at the (0,0) position .

To fix this,translate()function is used ,to translate it (200,200). Now the circle , starts to appear in the centre of the canvas and its rotating .But, they are not forming the radial pattern because the background is continuously gets drawn and clearing the circles.

To make the pattern appear, lets move the background from function draw() to setup().Now ,the pattern start to appear,but they are close together. To make some space between them ,let’s make a variable c and give the spacing of 20.

Now, increment the spacing variable c in draw() and add the variable c to trigonometric formula : x=r+c*cos(a) and y=r+c*sin(a).

Let’s change the increment value of spacing variable ‘c’ and polar angle variable ‘a’ see the change in the patterns.

Try , putting the different variables in the fill() and see the colour change.

Combining 3D with 2D :

The next step is to add the WEBGL parameter to the createCanvas()to turn it to 3D . Since in WEBGL the origin is in the centre rather than top left hand corner ,so translate() is no longer required. Our 2D code it needs to be in the push() and pop().This will contain the code from getting affected by any other code .

As we run the code, the pattern is still appearing in the centre.

Make a 3D box and put the code for it inside another push() and the pop().

Now, make another angle variable for 3D box and increment in the draw().Use the variable in the rotateX, rotateY and rotateZ.

Since the background() is in the setup(), the box starts to smudge.Not good !!.Because in 3D the background needs to be in the draw().

Let’s bring back the background in draw().There its fixed,but the 2D pattern starts to disappear like before.

To fix that,first make a variable,let’s call it art.You can call it anything you like.

In the setup(),use the variable art for createGraphics(width,height) to be used in other places.

Now ,add the variable art to the ellipse() and its properties like fill() or stroke().

Finally , since the 3D box does not have any colour or texture , let’s give it a texture() and give the variable art into it as a parameter. Yay!! ,the 2D pattern starts to appear on it.But ,it still appearing from the corners.