So I have this relatively simple code that creates a white line moving left to right across the screen. It’s similar to a “shinny” effect. However, How would I do the same effect, but have the line move diagonally from top right to bottom left?
void draw()
{
for (int a = 0; a < 1000; a += 5)
{
for (int b = 0; b < 1000; b += 5)
{
fill(60, abs((x - b) / 2), 100);
rect(b, a, 5, 5);
}
}
x += 25;
}
So the first two for-loops basically create a grid of a couple thousand 5x5 squares. Then I have x as value that “moves” across the screen. The colour mode is set to HSB so the lower the value of abs((x - b) / 2) is, then the whiter the rectangle will be.
So all of this together creates a white line that moves across the screen, from left to right.
But how would I change this code up so that the line is diagonal instead of vertical?
to get a diagonal movement. I’m pretty new to coding so unfortunately can’t offer a complete solution. Perhaps this helps? Though, this is not a line per se…
Also under TUTORIALS on the main processing.org site there is a Dan Shiffman 2 DIMENSIONAL ARRAYS tutorial showing a how to make an oscillating grid with a diagonal line. Scroll down to about midway point in text to see.
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;
}
Using lines seems like a good idea, but I kinda want it to “fade out” in a way. Is there a way that I can have the brightness at full in the middle of the line, but have it reduced as it goes towards the edge?
My suggestion is to build an array of points and assign each of them a color. You build this array in setup and use it on every frame in draw(). You can use Pgraphics a rectangle and a mask. Or you can use the code above an adjust the brightness there.
@glv Oh, I wasn’t concerned about the fade at the end of the line, but rather at the edge of the line. So for example, the screenshot I posted, could you do that with a line?
Take a look at the link I provided.
Trickle it down to just one face.
You can make the width and length anything you want; it can look like a line, box or rect and can be 2D or 3D.
That is what I did with my “line”; it is really a custom rectangle that is 2 pixels wide.
