# How draw shapes in accordion?

**URL:** <https://discourse.processing.org/t/how-draw-shapes-in-accordion/33249>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [November 2, 2021, 7:05am UTC](https://discourse.processing.org/t/how-draw-shapes-in-accordion/33249 "2021-11-02T07:05:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![yujunah](https://avatars.discourse-cdn.com/v4/letter/y/4bbf92/32.png) [@yujunah](https://discourse.processing.org/u/yujunah)\
**Post date:** [November 2, 2021, 7:05am UTC](https://discourse.processing.org/t/how-draw-shapes-in-accordion/33249/1 "2021-11-02T07:05:35Z")

</div>

import controlP5.\*;

ControlP5 cp5;

Accordion accordion;

color c = color(0, 160, 100);

void setup() {  
size(400, 600);  
noStroke();  
smooth();  
gui();  
}

void gui() {

cp5 = new ControlP5(this);

// group number 1, contains 2 bangs  
Group g1 = cp5.addGroup(“myGroup1”)  
.setBackgroundColor(color(0, 64))  
.setBackgroundHeight(150)  
;

cp5.addBang(“bang”)  
.setPosition(10,20)  
.setSize(100,100)  
.moveTo(g1)  
.plugTo(this,“shuffle”);  
;

// group number 3, contains a bang and a slider  
Group g3 = cp5.addGroup(“myGroup3”)  
.setBackgroundColor(color(0, 64))  
.setBackgroundHeight(150)  
;

cp5.addBang(“shuffle”)  
.setPosition(10,20)  
.setSize(40,50)  
.moveTo(g3)  
;

cp5.addSlider(“hello”)  
.setPosition(60,20)  
.setSize(100,20)  
.setRange(100,500)  
.setValue(100)  
.moveTo(g3)  
;

// create a new accordion  
// add g1, g2, and g3 to the accordion.  
accordion = cp5.addAccordion(“acc”)  
.setPosition(40,40)  
.setWidth(200)  
.addItem(g1)  
.addItem(g3)  
;

accordion.open(0,1,2);

// use Accordion.MULTI to allow multiple group  
// to be open at a time.  
accordion.setCollapseMode(Accordion.MULTI);

// when in SINGLE mode, only 1 accordion  
// group can be open at a time.  
// accordion.setCollapseMode(Accordion.SINGLE);  
}

void shuffle() {  
c = color(random(255),random(255),random(255),random(128,255));  
}

void draw() {  
background(220);

fill(c);

float s1 = cp5.getController(“hello”).getValue();  
ellipse(200,400,s1,s1);

}

How I draw a circle in accordion?  
Please help me…