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

p5.js Beginners
1 


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:
PastedImage_464ac78e061c4833b1a13352094b40c2_image_93855599931683914785106

2

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
3

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: :wink:

/**
 * 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