# Visualizing resultant forces

**URL:** <https://discourse.processing.org/t/visualizing-resultant-forces/12423>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [July 1, 2019, 12:40pm UTC](https://discourse.processing.org/t/visualizing-resultant-forces/12423 "2019-07-01T12:40:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ele](https://avatars.discourse-cdn.com/v4/letter/e/e9a140/32.png) [@ele](https://discourse.processing.org/u/ele)\
**Post date:** [July 1, 2019, 12:40pm UTC](https://discourse.processing.org/t/visualizing-resultant-forces/12423/1 "2019-07-01T12:40:40Z")

</div>

Hello!

I am trying to create a visualizer that shows the resultant force of three forces each angeled at 60 degrees from eachother. However - something is off, and I would love to get some help.

The forces are values coming from three force sensors hooked up to a arduino.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/077cc4e9bad551e8b9ad9aaea9a67e35ff566563.png)

```auto
 // This example code is in the public domain.

  import processing.serial.*;

  float redValue = 0; // red value
  float greenValue = 0; // green value
  float blueValue = 0; // blue value

// float x = greenValue*cos(30)-redValue*cos(30);
// float y = greenValue*cos(150) + redValue*cos(150);
// float r = sqrt(pow(x,2)+ pow(y,2));
// float theta = acos((x/r)*(180/PI));

  Serial myPort;

  void setup() {
    size(2000, 2000);

    // List all the available serial ports
    // if using Processing 2.1 or later, use Serial.printArray()
    printArray(Serial.list());

    // I know that the first port in the serial list on my Mac is always my
    // Arduino, so I open Serial.list()[0].
    // Open whatever port is the one you're using.
    myPort = new Serial(this, Serial.list()[0], 9600);
    // don't generate a serialEvent() unless you get a newline character:
    myPort.bufferUntil('\n');
  }

  void draw() {
    // set the background color with the color values:
    background(redValue, greenValue, blueValue);
    rect(20,20,40,redValue);
    rect(60,20,40,greenValue);
    rect(100,20,40,blueValue);
    
    line(500,500,500-redValue*cos(150)+greenValue*cos(30), 500+redValue*sin(150)+greenValue*sin(30)+blueValue);
    
    
    line(1000,500,1000-redValue*cos(150),500+redValue*sin(150));
    line(750,500,750-greenValue*cos(60),500+greenValue*sin(30));
    line(1250,500,1250,500+blueValue);
    strokeWeight(10);
    stroke(255),
  }

  void serialEvent(Serial myPort) {
    // get the ASCII string:
    String inString = myPort.readStringUntil('\n');

    if (inString != null) {
      // trim off any whitespace:
      inString = trim(inString);
      // split the string on the commas and convert the resulting substrings
      // into an integer array:
      float[] colors = float(split(inString, ","));
      // if the array has at least three elements, you know you got the whole
      // thing. Put the numbers in the color variables:
      if (colors.length >= 3) {
        // map them to the range 0-255:
        redValue = map(colors[0], 0, 1023, 0, 255);
        greenValue = map(colors[1], 0, 1023, 0, 255);
        blueValue = map(colors[2], 0, 1023, 0, 255);
      }
    }
  }

```

---

<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:** [July 1, 2019, 1:27pm UTC](https://discourse.processing.org/t/visualizing-resultant-forces/12423/2 "2019-07-01T13:27:43Z")

</div>

> [@Using two different readStringUntil "characters"](https://discourse.processing.org/t/using-two-different-readstringuntil-characters/10769/23):
>
> Now that it seems all’s been sorted out, how about some optimization? The range [-10 to 10] is so small (5-bit) that it comfortably fits in a byte (8-bit). So, rather than send those 2 small values as TSV, w/ lotsa extra separator characters, we can simply send 2 bytes only using Serial.write(): [https://www.Arduino.cc/reference/en/language/functions/communication/serial/write/](https://www.Arduino.cc/reference/en/language/functions/communication/serial/write/) We just need to create a char array of length = 2: signed char xy[2]; #define BAUDS 115200 #define DELAY 10 #define…

---

<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:** [July 2, 2019, 1:04am UTC](https://discourse.processing.org/t/visualizing-resultant-forces/12423/3 "2019-07-02T01:04:41Z")

</div>

You should be working with radians.

[https://processing.org/reference/sin\_.html](https://processing.org/reference/sin_.html)  
[https://processing.org/examples/sine.html](https://processing.org/examples/sine.html)  
[https://processing.org/reference/radians\_.html](https://processing.org/reference/radians_.html)

🙂

---

<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:** [July 2, 2019, 1:56am UTC](https://discourse.processing.org/t/visualizing-resultant-forces/12423/4 "2019-07-02T01:56:18Z")

</div>

A simple example with two forces; one force would have been too simple.  
You can add them up to see if things are in check.

I prefer to use vectors but wanted to keep this simple.  
[https://processing.org/tutorials/pvector/](https://processing.org/tutorials/pvector/)

```auto
  float redValue = 255; // red value
  float greenValue = 255; // green value

  void setup()
    {
    size(400, 400);
    }

  void draw() 
    {
    background(0);
   
    float redX = redValue*cos(0);
    float redY = redValue*sin(0);
    
    float greenX = greenValue*cos(radians(+120));
    float greenY = greenValue*sin(radians(+120));
    
    strokeWeight(20);
    
  pushMatrix();
    translate(width/6, height/6);
    stroke (255, 0, 0);
    line(0, 0, redX, redY);
    stroke (0, 255, 0);
    line(redX, redY, redX + greenX, redY + greenY);
    stroke (255, 255, 255);
    line (0, 0, redX + greenX, redY + greenY);
  popMatrix();
  }

```

White is the sum of green and red forces:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/31c95a67b6c1e0446e9b84901402ce20fc3fbbc1.png)

---

<div class="post-metadata">

**Author:** ![ele](https://avatars.discourse-cdn.com/v4/letter/e/e9a140/32.png) [@ele](https://discourse.processing.org/u/ele)\
**Post date:** [July 2, 2019, 7:40am UTC](https://discourse.processing.org/t/visualizing-resultant-forces/12423/5 "2019-07-02T07:40:27Z")

</div>

Thanks a lot! This helped me very much!