Need help on making scene interactive for semester project

Processing Coding Questions
1

Hi,
I have recently been writing a paper on how code can be used to solve modern design problems and really want to show off how interactive coding can be.
I am extremely interested yet sadly lack the knowledge and experience to create a simple but demonstrative Scene.

I want to be able to change the number of visible strokes by arrow keys and would love for the colors of the stroke to change depending on its length. (I figure this would create a nice harmony in color).

I was trying to change the color of the strokes through mouse but failed.

Here is where I’m at:

float t;

int y = 8;
float d = mouseX += mouseY;
PVector pos;

int NUM_LINES = y;

void setup() {
  background(20);
  size(700, 700);
  smooth(8);
  pos = new PVector(width/2, height/2);
}

void draw() {
  translate(width/2, height/2);
  filter(BLUR, 1);
  background(20);
  strokeWeight(5);
  stroke(255);
  
    if (mousePressed) {   `
    stroke(random(d - 20, d + 20) % 255, 255, 255);
    }
  
  for (int i = 0; i < NUM_LINES; i++) {
  line(x1(t +i), y1(t + i), x2(t + i), y2(t + i));
  
  }
  
  t += 0.7;
  
}

float x1(float t) {
  return sin(t / 10) * 100 + sin(t / 5) * 20;
}

float y1(float t){
  return cos(t / 10) * 100;
}

float x2(float t) {
  return sin(t / 10) * 200 + sin(t) * 2;
}

float y2(float t){
  return cos(t / 20) * 200 + cos(t / 6) * 20;
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) { 
      y++;
    } else if (keyCode == DOWN) { 
      y--;
    } 
  }
  
}

Any help would be greatly appreicated.

1 Like
2

Hi @mahnc1

You only change y but not NUM_LINES …
Also not exactly understand what you wanne achieve with d but moved it to the place where it has effect.

PS
Sorry cant test the code as Im on mobile but it should now be close to what you want :slight_smile:

Cheers
—mnse

float t;
float d;
//PVector pos;

int NUM_LINES = 8;

void setup() {
  background(20);
  size(700, 700);
  smooth(8);
  //pos = new PVector(width/2, height/2);
}

void draw() {
  translate(width/2, height/2);
  filter(BLUR, 1);
  background(20);
  strokeWeight(5);
  stroke(255);
  
    if (mousePressed) {   `
        d = mouseX +  mouseY;
        stroke(random(d - 20, d + 20) % 255, 255, 255);
    }
  
  for (int i = 0; i < NUM_LINES; i++) {
      line(x1(t +i), y1(t + i), x2(t + i), y2(t + i));
  }
  
  t += 0.7;
  
}

float x1(float t) {
  return sin(t / 10) * 100 + sin(t / 5) * 20;
}

float y1(float t){
  return cos(t / 10) * 100;
}

float x2(float t) {
  return sin(t / 10) * 200 + sin(t) * 2;
}

float y2(float t){
  return cos(t / 20) * 200 + cos(t / 6) * 20;
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) { 
      NUM_LINES = constrain(NUM_LINES+1,1,30);
    } else if (keyCode == DOWN) { 
      NUM_LINES = constrain(NUM_LINES-1,1,30);
    } 
  }
}
3

Hello, @mahnc1,

All the resources you need are here:

Explore!

This (hints only!) will change the color of the lines:

  for (int i = 0; i < NUM_LINES; i++) 
    {
    float dist = dist( ?,  ?,  ?,  ? );
    println(dist); // get the range of dist and then comment it after
    float hue = map(dist,  ?,  ?,  0,  360); //hue of 0 to 360
    colorMode(HSB, 360, 100, 100); //HSB colorMode
    stroke(hue, 100, 100); // set hue of line
    line(x1(t +i), y1(t + i), x2(t + i), y2(t + i));
    }

image
image502×532 47.4 KB

Look up the references for each line to first understand what they are doing and then complete the code.
I used HSB color mode to provide some nice colors.
Check out the tutorials and references on color.

:)

4

Thanks so much! I’ve been trying to teach myself for some time now but it’s kind of hard when no one can correct you or show you how it’s done properly. I’m glad to have found the forum :slight_smile:

2 Likes
5

Thanks so much! Gonna mess around with it some more to see what I can come up with.

1 Like