p5.js createSlider() Function

p5.js cylinder() Function

Last Updated : 11 Aug, 2023

The cylinder() function in p5.js is used to draw a cylinder with given radius and height. Syntax:

cylinder( radius, height, detailX, detailY, bottomCap, topCap )

Parameters: The function accepts six parameters as mentioned above and described below:

radius: This parameter stores the radius of the surface.

height: This parameter stores the height of the surface.

detailX: This parameter stores the number of segments in x-dimension.

detailY: This parameter stores the number of segments in y-dimension.

bottomCap: This parameter stores the boolean value whether to draw bottom base of cylinder.

topCap: This parameter stores the boolean value whether to draw top base of cylinder.

Below programs illustrate the cylinder() function in p5.js: Example 1: This example uses cylinder() function to draw a cylinder with given radius and height.

javascript

function setup() {
  
    // Create Canvas of size 600*600
    createCanvas(600, 600, WEBGL);
}
 
function draw() {
    
    // Set background color
    background(200);
   
    // Set fill color of cylinder
    fill('green');
   
    // Call to cylinder function
    cylinder(100, 85, 24, 16, true, false);
}

Output:

Example 2: This example uses cylinder() function to draw a cylinder with given radius and height.

javascript

function setup() {
  
    // Create Canvas of size 600*600
    createCanvas(600, 600, WEBGL);
}
 
function draw() {
    
    // Set background color
    background(200);
   
    // Set fill color of cylinder
    fill('yellow');
   
    // Rotate 
    rotateX(frameCount * 0.01);
    rotate(frameCount*0.03);
   
    // Call to cylinder function
    cylinder(140, 205, 24, 16, true);
}

Output:

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

p5.js createSlider() Function

sarthak_ishu11

Improve

Article Tags :

Similar Reads

p5.js clear() function

The clear() function in p5.js is used to clear the pixels within a buffer. This function only clears the canvas. This function clears everything to make all of the pixels 100% transparent. It can be used to reset the drawing canvas. Syntax: clear() Parameters: This function does not accept any param

p5.js cone() Function

The cone() function in p5.js is used to draw a cone with given radius and height. Syntax: cone( radius, height, detailX, detailY, cap ) Parameters: The function accepts five parameters as mentioned above and described below: radius: This parameter stores the radius of the cone. height: This paramete

p5.js child() Function

The child() function is used to add the element as a child element to the parent element. This function accepts either a string ID, DOM node, or p5.Element. If this function does not contain any parameters then it returns an array of children DOM nodes. Note: This function uses the p5.dom library. S

p5.js createSlider() Function

The createSlider() function in p5.js is used to create a slider (input) element in the DOM (Document Object Model). This function includes the p5.dom library. Add the following syntax in the head section. html <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.mi

p5.js circle() Function

The circle() function is used to draw the circle on the screen. A circle is the closed shape. A circle can be created by using the center and radius of the circle. Syntax: circle(x, y, d) Parameters: x: It is used to set the x-coordinate of the center of the circle. y: It is used to set the y-coordi

p5.js bezier() function

The bezier() function in p5.js is used to draw cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. Syntax: bezier( x1, y1, x2, y2, x3, y3, x4, y4 ) or bezier( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 ) Parameters: The function accepts twelve par

p5.js filter() Function

The filter() function is used to apply filters to the canvas. p5.js has several presets that can be used with different levels of intensity to get the desired effect.Syntax:Â Â filter( filterType, filterParam) Parameters: This function accept two parameters as mentioned above and described below:Â Â f

p5.js draw() Function

The draw() function is called after setup() function. The draw() function is used to executes the code inside the block until the program is stopped or noLoop() is called. If the program does not contain noLoop() function within setup() function then draw() function will still be executed once befor

p5.js ceil() function

The ceil() function in p5.js is used to calculate the ceil value of a number. This function maps to the Math.ceil() of javascript. A number's absolute value is always positive. Syntax ceil(number) Parameters: The function accepts only one parameter as mentioned above and described below: number : Th

p5.js char() function

The char() function in p5.js is used to convert the given string or number value into its corresponding single-character string representation. If the input parameter is a string value then at first it gets converted into its integer equivalent internally after that its single-character string is re