September 4

15-104 Lecture 3 Notes, 9/4/15

Prof. Roger B. Dannenberg

Once again, this is an outline and some pointers to material.

Cookies in Chrome and WordPress

If you are having problems with WordPress using Chrome browser, try using Preferences / Settings / Show advanced settings … / Privacy / Content Settings / Cookies / Allow local data to be set (recommended)

Using Chrome

See:

Chrome Developer Tools

Introduction to Using Variables

JS Variables
vars
sketch

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com
// Example 4-2: Using variables
// Declare and initialize two integer variables at the top of the code.

var circleX = 100;
var circleY = 100;

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

function draw() {
    background(255);
    stroke(0);
    fill(175);
    // Use the variables to specify the location of an ellipse.
    ellipse(circleX,circleY,50,50);
}
// triangle to the right of ellipse

var y = 100;
var x = 50;

function setup() {
    // set canvas size
    createCanvas(400, 200);
}
     
function draw() {
    // set background color
    background(200, 200, 225);
     
    // set a fill color (red, green, blue)
    fill(0, 180, 180);
    // set stroke properties
    stroke(0, 0, 255);
    strokeWeight(10);
    // draw a circle
    ellipse(x, y, 100, 100);
    // set a new fill color
    fill(255, 0, 0);
    // set a new stroke property
    noStroke();
    // draw a triangle
    triangle(x + 100, y + 50, x + 150, y - 75, x + 210, y + 50);
}

Simple Arithmetic

Order of Operations

Mouse Input

sketch

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

function draw() {
  background(200, 250, 200);
  ellipse(mouseX, mouseY, 100, 100);
  // try this:
  // ellipse(100, 100, mouseX, mouseY);
}