# How can I stretch individual letters?

**URL:** https://discourse.processing.org/t/how-can-i-stretch-individual-letters/31239
**Category:** Coding Questions
**Created:** [July 13, 2021, 4:30pm UTC](https://discourse.processing.org/t/how-can-i-stretch-individual-letters/31239 "2021-07-13T16:30:54Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![tommyba](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@tommyba](https://discourse.processing.org/u/tommyba)
#### Post date: [July 13, 2021, 4:30pm UTC](https://discourse.processing.org/t/how-can-i-stretch-individual-letters/31239/1 "2021-07-13T16:30:54Z")

</div>

i have this code and i want to, for example, stretch the A to the right and and the rest of the letters get really little like they are being pushed, or stretch the C to both left and right and push the A B to the left and the D E F to the right. I do not want to change the height only the width.

```auto
PGraphics letters;
PGraphics letters2;
PGraphics letters3;
PGraphics letters4;
PGraphics letters5;
PGraphics letters6;

void setup() {
  size(5000, 5000);
   letters = createGraphics(width, height);
   letters2 = createGraphics(width, height);
   letters3 = createGraphics(width, height);
   letters4 = createGraphics(width, height);
   letters5 = createGraphics(width, height);
   letters6 = createGraphics(width, height);
 
}

void draw() {
  
  letters.beginDraw();
  letters.textSize(120);
  letters.text("A", 0, 100);
  letters.endDraw();
  letters2.beginDraw();
  letters2.textSize(120);
  letters2.text("B", 80, 100);
  letters2.endDraw();
  letters3.beginDraw();
  letters3.textSize(120);
  letters3.text("C", 140, 100);
  letters3.endDraw();
  letters4.beginDraw();
  letters4.textSize(120);
  letters4.text("D", 210, 100);
  letters4.endDraw();
  letters5.beginDraw();
  letters5.textSize(120);
  letters5.text("E", 290, 100);
  letters5.endDraw();
  letters6.beginDraw();
  letters6.textSize(120);
  letters6.text("F", 350, 100);
  letters6.endDraw();
  
  image(letters, 0 , 0);
  image(letters2, 0 , 0);
  image(letters3, 0 , 0);
  image(letters4, 0 , 0);
  image(letters5, 0 , 0);
  image(letters6, 0 , 0);
}

```

Thanks in advance! 🙂

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [July 15, 2021, 8:40am UTC](https://discourse.processing.org/t/how-can-i-stretch-individual-letters/31239/2 "2021-07-15T08:40:53Z")

</div>

They way I did it is by creating a PGraphics, using text() to draw the letter, using get() to cut out the part that contains the letter and using resize() to stretch it. It is not the best looking, but you could do some image editing after it is done, like setting all pixels that aren’t black to white, and if you want different colors, just user the color value (R=G=B =\> gray image) and insert it into map function like:  
map( grayValue, 0, 255, red(clr1), red(clr2) and repeat it with green() and blue().

I am not sure this will work but to me, it looks like it.

> **My code**
>
> ```auto
> PImage letter;
> PGraphics c2;
> String ch = "B";
> void setup() {
> size(200, 200);
> textSize(200);
> fill(255);
> textAlign(LEFT,3);
> background(0);
> c2 = createGraphics(width, height);
> c2.beginDraw();
> c2.background(0);
> c2.textSize(200);
> c2.fill(255);
> c2.textAlign(LEFT,3);
> 
> float len = textWidth(ch);
> c2.text(ch, 0, 100);
> c2.endDraw();
> //background(c2);
> letter = c2.get(0, 0, (int)len, (int)textAscent()+(int)textDescent());
> letter.resize(c2.width, c2.height);
> image(letter,0,0);
> }
> void draw() {
> }
> 
> ```

This works for longer texts as well.