# Moving a molecule up and down

**URL:** <https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013>\
**Category:** Libraries\
**Created:** [May 7, 2019, 8:58pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013 "2019-05-07T20:58:58Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![CsabaAlbert](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@CsabaAlbert](https://discourse.processing.org/u/CsabaAlbert)\
**Post date:** [May 7, 2019, 8:58pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/1 "2019-05-07T20:58:58Z")

</div>

I have this water molecule and I wan to move it up and down whit the arow keys. Can someone help me? THX!!  
Here is the code!

```auto
import peasy.*;
PeasyCam cam;
Atom oxigen;
Atom hidrogen1;
void setup(){
 size(600,600,P3D);
 cam=new PeasyCam(this,400);
 oxigen= new Atom(80);
 hidrogen1= new Atom(50);
}
 void draw(){
 background(0);
 lights();
 oxigen.show1();
 translate(75,75);
 hidrogen1.show2();
  translate(-140,0);
 hidrogen1.show2();
  }

and the Class

class Atom{
  float radius;
Atom(float r){
  radius=r;
}
void show1(){
 fill(255, 0, 0);
 noStroke();
 sphere(radius);
 }
void show2(){
 fill(255);
 noStroke();
 sphere(radius);
}

![image|500x500](upload://4gSmeCMt9aCgnShe8btnpSByBPS.png)

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 7, 2019, 9:31pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/2 "2019-05-07T21:31:59Z")

</div>

this should get you started

```auto

import peasy.*;

PeasyCam cam;
Atom oxigen;
Atom hidrogen1;

float x, y; 

void setup() {
  size(600, 600, P3D);
  cam=new PeasyCam(this, 400);
  oxigen= new Atom(80);
  hidrogen1= new Atom(50);
}

void draw() {
  background(0);
  lights();

  translate(x, y); 
  oxigen.show1();
  translate(75, 75);
  hidrogen1.show2();
  translate(-140, 0);
  hidrogen1.show2();
}

// ----------------------------------------------------------------------------

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      x++;
    } else if (keyCode == DOWN) {
      y++;
    }
  } else {
    // ignore
  }
}

// ======================================================================
// and the Class

class Atom {
  float radius;
  Atom(float r) {
    radius=r;
  }
  void show1() {
    fill(255, 0, 0);
    noStroke();
    sphere(radius);
  }
  void show2() {
    fill(255);
    noStroke();
    sphere(radius);
  }
}//class
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 7, 2019, 9:39pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/3 "2019-05-07T21:39:04Z")

</div>

this

```auto
void show1() {
    fill(255, 0, 0);
    noStroke();
    sphere(radius);
  }
  void show2() {
    fill(255);
    noStroke();
    sphere(radius);
  }

```

is not so good because it’s the same, only another color

better make a variable

`color colAtom;`

and use it with `fill(colAtom);`

Similar to

```auto
float radius;

```

it would be defined by the constructor of the class : `colAtom=c;`

---

<div class="post-metadata">

**Author:** ![CsabaAlbert](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@CsabaAlbert](https://discourse.processing.org/u/CsabaAlbert)\
**Post date:** [May 7, 2019, 9:48pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/4 "2019-05-07T21:48:07Z")

</div>

Ohh yeh thx it is easy now THX!!!😁😁😀

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 7, 2019, 9:51pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/5 "2019-05-07T21:51:12Z")

</div>

also this

```auto
  translate(75, 75);
  hidrogen1.show2();
  translate(-140, 0);
  hidrogen1.show2();

```

The values 75,75 and -140,0  
should similar to the color colAtom be stored as x,y in the class.

also you should have 2 hidrogen atoms with different positions

draw should be:

```auto
  oxigen.show();
  hidrogen1.show();
  hidrogen2.show();

```

Chrisir

---

<div class="post-metadata">

