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.
I have no idea about the coding part for reproducing this image. Could you please help me with the coding part?
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
Post your entire code then.
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
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));
}}
}
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
rotate(radians(i));
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