Hour of Code - Color - Lines.js

function setup() {
  createCanvas (400, 400);
  background(0);
}

function draw() {
  
  var a = 0;
  var b = 5;
  var c = 400;
  

  from = color(182,249,252);
  to = color(254,218,252);
  interA = lerpColor(from, to, .33);
  interB = lerpColor(from,to, .66);

  
  //um den Code zu verkürzen, würde ich gerne schreiben:
  
  //for (var b = 5; b < 400; b + 5); {
  //line(a,b,c,b);
  //}
  
  //allerdings stürzt davon immer das programm ab, deshalb der riesen Absatz hier.
stroke(from);
  line (a,b,c,b);
  line (a,b*2,c,b*2);
  line (a,b*3,c,b*3);
  line (a,b*4,c,b*4);
  line (a,b*5,c,b*5);
  line (a,b*6,c,b*6);
  line (a,b*7,c,b*7);
  line (a,b*8,c,b*8);
  line (a,b*9,c,b*9);
  line (a,b*10,c,b*10);
    stroke(interA);
  line (a,b*11,c,b*11);
  line (a,b*12,c,b*12);
  line (a,b*13,c,b*13);
  line (a,b*14,c,b*14);
  line (a,b*15,c,b*15);
  line (a,b*16,c,b*16);
  line (a,b*17,c,b*17);
  line (a,b*18,c,b*18);
  line (a,b*19,c,b*19);
  line (a,b*20,c,b*20);
    stroke(interB);
  line (a,b*21,c,b*21);
  line (a,b*22,c,b*22);
  line (a,b*23,c,b*23);
  line (a,b*24,c,b*24);
  line (a,b*25,c,b*25);
  line (a,b*26,c,b*26);
  line (a,b*27,c,b*27);
  line (a,b*28,c,b*28);
  line (a,b*29,c,b*29);
  line (a,b*30,c,b*30);
    stroke(to);
  line (a,b*31,c,b*31);
  line (a,b*32,c,b*32);
  line (a,b*33,c,b*33);
  line (a,b*34,c,b*34);
  line (a,b*35,c,b*35);
  line (a,b*36,c,b*36);
  line (a,b*37,c,b*37);
  line (a,b*38,c,b*38);
  line (a,b*39,c,b*39);
  line (a,b*40,c,b*40);
  
  
  stroke(to);
  line (a,b*41,c,b*41);
  line (a,b*42,c,b*42);
  line (a,b*43,c,b*43);
  line (a,b*44,c,b*44);
  line (a,b*45,c,b*45);
  line (a,b*46,c,b*46);
  line (a,b*47,c,b*47);
  line (a,b*48,c,b*48);
  line (a,b*49,c,b*49);
  line (a,b*50,c,b*50);
    stroke(interB);
  line (a,b*51,c,b*51);
  line (a,b*52,c,b*52);
  line (a,b*53,c,b*53);
  line (a,b*54,c,b*54);
  line (a,b*55,c,b*55);
  line (a,b*56,c,b*56);
  line (a,b*57,c,b*57);
  line (a,b*58,c,b*58);
  line (a,b*59,c,b*59);
  line (a,b*60,c,b*60);
    stroke(interA);
  line (a,b*61,c,b*61);
  line (a,b*62,c,b*62);
  line (a,b*63,c,b*63);
  line (a,b*64,c,b*64);
  line (a,b*65,c,b*65);
  line (a,b*66,c,b*66);
  line (a,b*67,c,b*67);
  line (a,b*68,c,b*68);
  line (a,b*69,c,b*69);
  line (a,b*70,c,b*70);
    stroke(from);
  line (a,b*71,c,b*71);
  line (a,b*72,c,b*72);
  line (a,b*73,c,b*73);
  line (a,b*74,c,b*74);
  line (a,b*75,c,b*75);
  line (a,b*76,c,b*76);
  line (a,b*77,c,b*77);
  line (a,b*78,c,b*78);
  line (a,b*79,c,b*79);
  line (1,b*80,c,b*80);
}

Refactoring by josues.js

function setup() {
  createCanvas (400, 400);
  background(0);
}


function draw() {
  from = color(182,249,252);
  to = color(254,218,252);
  interA = lerpColor(from, to, .33);
  interB = lerpColor(from,to, .66);
  var a = 0;
  var c = width;
  for (var b = 0; b < height; b += 5) {
    line(a,b,c,b);
    stroke(from);
    h = height/8;
    if (b < h){
      stroke(from);
    } else if (b > h, b < h*2){
      stroke(interA);
    } else if (b > h*2, b < h*3){
      stroke(interB);
    } else if (b > h*3, b < h*5){
      stroke(to);
    } else if (b > h*5, b < h*6){
      stroke(interB);
    } else if (b > h*6, b < h*7){
      stroke(interA);
    } else if (b > h*7, b < height){
      stroke(from);
    }
  }
}