Week 2 : Worldbuilding + p5*js 101

// these are the four functions related to color
// fill()
// noFill()
// noStroke()
// stroke()

// function setup runs ONCE before everything else immediately after pressing play.
function setup() {
  // makes a canvas, first number is width second is height
  createCanvas(400, 400);
}
// everything in function draw LOOPS again and again
function draw() {
  // if 1 value: 0 is black and 255 is white
  // if 3 values: 1st red, green, blue [RGB color]
  background(255);
  stroke(0);
  strokeWeight(1);
  noFill();
  // x1, y1,x2,y2,x3,y3
  triangle(30, 75, 100, 125, 347, 42);

  strokeWeight(10);
  stroke(255, 204, 0);
  fill(255, 165, 0);

  // x, y , w ,h
  //ellipse(100,300,25,66);
  //circle(width,0,100);

  // x,y, w
  //square(width/2-100/2,height/2-100/2,100);
  // x, y, w , h
  //rect(200,200,100,300);

  beginShape();
  vertex(100, 200);
  vertex(123, 127);
  vertex(154, 50);
  vertex(200, 180);
  vertex(120, 325);
  vertex(300, 180);
  endShape(CLOSE);

  console.log(mouseX, mouseY);
}

// fill()
// noFill()
// noStroke()
// stroke()

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

function draw() {
  // 1 number is greyscale, 0 is black 255 is white
  // 3 number r,g,b color / hexcode
  background(178, 172, 136);
  stroke(50, 150, 100);
  strokeWeight(20);
  fill(100, 100, 0);
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(120, 230);
  vertex(120, 120);
  vertex(30, 75);
  endShape(CLOSE);

  arc(290, 60, 80, 80, PI, TWO_PI + HALF_PI);

  strokeWeight(2);
  stroke(100, 100, 0);
  fill(50, 150, 100);
  circle(width / 2, height / 2, width / 10);

  strokeWeight(20);
  point(100, 300);
}

function setup() {
  createCanvas(500, 500);
}
// this is a loop! it runs again and again!
function draw() {
  background(255);

  // Head
  stroke("#E3C292");
  fill("#E3C292");
  strokeWeight(1);
  // x, y, width, height
  rect(225, 225, 80, 100);

  // eyes
  stroke("rgb(89,16,16)");
  strokeWeight(10);
  point(250, 250);
  point(285, 250);

  // mouse position finder
  console.log(mouseX, mouseY);
  // print() does the same thing as console.log !
}

function setup() {
  // make a comment with two forward slashes
  // multiple values inside of a function need to be seperated by commas.
  createCanvas(500, 400); // this line creates a canvas. #1 is width and #2 is height of canvas.
}

// all code for this assignment needs to be within either function setup or draw
function draw() {
  // greyscale between black and white; range 0 to 255
  // RGB color is three values representing amount of red green and blue; range is 0 to 255
  background(0, 140, 255);

  // SUN
  fill("rgb(255,221,0)");
  stroke(100, 100, 100); // penstroke color
  // added layers
  circle(350, 120, 200); // circle needs an x, y, diameter

  // SOLAR RAYS

  // GRASS
  noStroke();
  fill("rgb(14,224,14)");
  // rect(x,y,w,h) x and y are top left corner
  rect(0, height / 2, width, width / 2);

  // CLOUD 1
  noStroke();
  fill(250);
  circle(45 + 20, 43 + 20, 100);
  fill(248);
  circle(71 + 20, 61 + 20, 80);
  fill(252);
  circle(110 + 20, 30 + 20, 60);
  fill(245);
  circle(128 + 20, 59 + 20, 80);

  // CLOUD 2
  noStroke();
  fill(250);
  circle(45 + 350, 43 + 40, 100);
  fill(248);
  circle(71 + 350, 61 + 40, 80);
  fill(252);
  circle(110 + 350, 30 + 40, 60);
  fill(245);
  circle(128 + 350, 59 + 40, 80);

  // BIRD 1
  // line has no fill, only stroke
  strokeWeight(2.5);
  stroke(0); //black line
  line(10 + 200, 10 + 100, 20 + 200, 20 + 100); // beginning vertex plus end vertex: (x1,y1,x2,y2);
  line(20 + 200, 20 + 100, 30 + 200, 10 + 100); // beginning vertex plus end vertex: (x1,y1,x2,y2);

  // BIRD 2
  // line has no fill, only stroke
  strokeWeight(2);
  stroke(5); //black line
  line(10 + 180, 10 + 140, 20 + 180, 20 + 140); // beginning vertex plus end vertex: (x1,y1,x2,y2);
  line(20 + 180, 20 + 140, 30 + 180, 10 + 140); // beginning vertex plus end vertex: (x1,y1,x2,y2);

  //POND

  // need both!
  noStroke();
  fill("rgb(35,35,170)");
  beginShape(); // expect some vertices to come our way
  curveVertex(274 + 30, 245); // vertex is an x and y position pair
  curveVertex(344 + 30, 221); // vertex is an x and y position pair
  curveVertex(400 + 30, 225); // vertex is an x and y position pair
  curveVertex(413 + 30, 254); // vertex is an x and y position pair
  curveVertex(451 + 30, 289); // vertex is an x and y position pair
  curveVertex(399 + 30, 315); // vertex is an x and y position pair
  curveVertex(286 + 30, 340); // vertex is an x and y position pair
  curveVertex(234 + 30, 282); // vertex is an x and y position pair

  endShape(CLOSE); // CLOSE as a parameter for endShape closes the outline

  //PIER

  noStroke();
  fill("brown");
  // quad(x1,y1,x2,y2,x3,y3,x4,y4);
  //   quad(264, 294, 308, 277, 322, 291, 277, 317);

  beginShape();
  vertex(264, 294); //x1,y1
  vertex(308, 277); // x2 y2
  vertex(322, 291); // x3, y3
  vertex(277, 317); //x4, y4
  endShape();

  // PERSON

  // HEAD

  // HAIR
}

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

  // Line
  line(50, 50, 150, 50);

  // Rectangle
  rect(50, 80, 100, 60);

  // Ellipse
  ellipse(100, 200, 80, 40);

  // Triangle
  triangle(50, 300, 150, 300, 100, 230);

  // Quad
  quad(200, 50, 300, 50, 350, 120, 250, 120);

  // Arc
  arc(300, 200, 80, 80, PI, TWO_PI);

  // No fill for all shapes
  noFill();
  stroke(0);
}

