# Horizon artificial and compass animation

**URL:** <https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [September 24, 2018, 3:43pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794 "2018-09-24T15:43:33Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![zohrahamadene](https://avatars.discourse-cdn.com/v4/letter/z/c6cbf5/32.png) [@zohrahamadene](https://discourse.processing.org/u/zohrahamadene)\
**Post date:** [September 24, 2018, 3:43pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/1 "2018-09-24T15:43:33Z")

</div>

Hi guys, I want to draw an Artificial horizon and a compass by processing can someone tell me how to do that please, I put here a picture of what I want to realize. ![output_aFMRzy](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/54feed82ed7282aaef24c6b790aaf1f32ed305d3.gif)

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [September 24, 2018, 4:03pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/2 "2018-09-24T16:03:59Z")

</div>

Can we see the picture please?

---

<div class="post-metadata">

**Author:** ![zohrahamadene](https://avatars.discourse-cdn.com/v4/letter/z/c6cbf5/32.png) [@zohrahamadene](https://discourse.processing.org/u/zohrahamadene)\
**Post date:** [September 24, 2018, 4:12pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/3 "2018-09-24T16:12:30Z")

</div>

Hi I upoalded the picture you can see it

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [September 24, 2018, 4:16pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/4 "2018-09-24T16:16:05Z")

</div>

Have you got any code so far? Having something to work from will help.

I recommend starting with the circles around both of these as well as the white lines within them.

---

<div class="post-metadata">

**Author:** ![zohrahamadene](https://avatars.discourse-cdn.com/v4/letter/z/c6cbf5/32.png) [@zohrahamadene](https://discourse.processing.org/u/zohrahamadene)\
**Post date:** [September 24, 2018, 4:18pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/5 "2018-09-24T16:18:27Z")

</div>

That’s what I wanted to tell you , I have the code of this animation I found it in a blog but I want to understand how its works step by step I mean how to draw this two instrumnet steb by step I want to realize it , if I give yo the code can you tell me how to draw them begining by circles and colors …ect

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [September 24, 2018, 4:20pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/6 "2018-09-24T16:20:31Z")

</div>

Could we see that code?  
What language is it in?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 24, 2018, 4:24pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/8 "2018-09-24T16:24:45Z")

</div>

Hi zohrahamadene,

It might feel intimidating but you really just need to break it down to elementary pieces and everything will comme together!

Let’s start with the artificial horizon:

- First you have those thin lines in circles. You can see that there is one small then one big then one small and so on. Second it is simply just some stroke arrange in circle and spaced out by the same angle every time.
- Then you have the big green strokes on top of those lines. This time you can use a rectangle fill it in green with a black stroke. Then you just need to rotate it to the proper angle.
- After you have those lines in the middle. One big, one small, and so on. All spaced out the same way.
- …

As you can see every individual piece taken separately is not that complex. Draw them one by one, and forget about the animation for now.

If you get stuck at drawing some specific part come back here with that specific problem and we’ll be happy to help 🙂

---

<div class="post-metadata">

**Author:** ![zohrahamadene](https://avatars.discourse-cdn.com/v4/letter/z/c6cbf5/32.png) [@zohrahamadene](https://discourse.processing.org/u/zohrahamadene)\
**Post date:** [September 24, 2018, 4:28pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/10 "2018-09-24T16:28:34Z")

</div>

Hi jb4x, I’m a beginner in Processing I dont know details about it !

---

<div class="post-metadata">

**Author:** ![zohrahamadene](https://avatars.discourse-cdn.com/v4/letter/z/c6cbf5/32.png) [@zohrahamadene](https://discourse.processing.org/u/zohrahamadene)\
**Post date:** [September 24, 2018, 4:33pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/11 "2018-09-24T16:33:15Z")

</div>

I mean for now I want to learn how to draw cirlce then those lines and colors…

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 24, 2018, 4:39pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/12 "2018-09-24T16:39:05Z")

</div>

And that’s actually an excellent exercice to try and get to know more about Processing!

Try this piece of code for starter:

```auto
void setup() {
  size(500, 500); // Set the size of the canvas
  background(20); // Set the color of the background
  stroke(200); // Set the color of the stroke
  strokeWeight(1); // Set the thickness of the stroke

  float angleStep = HALF_PI / 30; // The angle between two stroke (In this case 30 would be the number of strokes in a quarter of circle
  boolean longStroke = false; // Will be use to draw a short line or a long line

  translate(width/2, height/2); // Translate all the drawing by half the width and half the height to center it 
  for (float angle = 0; angle < TWO_PI; angle += angleStep) { // Looping from an angle of 0 to an angle of 2 PI to draw a full cricle of line
    rotate(angleStep); // Rotate the line that we draw by the angleStep (It is cumulative so the first time it will rotate by angleStep, the second time by 2*angleStep and so on)
    if (longStroke) { // If we need to draw a long line
      line(0, -200, 0, -180); // We draw the long line. Note that it is not drawn where it will end up but just straight above the origin. The rotating is done by the rotate function boferhand and so is the translation with the translate function
    } else { // Otherwise it is a short line
      line(0, -190, 0, -180);
    }
    longStroke = !longStroke; // If we drew a long line we will need to draw a short line after and the other way around
  }
}

```

And now, try to modify it to get the outer white stripes!

---

<div class="post-metadata">

**Author:** ![zohrahamadene](https://avatars.discourse-cdn.com/v4/letter/z/c6cbf5/32.png) [@zohrahamadene](https://discourse.processing.org/u/zohrahamadene)\
**Post date:** [September 24, 2018, 4:40pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/13 "2018-09-24T16:40:51Z")

</div>

Hi jb4x, I wish if you put comments for each line to understand pleaase

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 24, 2018, 4:47pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/14 "2018-09-24T16:47:32Z")

</div>

There you go 🙂

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [September 24, 2018, 4:51pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/16 "2018-09-24T16:51:48Z")

</div>

```auto
void setup() { //Run once at the beginning
  size(500, 500); //Sets the size of the screen
  background(20); //Sets the background color to a dark gray
  stroke(200); //Sets the line/stroke color to a light gray
  strokeWeight(1); //Sets the thickness of the lines/strokes to 1 pixel
  noFill(); //Shapes aren't filled in.

  float angleStep = HALF_PI / 30; //The angle that the programs moves by each time (HALF_PI / 30 radian intervals)
  boolean longStroke = false; //Whether the line drawn is a long one.

  translate(width/2, height/2); // Sets (0, 0) to the middle of the screen
  for (float angle = 0; angle < TWO_PI; angle += angleStep) { //Goes through every angle
    rotate(angleStep); //Rotates the screen by that angle
    if (longStroke) { //If it is a long line
      line(0, -200, 0, -180); //Draw a long line at y: -200
    } else { //If it isn't a long line
      line(0, -190, 0, -180); //Draw a short line at y: -190
    }
    longStroke = !longStroke; //Sets "longStroke" to the opposite of what it is now, so the next one will be the opposite length
  }
}

```

Oh wait @jb4x just did it! 😂  
I guess you get 2 takes on it then…

---

<div class="post-metadata">

**Author:** ![zohrahamadene](https://avatars.discourse-cdn.com/v4/letter/z/c6cbf5/32.png) [@zohrahamadene](https://discourse.processing.org/u/zohrahamadene)\
**Post date:** [September 24, 2018, 4:56pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/17 "2018-09-24T16:56:03Z")

</div>

Here the code of the animation can you please make comments for each line to understand

```auto
import org.firmata.*;
import cc.arduino.*;

//Thanks to Adrian Fernandez for the beta-version
//Modified and updated as per latest IDE by Aritro Mukherjee (April,2016)
//Check the detailed tutorial @ www.hackster.io/Aritro
// Sensor used while demonstration (MPU-6050,6DOF)

import processing.serial.*;
import cc.arduino.*;

int W=1400; //My Laptop's screen width 
int H=700; //My Laptop's screen height 
float Pitch; 
float Bank; 
float Azimuth; 
float ArtificialHoizonMagnificationFactor=0.7; 
float CompassMagnificationFactor=0.85; 
float SpanAngle=120; 
int NumberOfScaleMajorDivisions; 
int NumberOfScaleMinorDivisions; 
PVector v1, v2; 

Serial port;
float Phi; //Dimensional axis
float Theta;
float Psi;

void setup() 
{ 
  size(W, H); 
  rectMode(CENTER); 
  smooth(); 
  strokeCap(SQUARE);//Optional 
  
  println(Serial.list()); //Shows your connected serial ports
  port = new Serial(this, Serial.list()[0], 115200); 
  //Up there you should select port which arduino connected and same baud rate.
  port.bufferUntil('\n'); 
}
void draw() 
{ 
  background(0); 
  translate(W/4, H/2.1);  
  MakeAnglesDependentOnMPU6050(); 
  Horizon(); 
  rotate(-Bank); 
  PitchScale(); 
  Axis(); 
  rotate(Bank); 
  Borders(); 
  Plane(); 
  ShowAngles(); 
  Compass(); 
  ShowAzimuth(); 
}
void serialEvent(Serial port) //Reading the datas by Processing.
{
   String input = port.readStringUntil('\n');
  if(input != null){
   input = trim(input);
  String[] values = split(input, " ");
 if(values.length == 3){
  float phi = float(values[0]);
  float theta = float(values[1]); 
  float psi = float(values[2]); 
  print(phi);
  print(theta);
  println(psi);
  Phi = phi;
  Theta = theta;
  Psi = psi;
   }
  }
}
void MakeAnglesDependentOnMPU6050() 
{ 
  Bank =-Phi/5; 
  Pitch=Theta*10; 
  Azimuth=Psi;
}
void Horizon() 
{ 
  scale(ArtificialHoizonMagnificationFactor); 
  noStroke(); 
  fill(0, 180, 255); 
  rect(0, -100, 900, 1000); 
  fill(95, 55, 40); 
  rotate(-Bank); 
  rect(0, 400+Pitch, 900, 800); 
  rotate(Bank); 
  rotate(-PI-PI/6); 
  SpanAngle=120; 
  NumberOfScaleMajorDivisions=12; 
  NumberOfScaleMinorDivisions=24;  
  CircularScale(); 
  rotate(PI+PI/6); 
  rotate(-PI/6);  
  CircularScale(); 
  rotate(PI/6); 
}
void ShowAzimuth() 
{ 
  fill(50); 
  noStroke(); 
  rect(20, 470, 440, 50); 
  int Azimuth1=round(Azimuth); 
  textAlign(CORNER); 
  textSize(35); 
  fill(255); 
  text("Azimuth: "+Azimuth1+" Deg", 80, 477, 500, 60); 
  textSize(40);
  fill(25,25,150);
  text("FLIGHT SIMULATOR", -350, 477, 500, 60); 
}
void Compass() 
{ 
  translate(2*W/3, 0); 
  scale(CompassMagnificationFactor); 
  noFill(); 
  stroke(100); 
  strokeWeight(80); 
  ellipse(0, 0, 750, 750); 
  strokeWeight(50); 
  stroke(50); 
  fill(0, 0, 40); 
  ellipse(0, 0, 610, 610); 
  for (int k=255;k>0;k=k-5) 
  { 
    noStroke(); 
    fill(0, 0, 255-k); 
    ellipse(0, 0, 2*k, 2*k); 
  } 
  strokeWeight(20); 
  NumberOfScaleMajorDivisions=18; 
  NumberOfScaleMinorDivisions=36;  
  SpanAngle=180; 
  CircularScale(); 
  rotate(PI); 
  SpanAngle=180; 
  CircularScale(); 
  rotate(-PI); 
  fill(255); 
  textSize(60); 
  textAlign(CENTER); 
  text("W", -375, 0, 100, 80); 
  text("E", 370, 0, 100, 80); 
  text("N", 0, -365, 100, 80); 
  text("S", 0, 375, 100, 80); 
  textSize(30); 
  text("COMPASS", 0, -130, 500, 80); 
  rotate(PI/4); 
  textSize(40); 
  text("NW", -370, 0, 100, 50); 
  text("SE", 365, 0, 100, 50); 
  text("NE", 0, -355, 100, 50); 
  text("SW", 0, 365, 100, 50); 
  rotate(-PI/4); 
  CompassPointer(); 
}
void CompassPointer() 
{ 
  rotate(PI+radians(Azimuth));  
  stroke(0); 
  strokeWeight(4); 
  fill(100, 255, 100); 
  triangle(-20, -210, 20, -210, 0, 270); 
  triangle(-15, 210, 15, 210, 0, 270); 
  ellipse(0, 0, 45, 45);   
  fill(0, 0, 50); 
  noStroke(); 
  ellipse(0, 0, 10, 10); 
  triangle(-20, -213, 20, -213, 0, -190); 
  triangle(-15, -215, 15, -215, 0, -200); 
  rotate(-PI-radians(Azimuth)); 
}
void Plane() 
{ 
  fill(0); 
  strokeWeight(1); 
  stroke(0, 255, 0); 
  triangle(-20, 0, 20, 0, 0, 25); 
  rect(110, 0, 140, 20); 
  rect(-110, 0, 140, 20); 
}
void CircularScale() 
{ 
  float GaugeWidth=800;  
  textSize(GaugeWidth/30); 
  float StrokeWidth=1; 
  float an; 
  float DivxPhasorCloser; 
  float DivxPhasorDistal; 
  float DivyPhasorCloser; 
  float DivyPhasorDistal; 
  strokeWeight(2*StrokeWidth); 
  stroke(255);
  float DivCloserPhasorLenght=GaugeWidth/2-GaugeWidth/9-StrokeWidth; 
  float DivDistalPhasorLenght=GaugeWidth/2-GaugeWidth/7.5-StrokeWidth;
  for (int Division=0;Division<NumberOfScaleMinorDivisions+1;Division++) 
  { 
    an=SpanAngle/2+Division*SpanAngle/NumberOfScaleMinorDivisions;  
    DivxPhasorCloser=DivCloserPhasorLenght*cos(radians(an)); 
    DivxPhasorDistal=DivDistalPhasorLenght*cos(radians(an)); 
    DivyPhasorCloser=DivCloserPhasorLenght*sin(radians(an)); 
    DivyPhasorDistal=DivDistalPhasorLenght*sin(radians(an));   
    line(DivxPhasorCloser, DivyPhasorCloser, DivxPhasorDistal, DivyPhasorDistal); 
  }
  DivCloserPhasorLenght=GaugeWidth/2-GaugeWidth/10-StrokeWidth; 
  DivDistalPhasorLenght=GaugeWidth/2-GaugeWidth/7.4-StrokeWidth;
  for (int Division=0;Division<NumberOfScaleMajorDivisions+1;Division++) 
  { 
    an=SpanAngle/2+Division*SpanAngle/NumberOfScaleMajorDivisions;  
    DivxPhasorCloser=DivCloserPhasorLenght*cos(radians(an)); 
    DivxPhasorDistal=DivDistalPhasorLenght*cos(radians(an)); 
    DivyPhasorCloser=DivCloserPhasorLenght*sin(radians(an)); 
    DivyPhasorDistal=DivDistalPhasorLenght*sin(radians(an)); 
    if (Division==NumberOfScaleMajorDivisions/2|Division==0|Division==NumberOfScaleMajorDivisions) 
    { 
      strokeWeight(15); 
      stroke(0); 
      line(DivxPhasorCloser, DivyPhasorCloser, DivxPhasorDistal, DivyPhasorDistal); 
      strokeWeight(8); 
      stroke(100, 255, 100); 
      line(DivxPhasorCloser, DivyPhasorCloser, DivxPhasorDistal, DivyPhasorDistal); 
    } 
    else 
    { 
      strokeWeight(3); 
      stroke(255); 
      line(DivxPhasorCloser, DivyPhasorCloser, DivxPhasorDistal, DivyPhasorDistal); 
    } 
  } 
}
void Axis() 
{ 
  stroke(255, 0, 0); 
  strokeWeight(3); 
  line(-115, 0, 115, 0); 
  line(0, 280, 0, -280); 
  fill(100, 255, 100); 
  stroke(0); 
  triangle(0, -285, -10, -255, 10, -255); 
  triangle(0, 285, -10, 255, 10, 255); 
}
void ShowAngles() 
{ 
  textSize(30); 
  fill(50); 
  noStroke(); 
  rect(-150, 400, 280, 40); 
  rect(150, 400, 280, 40); 
  fill(255); 
  Pitch=Pitch/5; 
  int Pitch1=round(Pitch);  
  text("Pitch: "+Pitch1+" Deg", -20, 411, 500, 60); 
  text("Bank: "+Bank*100+" Deg", 280, 411, 500, 60); 
}
void Borders() 
{ 
  noFill(); 
  stroke(0); 
  strokeWeight(400); 
  rect(0, 0, 1100, 1100); 
  strokeWeight(200); 
  ellipse(0, 0, 1000, 1000); 
  fill(0); 
  noStroke(); 
  rect(4*W/5, 0, W, 2*H); 
  rect(-4*W/5, 0, W, 2*H); 
}
void PitchScale() 
{  
  stroke(255); 
  fill(255); 
  strokeWeight(3); 
  textSize(24); 
  textAlign(CENTER); 
  for (int i=-4;i<5;i++) 
  {  
    if ((i==0)==false) 
    { 
      line(110, 50*i, -110, 50*i); 
    }  
    text(""+i*10, 140, 50*i, 100, 30); 
    text(""+i*10, -140, 50*i, 100, 30); 
  } 
  textAlign(CORNER); 
  strokeWeight(2); 
  for (int i=-9;i<10;i++) 
  {  
    if ((i==0)==false) 
    {    
      line(25, 25*i, -25, 25*i); 
    } 
  } 
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 25, 2018, 7:26pm UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/18 "2018-09-25T19:26:27Z")

</div>

> [@zohrahamadene](#):
>
> [Aritro Mukherjee - Hackster.io](http://www.hackster.io/Aritro)

@zohrahamadene – I see that you posted the code several times, but as a new user posting code that contained a web link (to `hackster.io/Aritro`) the spam filter thought that you were a spammer. I have restored the last version of your source code post.

---

<div class="post-metadata">

**Author:** ![pourya1368](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@pourya1368](https://discourse.processing.org/u/pourya1368)\
**Post date:** [September 1, 2020, 6:37am UTC](https://discourse.processing.org/t/horizon-artificial-and-compass-animation/3794/19 "2020-09-01T06:37:39Z")

</div>

Hi Zora. how can I use your code for ADXL345?

Arduino Code:

````auto
 // Low-pass filter
  Phi = 0.94 * rollF + 0.06 * roll;
  Theta = 0.94 * pitchF + 0.06 * pitch;
  Psi = (Phi+Theta)/2;

            Serial.print(Phi);
            Serial.print("/");
            Serial.print(Theta);
            Serial.print("/");
            Serial.println(Psi);```
````