Varying scale at frameCount

Processing Coding Questions
1

I have an animation that graduates between colours at intervals… I’m also exploring how to adjust the scale at varying points along frameCount… I’ve tried tinkering with scale at different points (both within the for loop and the if statement) but nothing seems to work how I want. An example would be at 0 - 400 I’d want scale to be 1.5, and then 401 - 500 I’d want scale to transition up to 2 in a smooth way. Any tips on where/how I would implement that would be amazing. The code I have thus far is below, if there’s also a way that the code can be cleaned up that would be great too!

//import peasy.*;


static final int NUM_LINES = 15;

color yellow = color(237, 231, 119);
color lightBlue = color(73, 202, 232);
color blue = color(58, 85, 216);
color grey = color(170, 170, 170);
color darkGrey = color(85, 85, 85);
color brown = color(102, 77, 49);
color pink = color(229, 119, 151);
color burgundy = color(150, 9, 9);
color crimson = color(224, 59, 59);
color violet = color(213, 138, 237);
color green = color(153, 221, 100);

int[] colors = {yellow, lightBlue, blue, grey, darkGrey, brown, pink, burgundy, crimson, violet, green};

//color
float amt = 0;

//vintageComputer
float t;

//scale
float s = 1;


void setup() {
  size(500, 500);
  surface.setResizable(true);
  rectMode(CENTER);
  noStroke();
}

void draw() {

  color one = lerpColor(colors[0], colors[1], amt);
  color two = lerpColor(colors[1], colors[2], amt);
  color three = lerpColor(colors[2], colors[3], amt);
  color four = lerpColor(colors[3], colors[4], amt);
  color five = lerpColor(colors[4], colors[5], amt);
  color six = lerpColor(colors[5], colors[6], amt);
  color seven = lerpColor(colors[6], colors[7], amt);
  color eight = lerpColor(colors[7], colors[8], amt);
  color nine = lerpColor(colors[8], colors[9], amt);
  color ten = lerpColor(colors[9], colors[10], amt);
  color eleven = lerpColor(colors[10], colors[1], amt);

  background(#111111);
  strokeWeight(3);
  pushMatrix();
  translate(width/2, height/2);

  for (float i = 0; i < NUM_LINES; i++) {
    line(x1(t+i), y1(t+i), x2(t+i), y2(t+i));  
    t+=0.02;
  }

  //println(frameCount);
  if (frameCount%1100 >= 0 && frameCount%1100 < 100) {
    stroke(one);
    amt+=0.01;
  } else if (frameCount%1100 == 100) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 100 && frameCount%1100 < 200) {
    stroke(two);
    amt+=0.01;
  } else if (frameCount%1100 == 200) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 200 && frameCount%1100 < 300) {
    stroke(three);
    amt+=0.01;
  } else if (frameCount%1100 == 300) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 300 && frameCount%1100 < 400) {
    stroke(four);
    amt+=0.01;
  } else if (frameCount%1100 == 400) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 400 && frameCount%1100 < 500) {
    stroke(five);
    amt+=0.01;
  } else if (frameCount%1100 == 500) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 500 && frameCount%1100 < 600) {
    stroke(six);
    amt+=0.01;
  } else if (frameCount%1100 == 600) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 600 && frameCount%1100 < 700) {
    stroke(seven);
    amt+=0.01;
  } else if (frameCount%1100 == 700) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 700 && frameCount%1100 < 800) {
    stroke(eight);
    amt+=0.01;
  } else if (frameCount%1100 == 800) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 800 && frameCount%1100 < 900) {
    stroke(nine);
    amt+=0.01;
  } else if (frameCount%1100 == 900) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 900 && frameCount%1100 < 1000) {
    stroke(ten);
    amt+=0.01;
  } else if (frameCount%1100 == 1000) {
    amt = (frameCount%frameCount);
  } else if (frameCount%1100 > 1000 && frameCount%1100 <= 1100) {
    stroke(eleven);
    amt+=0.01;
  } else if (frameCount%1100 == 1100) {
    amt = (frameCount%frameCount);
  }
  popMatrix();
}

float x1(float t) {
  return sin(t/100)*noise(-100, 100) + sin(t/5)*20;
}
float y1(float t) {
  return cos(t/10)*100 + sin(t/12)*20;
}
float x2(float t) {
  return sin(t/10)*200 + -sin(t)*2;
}
float y2(float t) {
  return -cos(t/20)*200 + sin(t/12)*2;
}
1 Like
2

Hello,

Consider how an equation to a line works:

// Equation to a Line
// v1.0.0
// GLV 2012-02-18

void setup() 
	{
  size(500, 200);
  background(0);
	}

void draw() 
	{
  float x1 = 3*60;   
  float x2 = 5*60;  
  float y1 = 50;
  float y2 = 150;
  
  //slope
  float slope = (y2-y1)/(x2-x1);  //(150.0 - 50)/(5.0*60-3*60)
  //println(slope);
  
  if (frameCount >= x1 && frameCount <= x2)
    {
    float x = frameCount;
    float y = slope*(x-x1) + y1;  
    
    println ("x = ", frameCount, "y = ", y);
    
    strokeWeight(2);
    stroke(0, 255, 0);
    point(x, y);
    } 
  }

:)

1 Like
3

One method is to use list-based interpolations

float lerps( float amt, float... vals) {
  if(vals.length==1){ return vals[0]; }
  float unit = 1.0/(vals.length-1);
  return lerp(vals[floor(amt / unit)], vals[ceil(amt / unit)], amt%unit/unit);
}

So my time / vals will be like this:

0 1.5
100 1.5
200 1.5
300 1.5
400 1.5
500 2.0

So my amt, which ranges 0-1.0, will be time/500.0 and my vals will be new float[] {1.5, 1.5, 1.5, 1.5, 1.5, 2.0} With that, lerps() will return the correct results for e.g. time = 450 (1.75)

For more, see: