ITP ICM F15 | Week 1 Drawing

01_drawing.js

// Example 1-1: stroke and fill

function setup() {
  createCanvas(480, 270);
  stroke(0); 
  fill(150);
}

function draw() {
  background(255);
  rect(50,50,75,100);
}



// Example 1-2: noFill
function setup() {
  createCanvas(480, 270);
  // noFill() leaves the shape with only an outline.
  noFill();
  stroke(0);
}

function draw() {
  background(255);
  ellipse(60,60,100,100);
}

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 1-3: RGB Color
function setup() {
  noStroke();
}

function draw() {

  background(255);
  
  // Bright red
  fill(255,0,0);
  ellipse(20,20,16,16);

  // Dark red
  fill(127,0,0);
  ellipse(40,20,16,16);

  // Pink (pale red)
  fill(255,200,200);
  ellipse(60,20,16,16);
}

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 1-4: Alpha Transparency
function setup() {
  createCanvas(480, 270);
  noStroke();
}

function draw() {
  
  background(0);

  // No fourth argument means 100% opacity.
  fill(0, 0, 255);
  rect(0, 0, 240, 200);

  // 255 means 100% opacity.
  fill(255, 0, 0, 255);
  rect(0, 0, 480, 40);

  // 75% opacity.
  fill(255, 0, 0, 191);
  rect(0, 50, 480, 40);

  // 55% opacity.
  fill(255, 0, 0, 127);
  rect(0, 100, 480, 40);

  // 25% opacity.
  fill(255, 0, 0, 63);
  rect(0, 150, 480, 40);
}


// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 1-5: Zoog
function setup() {
  createCanvas(480, 270);
  ellipseMode(CENTER);
  rectMode(CENTER); 
}

function draw() {
  
  background(255);

  // Body
  stroke(0);
  fill(150);
  rect(240, 145, 20, 100);

  // Head
  fill(255);
  ellipse(240, 115, 60, 60); 

  // Eyes
  fill(0); 
  ellipse(221, 115, 16, 32); 
  ellipse(259, 115, 16, 32);

  // Legs
  stroke(0);
  line(230, 195, 220, 205);
  line(250, 195, 260, 205); 
}