Week 3 : HTML 2

// control panel
let x = 3;
let y = 250;
let w = 10; // width of my circle
let g = 7; // growth rate of my circle, how many pixels are added each time
let num = 150; // number of circles

function setup() {
  createCanvas(500, 500);
  noLoop(); // draw loop only runs once;
}

function draw() {
  background(220);

  // 3 parts to the rules of a for loop
  // for loops need a variable
  // init, where it starts; test, when it should end; update, how it should change
  for (let i = 1; i <= num; i += 1) {
    // the block of code to be repeated
    circle(x * i, y, w);
    //w += g; // takes what w was, and adds whatever is on the right side of it
  }
}

let g = 100;
let offset = 100;
let o = 255; // opacity

function setup() {
  createCanvas(600, 600);
  strokeWeight(2);
  noLoop();
}
function draw() {
  background(204, 0, 100);
  // stroke(greyscale, opacity)
  stroke(255, o);
  // adds a pixel value instead of an index

  //  for loop 1
  for (var x = 20; x < width; x += g) {
    stroke(255, o);
    line(x, 0, x + x / offset, height - 20); // x1, y1, x2, y2
    o -= 1;
  }

  // flor loop 2
  o = 0;
  for (var x = 20; x < width; x += g) {
    // rgb opacity: stroke(r,g,b,opacity)
    stroke(0, 0, 200, o);
    line(x, 0, x + x / offset, height - 20); // x1, y1, x2, y2
    o += 1;
  }
}

let x = 25;
let y = 50;
let d = 20; // diameter of our circle
let r = d / 2;
let num = 10;

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

function draw() {
  background(220);

  for (let i = 0; i < num; i = i + 1) {
    circle(x * i, y, d); // x,y, diameter
    line(x * i - r, y - r, x * i - r, y + r); // 2 xy pairs for the start and stop
    line(x * i + r, y - r, x * i + r, y + r); // 2 xy pairs for the start and stop
  }

  noLoop();
}

// declaring a varable
let x = 20;
let y = 20;
let w = 20; // w is the width of my rectangle
let h = 10; // h is the height of my rectangle
let spz = 20; // spacing between shapes

function setup() {
  createCanvas(800, 400);
  noFill();
}

function draw() {
  background(220);

  // index
  for (let i = 0; i < 20; i = i + 1) {
    rect(x + spz * i, y, w, h);
    line(x + spz * i, y - h / 2, x + w + spz * i, y + h * 1.5);
    line(x + spz * i, y + h * 1.5, x + w + spz * i, y - h / 2);
  }
}

function setup() {
  createCanvas(480, 800);
}

function draw() {
  background(204);
  for (var i = 20; i < 400; i = i + 20) {
    stroke(i, 100, 10);
    strokeWeight(i / 20);
    line(i, 0, i + i / 2, 800 - i);
  }

  noLoop();
}

// global scope variables
let numLines = 250; // change var to affect for loop function and drawing spacing!
let xOffset = 50; // x starting point
let spacing; // declare but not define spacing;

function setup() {
  createCanvas(480, 480);
  strokeWeight(0.5);
  // updating a global scope
  spacing = (width - xOffset) / numLines; // 280
}

function draw() {
  background(10);
  // repeats code for a given number of iterations based on the rules inside the parentheses
  for (let x = xOffset; x < width - xOffset * 2; x += spacing) {
    // rgb range is 0 to 255;
    let b = map(x, xOffset, width, 100, 255); // number that belongs to a range, old range min, old range max, new range min, new range max
    let r = map(x, xOffset, width, 255, 100); //
    stroke(r, 100, b);

    // code to be repeated
    let y = height - x * 2;
    line(x, 0, x + x / 2, y); // 1st set is top, 2nd is elbow
    line(x + x / 2, y, x, height); // 1st set is elbow, 2nd is bottom
  }
}