INTRODUCTION TO 3D PROCESSING - EXAMPLES
Creating a 3d object (cube) in processing
The following example shows how to create a cube in a 3D environment, using the Processing library with the JAVA programming language. In the image below, within the canvas element belonging to this html page, an application created in processing, which displays a cube in space, in 3D mode, can be executed. In order for the application to run in 3D mode, the display size is defined in the setup() method, as well as the 3D mode, by calling the size() method of processing: so that the camera position is changed:
size(500,500,P3D);
3D display requires lights, which in the most general case are turned on by calling processing's lights() method and the camera by calling the camera() method.
In the animation shown below, the position of the camera is changed by pressing the following keys on the keyboard (keyPressed() event) or by dragging a finger across the screen in the case of a mobile device or tablet (touch events):
In the animation shown below, the position of the camera is changed by pressing the following keys on the keyboard (keyPressed() event) or by dragging a finger across the screen in the case of a mobile device or tablet (touch events):
- decrease the x coordinate ↓ or by swiping your finger across the screen (mobile and tablet)
- increments z coordinate ← or by swiping your finger across the screen (mobile and tablet)
- decrease z coordinate → or by swiping your finger across the screen (mobile and tablet)
- increases the y coordinate 'q' or double tap the screen left (mobile and tablet)
- decrease the y coordinate 'w' or double tap the screen right (mobile and tablet)
- press 'r' to start rotatation of the object
- press 's' to stop rotatation of the object
Animation not working? Please refresh the page
← scroll horizontal →
The code is shown in Figures 1-2
Figure 1: Introduction to 3D processing -code-Main scatch 1
At the beginning of scatch, the variables x, y, z are defined, which represent the position of the camera in space. In order to obtain a 3D image, it is necessary to define the lighting (lights) and the camera. In line 16, in Figure 1, within the draw() method of processing, the camera is defined, by calling processing's method camera(), to which 9 parameters are passed as parameters, the first 3 of which refer to the coordinates of the camera in 3D space. You can see the complete one below keyPressed() method:
Figure 2: Introduction to 3D processing -code-Main scatch 2
Creating custom shapes in Processing. Example: A pyramid with rotation around its axis
3D geometric shapes can be obtained using the vertex(x,y,z) commands that draw a line from the previous one, to a point specified by the x,y and z coordinates that are passed as parameters to the vertex function. This must be found between the calls to: beginShape() ....and... endShape().
In the following example, a pyramid will be constructed in this way, to which a rotation around an axis that passes through the pyramid's points and is normal to its base will be added, which can be seen in the animation below.
In the following example, a pyramid will be constructed in this way, to which a rotation around an axis that passes through the pyramid's points and is normal to its base will be added, which can be seen in the animation below.
Figure 3: Processing 3D: Creating your own shapes on the example of a pyramid, code-1
First, within the main sketch, the variables fi are defined, which represents the angle of rotation of the pyramid, while x, y and z represent the coordinates of the camera position. Inside the setup() method, the frame size is defined, as well as the use of P3D mode for rendering 3D objects.
The pyramid is created within the draw() method so that the base of the pyramid is parallel to the X0Y plane, and the top is on the Z axis. Then it is rotated about the X axis by PI/2, so that the top of the pyramid is at the top. This rotation will also rotate the Z axis by 90, so that its new position will now be at the top of the display, where the negative side of the Y axis was previously.
The second rotation, about the Y axis will rotate the pyramid about its axis by an angle of PI/6+fi radians.
At the beginning of the draw() method, set the background color (background(200)) to light gray, turn on the lighting (lights()), add point lighting( pointLight(155,255,255,-140,160,244)), set the camera (camera(x,y,z,0,0,0,0,1,0)) and translate the coordinate system to the middle of the frame (translate(width/2,height/2,0)). This translation is done in the X0Y plane because the z coordinate of the translation is equal to zero.
The position of the camera can be changed, as the x, y, and z coordinates change, by pressing one of the scroll keys or the 'q' and 'w' keys within the defined keyPressed() method, which can be seen in Figure 5.
The pyramid is created within the draw() method so that the base of the pyramid is parallel to the X0Y plane, and the top is on the Z axis. Then it is rotated about the X axis by PI/2, so that the top of the pyramid is at the top. This rotation will also rotate the Z axis by 90, so that its new position will now be at the top of the display, where the negative side of the Y axis was previously.
The second rotation, about the Y axis will rotate the pyramid about its axis by an angle of PI/6+fi radians.
At the beginning of the draw() method, set the background color (background(200)) to light gray, turn on the lighting (lights()), add point lighting( pointLight(155,255,255,-140,160,244)), set the camera (camera(x,y,z,0,0,0,0,1,0)) and translate the coordinate system to the middle of the frame (translate(width/2,height/2,0)). This translation is done in the X0Y plane because the z coordinate of the translation is equal to zero.
The position of the camera can be changed, as the x, y, and z coordinates change, by pressing one of the scroll keys or the 'q' and 'w' keys within the defined keyPressed() method, which can be seen in Figure 5.
Figure 4: Processing 3D: Creating your own shapes on the example of a pyramid, code-2
In the continuation of the draw() method, we see how, using the vertex() command, contour lines of the pyramid are drawn between points, whose coordinates are sent as parameters of the vertex() method. This is between the beginShape() and endShape(CLOSE) statements. Within these commands, the color of the line is defined with the stroke() command. The "CLOSE" parameter indicates that the contour of the pyramid should be closed at the end, ie. that the polygonal line is not open but ends up connected to the starting point forming a closed contour.
Figure 5: Processing 3D: Creating your own shapes on the example of a pyramid, code-3
|
Previous
|< Circular motion animation in processing |