How to create a diagonal line

Processing Coding Questions
3

Your code is hard to read. Instead of providing numbers, use constants or variables to indicate their functionality in your code. This is known as avoiding “magic numbers”. You can check the tutorial in the Processing website about transformations. A sample code below which you will need to modify for final appearance. Finally I added the option for the effect to bounce back when it reaches the edge on the X dimension.

Kf

//===========================================================================
// FINAL FIELDS:
final int GRID_SPACING=5;


//===========================================================================
// GLOBAL VARIABLES:
int currStep=0;
int stepSize=25;


//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);

  fill(255);
  strokeWeight(2);
}



void draw() {
  translate(width/2, height/2);
  rotate(PI/4);

  for (int y = -height/2; y < height/2; y += GRID_SPACING) {
    for (int x = -width/2; x < width/2; x += GRID_SPACING) {
      fill(60, abs((currStep - x) / 2), 100);
      rect(x, y, GRID_SPACING,GRID_SPACING);
    }
  }

  currStep += stepSize;

  //Next changes direction when it reaches the edges on the x dimension
  if (currStep<0 || currStep>width)
    stepSize*=-1;
}
3 Likes