# Deforming a shape with increasing values toward the X axis

**URL:** https://discourse.processing.org/t/deforming-a-shape-with-increasing-values-toward-the-x-axis/41959
**Category:** Electronics (Arduino, etc.)
**Created:** [May 10, 2023, 7:10pm UTC](https://discourse.processing.org/t/deforming-a-shape-with-increasing-values-toward-the-x-axis/41959 "2023-05-10T19:10:10Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![michele\_rinaldi](https://avatars.discourse-cdn.com/v4/letter/m/898d66/32.png) [@michele\_rinaldi](https://discourse.processing.org/u/michele_rinaldi)
#### Post date: [May 10, 2023, 7:10pm UTC](https://discourse.processing.org/t/deforming-a-shape-with-increasing-values-toward-the-x-axis/41959/1 "2023-05-10T19:10:10Z")

</div>

Hi all.

I am working on this sketch where I am trying to simulate the inner circles of the tree trunk with a proximity sensor connected to Arduino whose values determine the width of these circles.

I wanted to ask if there is a way to make some points of the shape change as it increases on the X-axis.

So that it is not just a simple "scale\* as in the code example below but that there is a parameter that progressively alters the shape the more you go toward the horizontal direction.

Thank you for your response!

```auto
import processing.serial.*;

int lf = 10; // Linefeed in ASCII
String myString = null;
Serial myPort; // The serial port

int startTime; 

void setup(){
  size(1000,1000);
  background(0);
  stroke(255, 10);
  noFill();
  noLoop();
  
  startTime = millis(); 

  myPort = new Serial(this, "COM4", 9600);
  myString = myPort.readStringUntil(lf);
  myString = null;
}

void draw(){
  while (myPort.available() > 0) 
  {
    myString = myPort.readStringUntil(lf);
    if (myString != null) 
    {
      println(myString);
    
      float centerX = 0;
      float centerY = 0;

      for (int i = 1; i <= 10; i++) {
        pushMatrix();
        scale(float(myString)/20);
        beginShape();
        curveVertex(centerX, centerY);
        curveVertex(centerX, centerY - 50);
        curveVertex(centerX - 30, centerY - 50);
        curveVertex(centerX - 50, centerY);
        curveVertex(centerX - 50, centerY + 50);
        curveVertex(centerX, centerY + 50);
        curveVertex(centerX + 50, centerY + 50);
        curveVertex(centerX + 50, centerY);
        curveVertex(centerX + 25, centerY - 25);
        curveVertex(centerX, centerY);
        endShape(CLOSE); 
        popMatrix();
      }

      if (millis() - startTime > 30000) { 
        background(0); 
        startTime = millis(); 
      }
    }
  }
}

void keyPressed() {
  loop();
}

```

---

<div class="post-metadata">

### Author: ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [May 11, 2023, 8:09pm UTC](https://discourse.processing.org/t/deforming-a-shape-with-increasing-values-toward-the-x-axis/41959/2 "2023-05-11T20:09:00Z")

</div>

Hi @michele_rinaldi, I copied your sketch, and because I don’t know what numbers are coming from your Arduino, I started with 1.0 then \* 1.1 for each loop. It made quite a pleasing pattern.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/c/7cf993d4cd441cf0dec84af0c22472205752f7a7.png)  
Are you able to say in more detail what you want?  
If you could post a version of your sketch with the input numbers as a file or preset array, and no serial, this would let anyone run it.

---

<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: [May 11, 2023, 11:53pm UTC](https://discourse.processing.org/t/deforming-a-shape-with-increasing-values-toward-the-x-axis/41959/3 "2023-05-11T23:53:00Z")

</div>

Hello @michele_rinaldi,

Like this?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/a/cae619e1536b627865e76b91d1db7e04b6f9cbc4.png)

`:)`

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 12, 2023, 7:11am UTC](https://discourse.processing.org/t/deforming-a-shape-with-increasing-values-toward-the-x-axis/41959/4 "2023-05-12T07:11:08Z")

</div>

We can also say scale(x,y); so that we change both axis separately using 2 parameters