# Letter boundary offset

**URL:** <https://discourse.processing.org/t/letter-boundary-offset/6976>\
**Category:** Project Guidance\
**Created:** [December 29, 2018, 7:51am UTC](https://discourse.processing.org/t/letter-boundary-offset/6976 "2018-12-29T07:51:00Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [August 19, 2021, 12:50pm UTC](https://discourse.processing.org/t/letter-boundary-offset/6976/5 "2021-08-19T12:50:00Z")

</div>

Use [Processing Geometry Suite](https://discourse.processing.org/t/processing-geometry-suite/29924) to do this easily.

### Offset Style = Bevel

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/97a20ee94f1682e22447fde38f6c14c3ebd1b3d4.png)

### Offset Style = Round

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

### Offset Style = Miter

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

### Animated Code Example

> **Code...**
>
> ```auto
> import micycle.pgs.*;
> 
> PShape letter;
> 
> void setup() {
> size(1000, 1000, FX2D);
> colorMode(HSB, 1, 1, 1, 1);
> letter = createFont(PFont.list()[(int) random(PFont.list().length)], 200, true).getShape('F');
> letter = PGS_Transformation.translateTo(letter, width / 2, height / 2);
> }
> 
> void draw() {
> background(20);
> 
> PShape offsetCurves = PGS_Contour.offsetCurvesOutward(letter, PGS_Contour.OffsetStyle.ROUND, 15 + sin(frameCount*0.02f)*8, 25);
> 
> float hue = 0;
> final float inc = 1f / offsetCurves.getChildCount();
> for (PShape offsetCurve : offsetCurves.getChildren()) {
> offsetCurve.setStroke(color((hue+frameCount*0.01f) % 1, 0.8f, 1, 1));
> offsetCurve.setStrokeWeight(3);
> hue += inc;
> }
> 
> shape(offsetCurves);
> }
> 
> ```

### Bonus

Applying `PGS_Morphology.fieldWarp()` to offset curves.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/babc0c6402962e270e8f4a07beabde25e2ffa2e6.png) ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/40d9ddbd66ea286c2e029a047396719c049db3cb.jpeg)

---

_[View the full topic](https://discourse.processing.org/t/letter-boundary-offset/6976)._