# Transformation d'ECG en image ou son

**URL:** <https://discourse.processing.org/t/transformation-decg-en-image-ou-son/47590>\
**Category:** Coding Questions\
**Created:** [December 4, 2025, 2:30pm UTC](https://discourse.processing.org/t/transformation-decg-en-image-ou-son/47590 "2025-12-04T14:30:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Clem](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@Clem](https://discourse.processing.org/u/Clem)\
**Post date:** [December 4, 2025, 2:30pm UTC](https://discourse.processing.org/t/transformation-decg-en-image-ou-son/47590/1 "2025-12-04T14:30:50Z")

</div>

Est-il possible de créer une images / animation , a parti de données d’ECG (electrocardioramme) grâce au code ? (j’ai un projet artistique dessus je ne sais pas faire de code j’ai besoin d’aide )

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 4, 2025, 3:46pm UTC](https://discourse.processing.org/t/transformation-decg-en-image-ou-son/47590/2 "2025-12-04T15:46:04Z")

</div>

Something like this?

 ![ekg](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/c/1c6f89f2bde4a10b8b194de798427757af86a093.png)

This was created from made up data points and plotted as a drawing and then saved as an image. Or you can plot real ecg data if you have the hardware to capture it:

> **[GitHub - vsquared/ECG\_UNO\_Processing4: Demonstrates using a ‘Processing’ app (v4.x) with...](https://github.com/vsquared/ECG_UNO_Processing4)**
>
> Demonstrates using a ‘Processing’ app (v4.x) with Swing components to display an electrocardiogram generated by an Arduino UNO with an Olimex EKG/EMG Shield.

If you want a simulated ecg something like this should get you started:

```processing
// Fake ECG
int[] ecg = {40, 38, 42, 43, 44, 45, 44, 43, 42, 41,
  40, 40, 40, 40, 40, 39, 42, 43, 60, 80,
  100, 120, 80, 50, 5, 10, 20, 30, 40, 50,
  35, 40, 41, 42, 43, 44, 45, 46, 47, 48,
  49, 50, 51, 51, 50, 49, 48, 45, 42, 40, 40}; // n = 51

int x = 0;
int baseline = 100;

void setup() {
  size (600, 400);
  surface.setTitle("Simulated ECG");
  frameRate(4);
  background(255);
  strokeWeight(3.0);
}

// Draw from bottom of window
void draw() {
  for (int i = 0; i < ecg.length-1; i++) {
    line(x, height - baseline - ecg[i] , x, height - baseline - ecg[i+1]);
    x++;
  }
  if (x >= width) {
    x = 0; // at edge of screen -> back to beginning
    background(255);
  } 
}

```

**Output:**

 ![ecg_sim](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/9/89ac1415c73a2294a59ea80c995710df2c3a31e0.png)

---

<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:** [December 5, 2025, 12:29am UTC](https://discourse.processing.org/t/transformation-decg-en-image-ou-son/47590/3 "2025-12-05T00:29:35Z")

</div>

Bonjour @Clem,

You certainly can create some cool art, images and animation with data.

Some minimal and incomplete code to generate simulated data and plot it over time:

```auto
int counter = 0;

void setup () 
  {
  size(400, 400, P3D);   
  frameRate(60); // Default
  }

void draw () {
  //GLV Testing without serial
  float angle = TWO_PI/360; // this is 1 degree in radians
  
  float xi = counter; // x increments
  counter++; // increment for next draw cycle
 
  // Simulated ECG data
  float sc = 100; // scale
  float xa = xi*angle; // x angle
  float yp = sc*(sin(3*xa - TAU/2) * cos(xa)) + height/2; // y plot value
  
  // Plots data points:
  strokeWeight(5);  
  stroke(0, 0, yp%255);
  point(xi, yp);
    
  // Try modifiying these with the x and y values:

  //stroke(?);
  //line(?, ?, ?, ?);
  
  //fill(?);
  //circle(200, 200, ?);
  
  // polar plot
  //float xr = ?*cos(?);
  //float yr = ?*sin(?);
  //stroke(?);
  //point(?, ?);
  }

```

The above only does a plot:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/b/7b7fbfe4b81291bd74d4f2ac3f35e1435873732b.png)

You can take those same x and y values and create animations with some some artistic flair:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/d/2d974c71aec6e520ab08773c3912ea29ed552051.png)

The data you are using can be read from a file, a static array, serial port, network, etc.).

> [@Clem](#):
>
> j’ai un projet artistique dessus je ne sais pas faire de code j’ai besoin d’aide

Everything you need to start your art project is here in the tutorials, examples and references:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

You will have to add your personal creativity to this.

References:

- [Data and information visualization - Wikipedia](https://en.wikipedia.org/wiki/Data_and_information_visualization)
- [Generative art - Wikipedia](https://en.wikipedia.org/wiki/Generative_art)  
From above link:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/2/325b3a6079681f6fb7e4a5e93f933bc10725687c.png)

Amusez-vous bien !

`:)`

---

<div class="post-metadata">

**Author:** ![Clem](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@Clem](https://discourse.processing.org/u/Clem)\
**Post date:** [December 5, 2025, 10:59am UTC](https://discourse.processing.org/t/transformation-decg-en-image-ou-son/47590/4 "2025-12-05T10:59:04Z")

</div>

Thank you for your response. Actually, I am not supposed to represent an ECG in a figurative way, but rather create an abstract image or abstract animation based on its data. Thank you very much for the reference you sent me.