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
  • Shapes
  • How are 3D Shapes drawn?
  • Details
  • Translated Shapes
  1. Reference
  2. Shapes

3D

These pages explain how to use the 3D primitives in the library

PreviousbeginShape()Nextplane()

Last updated 2 years ago

Shapes

To be able to draw in 3D, WEBGL mode needs to be activated on your canvas.

createCanvas(width, height, WEBGL)

How are 3D Shapes drawn?

In WEBGL mode, 3D shapes are constructed using triangular faces. Each face is defined by three vertices that specify a triangular face in space, and each face is assigned a vector that indicates the normal direction of the face (resulting in an upper and a lower face). This enables the face to interact with incoming light and be shaded accurately.

Details

Because a 3D shape like a sphere is constructed from triangular faces, it is not perfectly curved. The level of curvature depends on the number of faces used. In all the functions used to create 3D shapes, there are two optional parameters: detailX and detailY. These parameters specify the number of faces that the shape is divided into in the X or Y direction.

sphere([radius], [detailX], [detailY])
cone([radius], [height], [detailX], [detailY], [cap])

Translated Shapes

Hence, a common block of code in WEBGL mode looks like

push()
translate(100, 0, 0)
sphere(50)
pop()

Methods introduced in this following pages all draw the shapes at the origin (0, 0, 0) by default, and they don't have parameters to specify their position. The common practice is to the origin to where you want to the shape to be drawn, and draw it at that new origin. To not disturb the positions of other shapes, use push() and pop().

Find these documents helpful? Let the people who made them help your child learn to code at !

We'd love to hear your Feedback/Comments .

translate()
Strivemath
here
Cover

plane() - Plane

Cover

box() - box

Cover

sphere() - Sphere

Cover

cone() - Cone

Cover

cylinder() - Cylinder

Cover

ellipsoid() - Deformed Sphere

Cover

torus() - Donut-like Shape

maximum = 24
maximum = 24
maximum = 16
maximum = 24