Example 11 - Random

// Example 11 - Random

// globals
var a,b,c,d,choices;

function setup() {

  createCanvas(640, 480);

  // no stroke, green fill
  noStroke();
  textSize(18);

  choices = ["A","AB","BA","C"];
  setRandom();
}

// Each frame print values for random values
function draw() {
  background(192);
  text("random(-5,5) = " + a, 0.25*width, 0.2*height);
  text("random(5) = " + b, 0.25*width, 0.4*height);
  text("random() = " + c, 0.25*width, 0.6*height);
  text("random(choices) = " + d, 0.25*width, 0.8*height);
}

// call setRandom whenever mouse is clicked
function mousePressed() {
  setRandom();
}

// new values for the random variables
function setRandom(){
  a = random(-5,5);
  b = random(5);
  c = random();
  d = random(choices);
}

Output:

Example 10 - Text

// Example 10 - Text

function setup() {

  createCanvas(640, 480);
  // gray background
  background(192);

  // black stroke of weight 2, green fill
  stroke(0);
  strokeWeight(2);
  fill(0, 255, 0)
  
  // Size of text, center in text box
  textSize(64);
  textAlign(CENTER, CENTER);
  
  // text box size of width/2, height/2
  // top left anchor at width/4, height/4
  text("Hello World!!!", 0.25*width, 0.25*height, 0.5*width, 0.5*height);

}

Output:

Example 9 - Point

// Example 9 - Point

function setup() {

  createCanvas(640, 480);
  // gray background
  background(192);

  // magenta stroke of 50
  stroke(255, 0, 255);
  strokeWeight(50);
  
  // top-left
  point(0.25*width, 0.25*height);
  
  // top-right
  point(0.75*width, 0.25*height);

  // bottom-left
  point(0.25*width, 0.75*height);

  // bottom-right
  point(0.75*width, 0.75*height);
}

Output:

Example 8 - Arc

// Example 8 - Arc

function setup() {

  createCanvas(640, 480);
  // gray background
  background(192);

  // magenta stroke of 5, green fill
  stroke(255, 0, 255);
  strokeWeight(5);
  fill(0, 255, 0);

  // top-left - default mode
  arc(0.25*width, 0.25*height, 200, 100, 0, 1.5*PI);
  
  // top-right - OPEN mode
  arc(0.75*width, 0.25*height, 200, 100, 0, 1.5*PI, OPEN);

  // bottom-left - CHORD mode
  arc(0.25*width, 0.75*height, 200, 100, 0, 1.5*PI, CHORD);

  // bottom-right - PIE mode
  arc(0.75*width, 0.75*height, 200, 100, 0, 1.5*PI, PIE);

}

Output:

Example 7 - Line

// Example 7 - Line

function setup() {

  createCanvas(640, 480);
  // gray background
  background(128);

  // magenta stroke of 5
  stroke(255, 0, 255);
  strokeWeight(5);

  // 2 horizontal lines
  line(10, 10, width-10, 10);
  line(10, height-10, width-10, height-10);

  // 3 vertical lines
  line(10, 10, 10, height-10);
  line(width/2, 10, width/2, height-10);
  line(width-10, 10, width-10, height-10);
}

Output:

Example 6 - Ellipse

// Example 6 - Ellipse

function setup() {

  createCanvas(640, 480);
  // yellow background
  background(255, 255, 0);

  // no stroke, fill blue
  noStroke();
  fill(0, 0, 255);

  // ellipse
  ellipse(width/2, height/2, 100, 50);
}

Output:

Example 5 - Color and noFill

// Example 5 - Color and noFill


function setup() {

  var border = 100; 

  createCanvas(640, 480);
  // red = 255, no green, no blue
  background(255, 0, 0);

  // red = green = blue = 64 (gray)
  stroke(64);
  strokeWeight(8);
  noFill();

  // rect border from the sides
  rect(border, border,
       width - 2 * border, height - 2 * border);
}

Output:

Example 4 - Lime Rectangle on Red background using width and height

// Example 4 - Lime Rectangle on Red background using width and height


function setup() {

  createCanvas(640, 480);
  background('red');

  stroke('blue');
  strokeWeight(8);
  fill('lime');

  // width and height are p5 variables
  // created from createCanvas
  rect(50, 50, width - 100, height - 100);
}

Example 3 - Lime Rounded Rectangle on Red background

// Example 3 - Lime Rounded Rectangle on Red background 

function setup() {

  createCanvas(640, 480);
  background('red');

  stroke('blue');
  strokeWeight(8);
  fill('lime');

  // top radius are 5 and 10 (less rounded)
  // bottom radius are 15 and 20 (more rounded)
  rect(50, 50, 640 - 100, 480 - 100, 5, 10, 15, 20);
}

Output:

Example 2 - Lime Rectangle on Red background

// Example 2 - Lime Rectangle on Red background

function setup() {

  createCanvas(640, 480);
  background('red');

  stroke('blue');
  strokeWeight(8);

  fill('lime');

  // rectangle is 50 pixels from the 4 sides
  // thus width and height is 100 less
  rect(50, 50, 640 - 100, 480 - 100);
}

Output:

Example 1 - Lime Triangle on Red background

// Example 1 - Lime Triangle on Red background

function setup() {

  // canvas size of 640 by 480 with red background 
  createCanvas(640, 480);
  background('red');

  // stroke of blue with weight of 8, and fill of lime
  stroke('blue');
  strokeWeight(8);
  fill('lime');
  
  // triangle with points of 3 vertices
  triangle(50, 50, 640-50, 50, 640-50, 480-50);
}

Output: