# Sketching pattern

**URL:** https://discourse.processing.org/t/sketching-pattern/1421
**Category:** Processing
**Created:** [July 1, 2018, 9:09pm UTC](https://discourse.processing.org/t/sketching-pattern/1421 "2018-07-01T21:09:18Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![NancyBecky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nancybecky/32/636_2.png) [@NancyBecky](https://discourse.processing.org/u/NancyBecky)
#### Post date: [July 1, 2018, 9:09pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/1 "2018-07-01T21:09:18Z")

</div>

![artistic-geometric-pattern-texture-random-lines-monochrom-monochrome-abstract-background-royalty-free-vector-illustration-82316388](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/3b07bdd36170eb3d99cc36c8b9f67895b09d828b.jpg)

Hi Friends,

I am new to this forum. I am curious to learn programming and I started learning it. I’m trying to write a code based on the image attached. Can anyone help me to reproduce this image?

---

<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: [July 1, 2018, 9:13pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/2 "2018-07-01T21:13:02Z")

</div>

Please analyze the image? What do you recognize? Is there a basic shape?

In which form is it placed?

Look at for loop, translate, rotate

---

<div class="post-metadata">

### Author: ![NancyBecky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nancybecky/32/636_2.png) [@NancyBecky](https://discourse.processing.org/u/NancyBecky)
#### Post date: [July 2, 2018, 5:21pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/3 "2018-07-02T17:21:02Z")

</div>

Thanks for your reply. The basic shape is Arcs of non-zero curvature.  
I have no idea about the coding part for reproducing this image. Could you please help me with the coding part?

Regards  
Nancy

---

<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: [July 2, 2018, 5:40pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/4 "2018-07-02T17:40:37Z")

</div>

To make this basic shape:

See:

[https://processing.org/examples/bezier.html](https://processing.org/examples/bezier.html)

Work from here using for loop to draw multiple items of it in a row or grid

---

<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: [July 2, 2018, 5:44pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/5 "2018-07-02T17:44:15Z")

</div>

Change and play with the code, remove the mouse stuff and make the basic shape alone first please

Post your entire code then.

Thank you

(The idea in this forum is that we help and you write the code)

---

<div class="post-metadata">

### Author: ![NancyBecky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nancybecky/32/636_2.png) [@NancyBecky](https://discourse.processing.org/u/NancyBecky)
#### Post date: [July 2, 2018, 10:06pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/6 "2018-07-02T22:06:19Z")

</div>

Thanks a lot. This will really helpful to improve myself. I mange to make the basic shape. But I am not able to do the loop part.  
Please note that I dont have much knowledge in programming. Please excuse  
void setup() {  
size(640, 360);  
stroke(255);  
noFill();  
}

void draw() {  
background(0);  
for (int i = 0; i \< 10; i += 10) {  
bezier(300+(i/2.0), 140+i, 810, 200, 440, 200, 300-(i/16.0), 200+(i/8.0));  
}  
}

---

<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: [July 2, 2018, 10:56pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/7 "2018-07-02T22:56:59Z")

</div>

Well done

Good progress here!

Now make a loop around the one you got

Use translate(25,0);

look at rotate (which is in radians)

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [July 2, 2018, 11:14pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/8 "2018-07-02T23:14:42Z")

</div>

This next is probly a bit much but hopefully it shows you what you need.

Keep the reference handy: [https://processing.org/reference/](https://processing.org/reference/)

Important to check this tutorial: [https://processing.org/tutorials/transform2d/](https://processing.org/tutorials/transform2d/)

Lastly, I used points for this demo. You could use benzier if you have figure out your points to trace the benzier. The curve you are building is based on a parabola. You should check this (go to the equation section): [https://www.mathsisfun.com/geometry/parabola.html](https://www.mathsisfun.com/geometry/parabola.html)

In plain words, your equation is `y=A*x^2` or written more explicitely, `y=A*x*x`. In this example, I set the amplitude A to 1. I am drawing the parabola from a range defined by `[-pg.width/2 .. pg.width/2]` (Notice the negative sign). I draw a point every 0.1 pixels (in the for loop, `x=x+0.1`).

I hope this helps.

Kf

```java

PGraphics pg;
void setup() {
  size(640, 360);
  stroke(255);
  noFill();
  rectMode(CENTER);
  imageMode(CENTER);

  //Create main pattern
  pg=createGraphics(100, 100);
  float amplitude=1;//pg.height/4;
  pg.beginDraw();
  ////Move position reference from top-let corner to the center of this pgraphics object
  pg.translate(pg.width/2, pg.height/2);  
  //pg.background(0, 250, 2); //Do not call this. Instead, the pgraphics' background will be transparent
  pg.stroke(255); //Make any lines or dots white
  for (float x= -pg.width/2; x<pg.width/2; x=x+0.1)
    pg.point(x, amplitude*x*x);
  pg.endDraw();
}

void draw() {
  background(0);
  translate(width/2, height/2);  

  //for (int i = 0; i < 10; i += 10) {
  // bezier(300+(i/2.0), 140+i, 810, 200, 440, 200, 300-(i/16.0), 200+(i/8.0));
  //}

  stroke(255, 0, 0);
  rect(0, 0, pg.width, pg.height); //HELPER frame
  image(pg, 0, 0);
  
  translate(0,100); //Shift down 100 units
  rotate(radians(45)); //Rotation, units in degrees, clock wise
  //rect(0, 0, pg.width, pg.height); //HELPER frame
  image(pg, 0, 0);
  
  translate(-100,0); //Shift left based on previous position (100 down)
  rotate(radians(45)); //Rotationin this case accumulates, so total is 90 with respect to first placement
  rect(0, 0, pg.width, pg.height); //HELPER frame
  image(pg, 0, 0);
  
}

```

---

<div class="post-metadata">

### Author: ![NancyBecky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nancybecky/32/636_2.png) [@NancyBecky](https://discourse.processing.org/u/NancyBecky)
#### Post date: [July 4, 2018, 5:29pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/9 "2018-07-04T17:29:54Z")

</div>

Hi Chrisir,

Thank you so much. I tried to add translate and rotate commands but It is not working.  
void draw() {  
background(0);  
for (int i = 0; i \< 10; i += 10) {  
bezier(300+(i/2.0), 140+i, 810, 200, 440, 200, 300-(i/16.0), 200+(i/8.0));

translate(0,100); //Shift down 100 units  
rotate(radians(45));  
}  
{  
for (int j = 5; j \< 10; j += 10) {  
bezier(300+(j/2.0), 140+j, 610, 200, 240, 200, 300-(j/16.0), 200+(j/8.0));

translate(50,100); //Shift down 100 units  
rotate(radians(45));  
}}  
}

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [July 4, 2018, 5:41pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/10 "2018-07-04T17:41:55Z")

</div>

You should check youtube. Look for Shiffman Tranalation and rotation. I believe there is a video showing this in Processing java. Just to be clear, make sure Shiffman is using Java and not the other flavor, p5.js which is javascript. The concepts is the same but the code is a little bit different.

Kf

---

<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: [July 4, 2018, 6:13pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/11 "2018-07-04T18:13:45Z")

</div>

play with this

also read the tutorial on trigonometry

```auto

void setup() { 
  size(1900, 800);
}

void draw() {
  background(0);
  noFill();
  stroke(255, 0, 0); 
  for (int j = 75; j < 750; j += 75) {
    for (int i = 0; i < 360; i += 10) {
      pushMatrix(); 
      translate(width/2, height/2); //Shift down 100 units
      rotate(radians(i));
      bezier(300+j, 140, 
        810+j, 200, 
        440+j, 200, 
        300+j, 200);
      popMatrix();
    }
  }
}

```

---

<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: [July 4, 2018, 7:24pm UTC](https://discourse.processing.org/t/sketching-pattern/1421/12 "2018-07-04T19:24:36Z")

</div>

You can basically let the outer for loop change the radius and let the inner/the nested for loop take are of the angle

Now use radius and angle to calculate the position with x = cos(…

y=sin(…

And use scale to change the size of the single shapes