Gradient of a moving Straight Line

laura12

Hello, Iam new in processing.

I want that my line changes the color and moves from left to right. How can I do it? I would be very happy if someone could help me :)

float y = 100;

void setup() {
  size(640, 360);  // Size should be the first statement
  stroke(255);     // Set stroke color to white
  y = height * 0.5;
}

void draw() { 
  background(0);   // Set the background to black
  line(0, y, width, y);  
}     

fuzzySi

https://www.processing.org/tutorials/gettingstarted/

https://www.processing.org/tutorials/color/

Hard to make a horizontal line across the whole screen move left & right though - try it with a vertical line for now.

laura12

Hmm. I want the colors change randomly in the line :/ maybe when the colors changing, it looks like the line is moving?

fuzzySi

ah, Ok, so the pixels in the line change colour. You' could do an array of pixels representing the line, each changing colour randomly. Have a look at arrays, and I can try and help in a bit.

laura12

Ah ok, it´s a lot of to do then............ maybe a tip how I should start?

fuzzySi

if you don't mind the pixels being random, ie they don't need to move along the screen, we can forget the array.

Put this in your draw() loop instead of the line()

`  for (int i = 0; i < width; i++) { 
    stroke(random(255), random(255), random(255));
    point(i, y);
  }`

fuzzySi

For a thicker line, you could use

ellipse(i, y, 5, 5);

laura12

oh wow this is so cool!! Thank you sooo much. Can I ask something else? I did this,because I want a screen full of lines but now the color is not changing from left to right in one line?://why

float y = 100; void setup() { size(640, 360); // Size should be the first statement stroke(255); // Set stroke color to white frameRate(2); y = height * 0.5; } void draw() {

for (int i = 0; i < width; i++) { stroke(random(255), random(255), random(255)); line(i, 0,i, width );

}
}

fuzzySi

the for loop is iterating through each pixel across the width of the screen, and the stroke(random etc) bit sets the colour each time. if you want the whole screen with colours shimmering, you could either do that for loop for each pixel down the height of the screen as well, which would give loads of randomly coloured pixels, but if you want them all the same colour down a vertical line, then do a vertical line in the for loop which will look better.

Actually, it looks really hectic...

for (int i = 0; i < width; i++) { stroke(random(255), random(255), random(255)); line(i, 0, i, height); }

if you can explain exactly what you're after I'm sure we can get there...

laura12

Yes you are right,it looks really hectic. I have tried a lot till now and watched tutorials on youtube. But it does not work. :( I want horizontal lines all over the window. Therefore I changed the code to

line(0, i, width, i);

The lines could be thicker but If I try the ellipse, I dont get horizontal line. Each line should have a different color. Furthermore every line should change the color (the pixels have to transform) e.g. from light to dark blue....That would be perfect and I would be a step further. It´s the first time I try something with processing/programming..it´s my task for school.And the rest I would try to do anyhow but I need some help. I guess I have to use HSV color. I want to say thank you for all your help!!

fuzzySi

We need to work down the screen then, rather than across, in the for loop. You're currently working across the screen so your line is drawing over itself each time.

for (int i=0; i < height; i ++) { // this will go down the screen pixel by pixel line(0, i, width, i); // now your horizontal lines will work }

If we want to change the colour slowly, we could use our variable i in some way - it will start at 0 and reach 360 (the height of your screen) by the end. Normally colour is 0-255 but we can change this with

colorMode(RGB,height); // put this in setup

Now colour will be ranged from 0 to whatever you set your height to (360 at present).

So we can now use i as our blue component.

stroke(0,0,i); // put this inside the for loop, before line

And that should give you a graded colour of lines. I'm only on a tablet so can't test it, but that should work....

If the start isn't blue enough, use a different variable instead of i inside stroke (declare it first) and use map() to convert the range you get from i (0-360) to the colour range you want your blues to be. Sorry if this is a step too far, but the documentation on map is good.

int blueStroke = map(i, 0, height, 50, 200) // where for example, 50 and 200 are the least and most blue colours you want - play with these numbers. stroke (0,0, blueStroke);

laura12

Hello, yeah cool it worked with the graded color of each line :) THANK YOU and looks like this (see picture) now the lines are moving randomly right? but i dont can perceive it because the color of each line is always the same. how can I say that some of the lines should be for example blue or green

 float y = 100;

void setup() {
  size(640, 360);  // Size should be the first statement
  frameRate(1); 
  colorMode(RGB,height);
  y = height * 50;
}

void draw() {
for (int i = 0; i < height; i++) {
    stroke(random(255), random(255), random(255));
    stroke(0,0,i); //i as blue component
     line(0, i, width, i);
  }


}`

how can I

laura12

S

laura12

I used the lerpColor()

and tested it

fuzzySi

Yes it looks really smart, but the lines aren't moving - that's a level or two more hectic as it means a color array & I got stuck on the syntax of this last night. If you want to play with colours change the other 0s in stroke(0, 0, i); for example stroke(0,200,i); - these three numbers are the red / green / blue components of the colour so you'll get some nice effects. You could use a random(360) for this to shuffle the colours slightly, but random gives a float, which you'd need to make an integer, so I think it's ((int)(random(height))

laura12

I found a code and its similar to want i want. I want a lot of lines like this,just horizontal. but i dont understand the code at all xD ok i will use your tipps and try it out now

color from = color (232,255,62);
color to = color (255, 62, 143);

int j=720;
void setup(){
  size(200,720);
}
void draw(){

  for(int i=1;i<height;i++){
    color interA=lerpColor(from,to,(float(i)/height));
    noStroke();
    fill(interA);
    rect(70,i,50,i/j);
 }
  j--;
  if(j<10){
    j=10;
  }

}

fuzzySi

Can't test this until this evening, but can translate the code for you. lines 1 & 2 are defining 2 colours, 'from' and 'to'. lerpColor does a linear interpretation of colour gradient between those 2 colours. it's drawing a rectangle of width 50 & varying height starting at x =70 and varying y position. lines 16-19 reduce j by 1 each time round the loop, stopping when j gets to 10.