# Trying to convert a basic grow shrink sketch from processing to p5.js

**URL:** <https://discourse.processing.org/t/trying-to-convert-a-basic-grow-shrink-sketch-from-processing-to-p5-js/23389>\
**Category:** Coding Questions\
**Created:** [August 20, 2020, 1:51pm UTC](https://discourse.processing.org/t/trying-to-convert-a-basic-grow-shrink-sketch-from-processing-to-p5-js/23389 "2020-08-20T13:51:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BackTo](https://avatars.discourse-cdn.com/v4/letter/b/34f0e0/32.png) [@BackTo](https://discourse.processing.org/u/BackTo)\
**Post date:** [August 20, 2020, 1:51pm UTC](https://discourse.processing.org/t/trying-to-convert-a-basic-grow-shrink-sketch-from-processing-to-p5-js/23389/1 "2020-08-20T13:51:43Z")

</div>

Hi, I’m trying to convert a processing 3 sketch that works to a p5.js and I can’t wrap my head around what the changes are or where to find a translation guide. I think if I can crack this conversion I’ll be able to do most of my coding in p5.js. The lump of code is the processing sketch I’m trying to convert. It makes a circle grow and shrink.

```auto
Ball myBall;
  boolean grow =true;
  boolean button =false;
void setup(){
  size(400,400);
     myBall = new Ball(color(255, 0,0));
  
}

void draw(){
background(255);
 myBall.GrowBall();
  myBall.dispBall();
  myBall.shrink();
  
}

//----class----
class Ball{
 float pX;
 float pY;
 float bSize; 
  color c;
  float addSize=1;
  float ballMax= 100;
  float ballMin =10;
  Ball( color tempC){
    bSize=10;
    c = tempC;

  }
  void dispBall(){
  
  pX = 200;
  pY = 200;
   
  noStroke();
fill(c);
  circle(pX, pY, bSize);
     bSize= +addSize;
  }
  
    void GrowBall(){
        //grow shrink boolean switch
     if (grow==true){
        addSize= addSize+0.5;
      }else {
         addSize = addSize-0.5;
       }
        
     //-----condionals
    bSize = constrain(bSize, 10, 100);
     // addSize = constrain(addSize, 10, 100);
    }//grow
      
 void shrink(){
   if(bSize==100){ // when size is 100 switch the boolean value to it's opposite
       grow=!grow;
     }
     if(bSize==10){
      grow=true; //when 10 grow the circle
     }
    }
}

```

Thanks for any and all help.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 20, 2020, 2:22pm UTC](https://discourse.processing.org/t/trying-to-convert-a-basic-grow-shrink-sketch-from-processing-to-p5-js/23389/2 "2020-08-20T14:22:01Z")

</div>

This is how we define a class in JS:

> **[class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)**
>
> The class declaration creates a new class with a given name using prototype-based inheritance.

Look at the sketches “Clickable Spawning Balls” & “Ball in the Chamber” for both Java Mode & p5.js on the link below:

> **[r/processing - OpenProcessing: converting code written in Java to JavaScript](https://www.reddit.com/r/processing/comments/7dqqvh/openprocessing_converting_code_written_in_java_to/dq0ecac/)**
>
> 8 votes and 14 comments so far on Reddit

More Java Mode to p5js conversion tips below:

- [GitHub.com/processing/p5.js/wiki/Processing-transition](http://GitHub.com/processing/p5.js/wiki/Processing-transition)

---

<div class="post-metadata">

**Author:** ![BackTo](https://avatars.discourse-cdn.com/v4/letter/b/34f0e0/32.png) [@BackTo](https://discourse.processing.org/u/BackTo)\
**Post date:** [August 20, 2020, 5:12pm UTC](https://discourse.processing.org/t/trying-to-convert-a-basic-grow-shrink-sketch-from-processing-to-p5-js/23389/3 "2020-08-20T17:12:06Z")

</div>

Thanks. I think this will help with my issues. I really need a step by step conversion process. I will be able to work it out from this though. And I can write my own conversion tutorial for bits that I found difficult to follow or understand. Cheers!!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 20, 2020, 6:13pm UTC](https://discourse.processing.org/t/trying-to-convert-a-basic-grow-shrink-sketch-from-processing-to-p5-js/23389/4 "2020-08-20T18:13:49Z")

</div>

Hello,

I was working through a similar experience with a member here:

> [@Translate Processing sketch into P5 issue](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344):
>
> HI, im trying to translate this processing sketch into P5, P5 is currently unable to give me an error that I can understand. below I posted the original processing sketch, and my wild guess on p5. P5: class CubeClass { constructor (x, y, z, on, col1, col2, col3) { this.x = xpos; this.y = ypos; this.z = zpos; this.col1 = colOne; this.col2 = colTwo; this.col3 = colTre; } update() { if(oN){ push(); translate(xpos,ypos,zpos); beginShape(QUADS); fill(colors[colOne…

You may be able to glean some insight and tips from that also.

I am new to P5.js also and always manage to work out a solution.

It was useful for me to also go through the resources and examples here:

> **[home | p5.js](https://p5js.org/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

And related content on the Coding Train in YouTube; a search will get you there.

`:)`

---

<div class="post-metadata">

**Author:** ![BackTo](https://avatars.discourse-cdn.com/v4/letter/b/34f0e0/32.png) [@BackTo](https://discourse.processing.org/u/BackTo)\
**Post date:** [August 24, 2020, 12:26pm UTC](https://discourse.processing.org/t/trying-to-convert-a-basic-grow-shrink-sketch-from-processing-to-p5-js/23389/5 "2020-08-24T12:26:31Z")

</div>

Hi cheers for the constant help. I’ve decided to leave p5.js alone for now, as there is so much stuff I don’t yet know how to do in vanillia processing and I’m working from a book using it. I’ll come back to p5.js eventually. When I have a better grasp of the concepts in processing in general.  
The link and coding train stuff you provided will help a lot with that!  
Thanks!