# How do I make this image using loops but the circle does not have to be included

``````

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);

ellipse(200,200,50,50)

for (let count = 25; count < 10; count++) {
line(50,200,200,20)
}
}

``````

image needed to make: analyze precisely what you see

above the circle are 4 lines, each of which is in fact 2 lines (one from the left and one from the right).

underneath the circle the same.

so line(x1,y1,x2,y2);

• with x1, y1 being constant (left side end of the lines) and
• x2, y2? x2 is also constant, width/2 and y2 is maybe `count * 10`

I will stop here to let you play with these ideas.

Chrisir

2 Likes

As @Chrisir has already stated, we already know the x coordinates for all the 16 lines.

Left x coordinate is some horizontal offset we define.
While right x coordinate is width - offset.
And 2nd x coordinate is the center of canvas (width / 2).

Also the 1st y coordinate is just the center of canvas (height / 2) as well.
So we’re only missing the 2nd y coordinates for both the upper & bottom lines.

Let’s therefore declare some global `const` variables for all the known data:

``````const
W = 800, H = 600, // canvas dimensions
CX = W >> 1, CY = H >> 1, // canvas center coordinates

LOOPS = 4, // number of line pair loops
HOR_OSET = W >> 3, // horizontal offset

LX = HOR_OSET, RX = W - HOR_OSET, // left & right x coordinates

UP_VER_STEP = -CY >> 3, UP_VER_OSET = -CY >> 1, // up vertical step & offset
DN_VER_STEP = CY >> 2, DN_VER_OSET = CY >> 2; // down vertical step & offset
``````

Just have in mind all math above won’t draw your requested image, but merely an approximation of it.

Some tweaks are still needed, especially for these increment step & offset variables:
UP_VER_STEP, UP_VER_OSET, DN_VER_STEP, DN_VER_OSET.

Here’s an incomplete sample code. You’ll just need to fill in 3 line() parameters + variable yu: ``````/**
* Looping Line Pairs (v1.0.1)
* GoToLoop (2023-May-12)
*
* https://Discourse.Processing.org/t/how-do-i-make-this-image-using-loops-
* but-the-circle-does-not-have-to-be-included/41980/3
*
* https://OpenProcessing.org/sketch/1927225
*/

'use strict';

const
W = 680, H = 520, // canvas dimensions
CX = W >> 1, CY = H >> 1, // canvas center coordinates
BG = 0o320, // background gray shade color
LOOPS = 4, // number of line pair loops
CIR_DIAM = H >> 3, // circle diameter size
HOR_OSET = W >> 3, // horizontal offset
LX = HOR_OSET, RX = W - HOR_OSET, // left & right x coordinates
UP_VER_STEP = -H >> 4, UP_VER_OSET = -H >> 2, // up vertical step & offset
DN_VER_STEP = H >> 3, DN_VER_OSET = H >> 3; // down vertical step & offset

function setup() {
createCanvas(W, H);
noLoop();
}

function draw() {
background(BG);
circle(CX, CY, CIR_DIAM);

for (var i = 0; i < LOOPS; ++i) {
const
// yu = ..., // line y up coordinate
yd = i * DN_VER_STEP + DN_VER_OSET + CY; // line y down coordinate

// line(...); // upper left line
// line(...); // upper right line
line(LX, CY, CX, yd); // bottom left line
// line(...); // bottom right line
}
}
``````
1 Like

This post was flagged by the community and is temporarily hidden.

1 Like