Sketching pattern

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?

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

1 Like

Thanks for your reply. The basic shape is Arcs of non-zero curvature.

Regards
Nancy

To make this basic shape:

See:

https://processing.org/examples/bezier.html

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

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

Thank you

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

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));
}
}

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)

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

Keep the reference handy: https://processing.org/reference/

Important to check this tutorial: 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

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

``````

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);

}
``````

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
}
{
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
}}
}

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

play with this

also read the tutorial on trigonometry

``````
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
bezier(300+j, 140,
810+j, 200,
440+j, 200,
300+j, 200);
popMatrix();
}
}
}
``````

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