I Guess I Have Class Now

When I use a class descriptiveName() I get this:

let inner = [];

function setup() {
  createCanvas(400, 400);

  // inner1 = new Inner(0, 0, -200, -200 );

  for (let i = 0; i < 50; i++) {
    let vx = random(0, width);
    let vy = random(0, height);
    inner[i] = new Inner(0, 0, vx, vy)
  }
}

function draw() {
  background(0);

  translate(width / 2, height / 2);
  for (let i = 0; i < inner.length; i++) {
    inner[i].show();

    push();
    let rep = 15;
    angleMode(DEGREES);
    rotate(rep);
    pop();
    rep = rep * 2;

  }

}

class Inner {

  constructor(x1, y1, x2, y2) {
    this.x = x1;
    this.y = y1;
    this.a = x2;
    this.b = y2;
  }

  show() {

    // let rep = 15;
    // angleMode(DEGREES);

    // translate(width / 2, height / 2);
    // push();
    // rotate(rep);

    stroke(255);
    line(this.x, this.y, this.a, this.b);
    // rep = rep*2;
    // pop();

  }
}

The above code shows my experimentation with trying to get the same result from class descriptiveName() and placing everything in draw().

After spending some time on this I decide to try another sketch to fulfill the week five excursive. 

Sliders control the size of the rect()  as well as the RGB fill() values.

Play with the working sketh:

https://editor.p5js.org/phil-in-a-can/sketches/IklWzR6ME

let speedx = 1;
let speedy =25;
let speedx1 = 25;
let speedy1 = 1;
let slider_R;
let slider_G;
let slider_B;
let slider_Width;


function setup() {
  createCanvas(600, 600);

  square1 = new Square(0, 0, 20, 20);
  spot1 = new Spot(width , height ,50, 50);
  create_slider_1();
  create_slider_2();
  create_slider_3();
  create_slider_4();
  background(0);
}

function create_slider_1() {
  createSpan('RED').style('font-size', '10px');
  // createSlider(min, max, [value], [step])
  slider_R = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_R.style('width', '75px');
}

function create_slider_2() {
  createSpan(' GREEN').style('font-size', '10px').style(style = 'font-family:verdana');
  // createSlider(min, max, [value], [step])
  slider_G = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_G.style('width', '75px');
}

function create_slider_3() {
  createSpan(' BLUE').style('font-size', '10px');
  // createSlider(min, max, [value], [step])
  slider_B = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_B.style('width', '75px');
}

function create_slider_4() {
  createSpan(' WIDTH').style('font-size', '10px');
  // createSlider(min, max, [value], [step])
  slider_Width = createSlider(0, 50, 10);
  // slider.position(10, 10);
  slider_Width.style('width', '75px');
}

function draw() {
  // background(0);
  square1.show();
  square1.move();
  spot1.show();
  spot1.move();
  
}

class Square {
  constructor(tempX, tempY, tempH, tempW) {
    this.x = tempX;
    this.y = tempY;
    this.h = tempH;
    this.w = tempW;
 
  }

  move() {

    if ((this.x > width) || (this.x < 0)) {
      speedx = speedx * -1;
    }
    this.x = this.x + speedx;

    if ((this.y > height) || (this.y < 0)) {
      speedy = speedy * -1;
    }
    this.y = this.y + speedy;
  }

  show() {
    
    rectMode(CENTER);
    stroke(255);
    strokeWeight(1);

    fill(slider_R.value(), slider_G.value(), slider_B.value());
    rect(this.x, this.y, slider_Width.value(), slider_Width.value());
    print(this.x);
  }

}

class Spot {
  constructor(spotX, spotY, spotH, spotW) {
    this.x = spotX;
    this.y = spotY;
    this.h = spotH;
    this.w = spotW;

  }

  move() {

    if ((this.x > width) || (this.x < 0)) {
      speedx1 = speedx1 * -1;
    }
    this.x = this.x + speedx1;

    if ((this.y > height) || (this.y < 0)) {
      speedy1 = speedy1 * -1;
    }
    this.y = this.y + speedy1;
  }

  show() {
    ellipseMode(CENTER);
    stroke(255);
    strokeWeight(1);

    fill(slider_R.value() * 0.25, slider_G.value() * 0.25, slider_B.value() * 0.25);
    ellipse(this.x, this.y, this.h, this.w);
    // print(this.x);
  }

}