# How to use transformations to create a stripe pattern

**URL:** https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629
**Category:** Coding Questions
**Tags:** homework
**Created:** [April 25, 2021, 2:30pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629 "2021-04-25T14:30:15Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![anon1](https://avatars.discourse-cdn.com/v4/letter/a/e47774/32.png) [@anon1](https://discourse.processing.org/u/anon1)
#### Post date: [April 25, 2021, 2:30pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629/1 "2021-04-25T14:30:15Z")

</div>

Hello I am new to processing and one of my assigments is to create patterns within processing using push and pop matrix. I decided to try and create somthing simialr to this

 ![stripes](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/91caf449737adf825eeb5bd5593af814871c8671.jpeg) however i’ve been stuck on figuering out how to use transformations to achieve this pattern. I’ve been playing around with for loops and using the vector line() to try and at least get something similare to the stripe pattern which has worked but the main requierment of the assigment is to use transformations to create the pattern.

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 25, 2021, 2:33pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629/2 "2021-04-25T14:33:18Z")

</div>

Hi! Welcome to the forum! Do you want to share your code so we can suggest something?

---

<div class="post-metadata">

### Author: ![anon1](https://avatars.discourse-cdn.com/v4/letter/a/e47774/32.png) [@anon1](https://discourse.processing.org/u/anon1)
#### Post date: [April 25, 2021, 2:41pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629/3 "2021-04-25T14:41:16Z")

</div>

here is my code its not much. when you run it, it just shows a row of lines

```auto
void setup() {
  size(640,640);
  background ( 137, 207, 240);
}

void draw() {

  stroke(255);
  for(int lineX = 1; lineX <= 640; lineX += 10){
    line(lineX, 0, lineX, height);
  }
}

```

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 25, 2021, 3:31pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629/4 "2021-04-25T15:31:02Z")

</div>

don’t worry, it’s good that at least you have something to start with!

so right now you draw line at `lineX`. For the assignment, I guess you have to use `translate`. First thing is to break `line(lineX, 0, lineX, height);` into two operations using `translate` and `line` 🙂

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [April 25, 2021, 3:38pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629/5 "2021-04-25T15:38:01Z")

</div>

[http://learningprocessing.com](http://learningprocessing.com)

```auto
// Exercise 6-6: Rewrite Example 6-9 using a for loop.

void setup() {
  size(255, 255);
}
void draw() {
  background(0);
  // A for loop!
  for (int i = 0; i < width; i+= 10) {
    noStroke();
    float distance = abs(mouseX - i); // The distance between the current rectangle and the mouse is equal to the absolute value of the difference between i and mouseX.
    fill(distance); // That distance is used to fill the color of a rectangle at horizontal location i.
    rect(i, 0, 10, height);
  }
}

```

now as @micuat said you need translate

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [April 25, 2021, 4:05pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629/6 "2021-04-25T16:05:07Z")

</div>

![Untitled 160](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6929ab457b6e1f9acf5b06fde0e41336df1bf91.jpeg)

---

<div class="post-metadata">

### Author: ![anon1](https://avatars.discourse-cdn.com/v4/letter/a/e47774/32.png) [@anon1](https://discourse.processing.org/u/anon1)
#### Post date: [May 3, 2021, 4:22pm UTC](https://discourse.processing.org/t/how-to-use-transformations-to-create-a-stripe-pattern/29629/7 "2021-05-03T16:22:43Z")

</div>

Thanks i think i kinda understand what i have to do : )