function setup() {
  createCanvas(400, 200);
  background(240);

  // Filled rectangle with stroke
  fill(255, 0, 0); // Red fill
  stroke(0); // Black stroke
  rect(20, 40, 60, 60);

  // No fill, only stroke
  noFill();
  stroke(0, 0, 255); // Blue stroke
  rect(120, 40, 60, 60);

  // Fill, no stroke
  fill(0, 255, 0); // Green fill
  noStroke();
  rect(220, 40, 60, 60);

  // No fill, no stroke (invisible)
  noFill();
  noStroke();
  rect(320, 40, 60, 60); // This won't be visible
}

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

  // Using named color
  fill("red");
  rect(20, 20, 80, 80);

  // Using RGB values
  fill(0, 255, 0);
  rect(120, 20, 80, 80);

  // Using RGBA (with alpha)
  fill(0, 0, 255, 150);
  rect(220, 20, 80, 80);

  // Using HEX code
  fill("#FFD700");
  ellipse(60, 180, 80, 80);

  // Using HSB mode
  colorMode(HSB);
  fill(200, 100, 100);
  ellipse(180, 180, 80, 80);

  // Using grayscale
  colorMode(RGB);
  fill(128);
  ellipse(300, 180, 80, 80);
}

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

  // Regular polygon using vertex() (hexagon, no loop or variables)
  fill(100, 200, 255, 150);
  stroke(0);
  beginShape();
  vertex(160, 100);
  vertex(130, 152);
  vertex(70, 152);
  vertex(40, 100);
  vertex(70, 48);
  vertex(130, 48);
  endShape(CLOSE);

  // Irregular polygon using curveVertex()
  fill(255, 100, 200, 150);
  stroke(100);
  beginShape();
  curveVertex(250, 80);
  curveVertex(250, 80);
  curveVertex(320, 120);
  curveVertex(300, 200);
  curveVertex(220, 180);
  curveVertex(200, 120);
  curveVertex(250, 80);
  curveVertex(250, 80);
  endShape();

  // Complex shape with holes using beginContour()
  fill(200, 255, 100, 150);
  stroke(50);
  beginShape();
  vertex(80, 300);
  vertex(180, 300);
  vertex(180, 380);
  vertex(80, 380);
  beginContour();
  vertex(110, 330);
  vertex(150, 330);
  vertex(150, 360);
  vertex(110, 360);
  endContour();
  endShape(CLOSE);
}

// setup is one process
function setup() {
  // The line below creates a canvas which is a square and the numbers have somethign to do with it's size
  createCanvas(500, 300); // createCanvas is to create an Canvas! the first number is width, the second is height; more than one number needs to indicated by separating with a comma
  

}


// and draw is another
function draw() {
  
 
  
  // the call of a function
  // ways of encoding color in p5: 
  // one number 0-255 will be greyscale
  // RGB color - red, green, and blue. the range is 0-255
  // #hex color: ex. "#867065" - be sure to use quotation marks
  background("#948882"); // the number changes the color, 0 or less is black; 220 is light grey; 255 is the max which white
  
  // system varibles: width and height
  // there are two ways to affect a shape's color: fill(), stroke()
 // order to draw a shape w. color is as follows:
  // fill() and/or stroke() THEN
  // shape function: ellipse, circle, square, beginShape
  
  
  //TORSO
  // chest
  fill("green")
  noStroke();
  quad(151,193,328,191,290,317,191,320);//x1,y1,x2,y,x3,y3,x4,y4
  
  // neck
  fill("pink");
  arc(250,192,50,50,0,3.14);
  
  // HEAD
  // Face
  noStroke();
  fill("rgb(240,204,210)");
  ellipse(width/2,150,70,height/3); // (x, y, w, h)

  
  //left eye
  fill("rgb(228,220,220)");
  ellipse(235,134,30,15);
   // left retina 
    fill("rgb(133,26,26)");
    circle(235,134,10); // x,y,w
  // nose 
  stroke("rgb(213,133,146)");
  strokeCap(ROUND);
  strokeWeight(3)
  line(251,134,257,153);
  line(257,153,250,156);
   console.log(mouseX,mouseY);
  
  
  square(0,0,50); // x,y,50 -- x and y are the top left corner! 
  circle(0,0,50); // x and y is the center! of the circle
  
  rect(40,40,20,30);// x,y,w,h
  
  
  
}