**Author:** ![CsabaAlbert](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@CsabaAlbert](https://discourse.processing.org/u/CsabaAlbert)\
**Post date:** [May 7, 2019, 9:57pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/6 "2019-05-07T21:57:10Z")

</div>

yep thx i just started programing whit Classes and constructors I try to understand the basics thx for help!

---

<div class="post-metadata">

**Author:** ![CsabaAlbert](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@CsabaAlbert](https://discourse.processing.org/u/CsabaAlbert)\
**Post date:** [May 7, 2019, 10:10pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/7 "2019-05-07T22:10:23Z")

</div>

I also need to make for multiple molecules a menu and if you press water itt need to appear the water molecule on the screen.Do you have any idea how to make this or can you help me with a link for this kind of menu.I try to find somthing similar but I didn t find nothing like I need …

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 7, 2019, 10:13pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/8 "2019-05-07T22:13:16Z")

</div>

Look at section examples on website and then button

Set an `int state` to 0 before setup() (for indicating to show nothing)

To 1 to indicate to show water (so when a button is pressed, change state to 1 or to 2 etc.). Set state when a button gets pressed.

Evaluate state in draw() with `if`

```auto

if(state==1) {
   show molecule
}
else if(state==2) {
   show molecule
}

```

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [May 7, 2019, 10:19pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/9 "2019-05-07T22:19:17Z")

</div>

Hi @CsabaAlbert to help your topic grab more attention, here are some tips: [Guidelines—Tips on Asking Questions](https://discourse.processing.org/t/guidelines-tips-on-asking-questions/2147) Best of luck on the project:-)

---

<div class="post-metadata">

**Author:** ![CsabaAlbert](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@CsabaAlbert](https://discourse.processing.org/u/CsabaAlbert)\
**Post date:** [May 8, 2019, 5:37pm UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/10 "2019-05-08T17:37:42Z")

</div>

I tried but I can t make to work… i made the menu but i don t know how to write in procesing my ideas … when i press the button named “apa” to show the wather molecule and when i press the second button to show me the second molecule… i know i need to make with if statements but i don t know how can you help me pls?

Here is my code:

```auto
import controlP5.*;
import peasy.*;
color rectColor, circleColor, baseColor;
boolean circleOver = false;
color currentColor;
boolean rectOver = false;

ControlP5 Button;
PeasyCam cam;
Atom oxigen;
Atom hidrogen;
float x, y; 
void setup() {
  size(600, 600, P3D);
  cam=new PeasyCam(this, 400);
  Button=new ControlP5(this);
  oxigen= new Atom(80);
  hidrogen= new Atom(50);
  
  //Button.addButton("Apa (H2O)")
  //.setValue(0)
  //.setPosition(100,100)
  //.setSize(200,19) ;
}

void draw() {
  background(0);
  lights();

  translate(x, y); 
  fill(255,0,0);
  oxigen.show();
  translate(75, 75);
  fill(255);
  hidrogen.show();
  translate(-140, 0);
  hidrogen.show();
}

  void keyPressed() {
  if (key == CODED) {
    if (keyCode == RIGHT) {
      x++;
    } else if (keyCode == LEFT) {
      x--;
    }
      if (keyCode == DOWN) {
      y++;
    } else if (keyCode == UP) {
      y--;
    }
  } else {
  }
}

here is the class:
class Atom{
  float radius;
Atom(float r){
  radius=r;
}

void show(){
 noStroke();
 sphere(radius);
 }

```

and here is the my menu…:

```auto
import controlP5.*;
ControlP5 buton;
void setup() {
  size(400,600);
  buton = new ControlP5(this);
   buton.addButton("Apa")
     .setValue(0)
     .setPosition(100,100)
     .setSize(200,19)
     ;
        buton.addButton("Oxigen")
     .setValue(0)
     .setPosition(100,150)
     .setSize(200,19)
     ;
        buton.addButton("Oxidul Nitric")
     .setValue(0)
     .setPosition(100,200)
     .setSize(200,19)
     ;
        buton.addButton("sulfoxid")
     .setValue(0)
     .setPosition(100,250)
     .setSize(200,19)
     ;
        buton.addButton("Acidhidrocloric")
     .setValue(0)
     .setPosition(100,300)
     .setSize(200,19)
     ;
     }
     
     void draw() {
     
    background(0);
  }

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 9, 2019, 12:49am UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/11 "2019-05-09T00:49:52Z")

</div>

please format your code  
( repair your above 2 posts containing code )  
using in the editor the

```auto
</> code tag

```

what looks like  
```  
type or paste code here  
```

```auto
type or paste code here

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 9, 2019, 9:07am UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/12 "2019-05-09T09:07:06Z")

</div>

the whole last part is just a new sketch and not part of the old sketch

What you have to do is:

- integrate this new sketch into the old one
- look up how to show the buttons in the controlp5 reference
- and look up how to use them when mouse is pressed to change state (what I explained above)
- then eval state in draw() (what I explained above)

I am referring to this:

```auto
//and here is the my menu…:
import controlP5.*;
ControlP5 buton;
void setup() {
  size(400, 600);
  buton = new ControlP5(this);
  buton.addButton("Apa")
    .setValue(0)
    .setPosition(100, 100)
    .setSize(200, 19)
    ;
  buton.addButton("Oxigen")
    .setValue(0)
    .setPosition(100, 150)
    .setSize(200, 19)
    ;
  buton.addButton("Oxidul Nitric")
    .setValue(0)
    .setPosition(100, 200)
    .setSize(200, 19)
    ;
  buton.addButton("sulfoxid")
    .setValue(0)
    .setPosition(100, 250)
    .setSize(200, 19)
    ;
  buton.addButton("Acidhidrocloric")
    .setValue(0)
    .setPosition(100, 300)
    .setSize(200, 19)
    ;
}

void draw() {
  background(0);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 9, 2019, 9:18am UTC](https://discourse.processing.org/t/moving-a-molecule-up-and-down/11013/13 "2019-05-09T09:18:51Z")

</div>

**Remark**

it’s `button` not buton

**Naming cp5 correctly**

When you read the examples of controlp5  
you’d see, this is not correct:  
ControlP5 button;  
instead you want  
ControlP5 cp5;

**Usage of peasyCam with cp5**

For Usage of peasyCam with cp5 see

[http://www.sojamo.de/libraries/controlP5/examples/extra/ControlP5withPeasyCam/ControlP5withPeasyCam.pde](http://www.sojamo.de/libraries/controlP5/examples/extra/ControlP5withPeasyCam/ControlP5withPeasyCam.pde)