Visualizing resultant forces

Processing Electronics (Arduino, etc.)
1

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
image.png1306×758 5.02 KB 

 // 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);
      }
    }
  }
1 Like
2
3

You should be working with radians.

https://processing.org/reference/sin_.html
https://processing.org/examples/sine.html
https://processing.org/reference/radians_.html

:slight_smile:

4

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/

  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

2 Likes
5

Thanks a lot! This helped me very much!