One with Everything

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  // You don't have to put things in a grid like I did here. The reason I did that

  //   was for this sketch to also serve as a tutorial. You can follow the code top to

  //   bottom, and see what shapes get drawn left to right, top to bottom in the canvas

  // Some of you may want to do the gnarliest, weirdest programming thing you can think of

  // Others may want to create a beautiful, balanced composition

  // No matter what, your approach is valid. The goal is to experiment with shapes and learn

  // about placement and calling some of the drawing functions in p5.js

  // Create three of these compositions for Tuesday's class, and ask questions in Discord!

  // Rectangle (https://p5js.org/reference/#/p5/rect)

  // noStroke—turns the outline off (https://p5js.org/reference/#/p5/noStroke)

  noStroke();

  fill(255);

  rect(30, 10, 90, 120);

  // stroke—sets the stroke to whatever color you put inside the parens

  //  https://p5js.org/reference/#/p5/stroke

  // Ellipse (https://p5js.org/reference/#/p5/ellipse)

  stroke(0);

  ellipse(200, 70, 80, 50);

  // strokeWeight—makes the stroke thicker or thinner, depending on the number

  //  https://p5js.org/reference/#/p5/strokeWeight

  // Circle (https://p5js.org/reference/#/p5/circle)

  strokeWeight(8);

  circle(333, 70, 100)

  // You may notice that the stroke functions cause their changes to "stick"

  //   In other words, once I set the strokeWeight above, it makes the stroke on

  //   *all* the shapes that have one pretty thick. We can "turn it off" by

  //   "calling" strokeWeight again with a different number

  // Line (https://p5js.org/reference/#/p5/line)

  strokeWeight(2);

  line(30, 160, 120, 260);

  // noFill—removes the fill inside of a shape (https://p5js.org/reference/#/p5/noFill)

  // Square—you can add rounded corners with extra numbers (https://p5js.org/reference/#/p5/square)

  noFill();

  square(170, 170, 55, 20);

  // Just like with the stroke functions, you might notice that using noFill changes 

  //   the fill for *all* of the shapes with a fill. We can reset, or "turn it off", 

  //   by calling "fill" with another value

  fill(255);

  strokeWeight(10);

  point(330, 200);

  // You'll eventually get used to being specific with your stroke, weight, and fill values

  //   for the shapes you want to draw, since those settings carry over to subsequent shapes

  // Arc—ellipses with start and end angles (https://p5js.org/reference/#/p5/arc)

  strokeWeight(1);

  arc(75, 330, 80, 80, QUARTER_PI, TWO_PI - QUARTER_PI, PIE);

  // Quad (https://p5js.org/reference/#/p5/quad)

  quad(180, 350, 170, 340, 280, 300, 250, 370);

  // Triangle (https://p5js.org/reference/#/p5/triangle)

  triangle(340, 300, 380, 340, 300, 390);

  // Curve (https://p5js.org/reference/#/p5/curve)

  // Finally, we'll connect some dots around some shapes with a series of curves

  strokeWeight(2);

  noFill();

  strokeWeight(8);

  stroke("red");

  point(100, 188);

  point(140, 104);

  strokeWeight(2);

  stroke("white");

  curve(200, 300, 100, 188, 140, 104, 140, 24);

  strokeWeight(8);

  stroke("red");

  point(200, 24);

  strokeWeight(2);

  stroke("white");

  curve(140, 400, 140, 104, 200, 24, 400, 24);

  strokeWeight(8);

  stroke("red");

  point(260, 104);

  strokeWeight(2);

  stroke("white");

  curve(0, 24, 200, 24, 260, 104, 260, 400);

  strokeWeight(8);

  stroke("red");

  point(300, 188);

  strokeWeight(2);

  stroke("white");

  curve(260, 0, 260, 104, 300, 188, 400, 24);

}