Moving a molecule up and down

Processing Libraries
#1

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!

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)
#2

this should get you started


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
//
2 Likes
#3

this

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

float radius;

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

1 Like
#4

Ohh yeh thx it is easy now THX!!!:grin::grin::grinning:

#5

also this

  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:

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

Chrisir

#6

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

#7

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 …

#8

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


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

Hi @CsabaAlbert to help your topic grab more attention, here are some tips: Guidelines—Tips on Asking Questions Best of luck on the project:-)

#10

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:

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…:

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);
  }
1 Like
#11

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

</> code tag

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

type or paste code here
#12

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:

//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);
}
#13

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

1 Like