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

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 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,where each point in the plane is determined by the distance of the point from the reference point,which is “” called the and the angle which it is making with the reference point , which is “” called the

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

Now, increment the value of variable 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,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 variableand give the spacing of .

Now, increment the spacing variable in draw() and add the variable c to trigonometric formula : and

Let’s change the increment value of spacing variableand polar angle variable ‘ 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 parameter to the to turn it to 3D . Since in WEBGL the origin is in the 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

In the setup(),use the variable art for 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.

To fix this , just add some value ,in our case it’s 200 to x-axis and 200 to y-axis.Now the pattern start to appear in the middle on all the sides.

You can check the here.

CHALLENGE:

Add the map function to the 3D box and take closer look inside.How many patterns can you make ?

Resources:

1-Getting Started with p5.js- A book about programming for in p5.js.

2-p5.js Reference:References for all the p5.js functions.

3-Byte Size Coding :Website with free resources tutorials for kids and beginners.

Doctor , artist ,designer and Computer Science Masterclass Speaker.I am an inquisitive person with a will to learn more.