Refactoring Code

Quick Overview of Day

Refactor existing code to increase elegance.

Introduction to Refactoring Code

Insert Stefan’s presentation here… (code refactorization, saved in Google Drive CS20-30 IS Team)

Using Functions to Increase Readability

Let’s improve the following code by using functions. Three logical functions to use might be move, bounce and display.

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

// Example 5-6: Bouncing Ball
let x = 0;
let speed = 1;

function setup() {
    size(200,200);
}

function draw() {
    background(255);

    // Add the current speed to the x location.
    x = x + speed;

    // Remember, || means "or."
    if ((x > width) || (x < 0)) {
        // If the object reaches either edge, multiply speed by -1 to turn it around.
        speed = speed * -1;
    }

    // Display circle at x location
    stroke(0);
    fill(175);
    ellipse(x,100,32,32);
}

Bouncing Rectangle

Refactor the following code. Be sure the functionality of the program remains the same once you have completed your refactoring.

    let a,b,c,d;
function setup() {
createCanvas(windowWidth, windowHeight);
a=200; b=300; c=random(3,8); d=random(3,8);
}
function draw() {
a+=c; b+=d;
if (b>=height-75||b<=0){d=d*-1;}
if (a>=width-250||a<=0){c=c*-1;}
background(80,80,80);
rect(a,b,250,75);
}

Rollover

Refactor the following code. Be sure the functionality of the program remains the same once you have completed your refactoring.

// This example is adapted from Learning Processing Example 5-3 by Daniel Shiffman
// http://www.learningprocessing.com
// Refactor the following code. Be sure the refactored version:
//  - is readable
//  - is able to work easily with any canvas size

function setup() {createCanvas(480, 270);}
function draw() {
background(255);stroke(0);line(240, 0, 240, 270);line(0, 135, 480, 135);
noStroke();fill(0);
if (mouseX<240&&mouseY<135){rect(0,0,240,135);}
else if (mouseX>240&&mouseY<135){rect(240,0,240,135);}
else if (mouseX<240&&mouseY>135){rect(0,135,240,135);}
else if (mouseX>240&&mouseY>135){rect(240,135,240,135);}}

Target

Refactor the following code. Be sure the functionality of the program remains the same once you have completed your refactoring.

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

function draw() {
background(240);
ellipse(200, 200, 400, 400);
ellipse(200, 200, 360, 360);
ellipse(200, 200, 320, 320);
ellipse(200, 200, 280, 280);
ellipse(200, 200, 240, 240);
ellipse(200, 200, 200, 200);
ellipse(200, 200, 160, 160);
ellipse(200, 200, 120, 120);
ellipse(200, 200, 80, 80);
ellipse(200, 200, 40, 40);
}

Colorful Target

Refactor the following code. Be sure the functionality of the program remains the same once you have completed your refactoring.

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

function draw() {
background(240);
stroke(200);
fill("white");
ellipse(200, 200, 400, 400);
fill("white");
ellipse(200, 200, 360, 360);
fill("black");
ellipse(200, 200, 320, 320);
fill("black");
ellipse(200, 200, 280, 280);
fill("blue");
ellipse(200, 200, 240, 240);
fill("blue");
ellipse(200, 200, 200, 200);
fill("red");
ellipse(200, 200, 160, 160);
fill("red");
ellipse(200, 200, 120, 120);
fill("yellow");
ellipse(200, 200, 80, 80);
fill("yellow");
ellipse(200, 200, 40, 40);
}

Chess Board

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

function draw() {
fill(255);
rect(0,0,75,75);
fill(0);
rect(0,75,75,75);
fill(255);
rect(0,150,75,75);
fill(0);
rect(0,225,75,75);
fill(255);
rect(0,300,75,75);
fill(0);
rect(0,375,75,75);
fill(255);
rect(0,450,75,75);
fill(0);
rect(0,525,75,75);
fill(0);
rect(75,0,75,75);
fill(255);
rect(75,75,75,75);
fill(0);
rect(75,150,75,75);
fill(255);
rect(75,225,75,75);
fill(0);
rect(75,300,75,75);
fill(255);
rect(75,375,75,75);
fill(0);
rect(75,450,75,75);
fill(255);
rect(75,525,75,75);
fill(255);
rect(150,0,75,75);
fill(0);
rect(150,75,75,75);
fill(255);
rect(150,150,75,75);
fill(0);
rect(150,225,75,75);
fill(255);
rect(150,300,75,75);
fill(0);
rect(150,375,75,75);
fill(255);
rect(150,450,75,75);
fill(0);
rect(150,525,75,75);
fill(0);
rect(225,0,75,75);
fill(255);
rect(225,75,75,75);
fill(0);
rect(225,150,75,75);
fill(255);
rect(225,225,75,75);
fill(0);
rect(225,300,75,75);
fill(255);
rect(225,375,75,75);
fill(0);
rect(225,450,75,75);
fill(255);
rect(225,525,75,75);
fill(255);
rect(300,0,75,75);
fill(0);
rect(300,75,75,75);
fill(255);
rect(300,150,75,75);
fill(0);
rect(300,225,75,75);
fill(255);
rect(300,300,75,75);
fill(0);
rect(300,375,75,75);
fill(255);
rect(300,450,75,75);
fill(0);
rect(300,525,75,75);
fill(0);
rect(375,0,75,75);
fill(255);
rect(375,75,75,75);
fill(0);
rect(375,150,75,75);
fill(255);
rect(375,225,75,75);
fill(0);
rect(375,300,75,75);
fill(255);
rect(375,375,75,75);
fill(0);
rect(375,450,75,75);
fill(255);
rect(375,525,75,75);
fill(255);
rect(450,0,75,75);
fill(0);
rect(450,75,75,75);
fill(255);
rect(450,150,75,75);
fill(0);
rect(450,225,75,75);
fill(255);
rect(450,300,75,75);
fill(0);
rect(450,375,75,75);
fill(255);
rect(450,450,75,75);
fill(0);
rect(450,525,75,75);
fill(0);
rect(525,0,75,75);
fill(255);
rect(525,75,75,75);
fill(0);
rect(525,150,75,75);
fill(255);
rect(525,225,75,75);
fill(0);
rect(525,300,75,75);
fill(255);
rect(525,375,75,75);
fill(0);
rect(525,450,75,75);
fill(255);
rect(525,525,75,75);
}