Note: Most of the content of this page is inside toggles. Click on the triangles to disclose the code.
‣
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
fill("white");
circle(85, 200, 80);
fill("blue");
circle(85, 200, 80-30);
fill("black");
circle(85, 200, 15);
fill("white");
circle(185, 200, 80);
fill("blue");
circle(185, 200, 80-30);
fill("black");
circle(185, 200, 30);
fill("purple");
rect(55, 310, 180, 20);
circle(55, 305, 60);
circle(55+170, 305, 60);
}
‣
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
// fill("white");
// circle(85, 200, 80);
// fill("blue");
// circle(85, 200, 80-30);
// fill("black");
// circle(85, 200, 15);
fill("white");
circle(185, 200, 80);
fill("blue");
circle(185, 200, 80-30);
fill("black");
circle(185, 200, 30);
fill("purple");
rect(55, 310, 180, 20);
circle(55, 305, 60);
circle(55+170, 305, 60);
}
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
// left eye
fill("white");
circle(85, 200, 80);
fill("blue");
circle(85, 200, 80-30);
fill("black");
circle(85, 200, 15);
// fill("white");
// circle(185, 200, 80);
// fill("blue");
// circle(185, 200, 80-30);
// fill("black");
// circle(185, 200, 30);
fill("purple");
rect(55, 310, 180, 20);
circle(55, 305, 60);
circle(55+170, 305, 60);
}
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
// left eye
fill("white");
circle(85, 200, 80);
fill("blue");
circle(85, 200, 80-30);
fill("black");
circle(85, 200, 15);
// right eye
fill("white");
circle(185, 200, 80);
fill("blue");
circle(185, 200, 80-30);
fill("black");
circle(185, 200, 30);
// fill("purple");
// rect(55, 310, 180, 20);
// circle(55, 305, 60);
// circle(55+170, 305, 60);
}
‣
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
// left eye
fill("white");
circle(85, 200, 80);
fill("blue");
circle(85, 200, 80-30);
fill("black");
circle(85, 200, 15);
// right eye
fill("white");
circle(185, 200, 80);
fill("blue");
circle(185, 200, 80-30);
fill("black");
circle(185, 200, 30);
// mouth
fill("purple");
rect(55, 310, 180, 20);
circle(55, 305, 60);
circle(55+170, 305, 60);
}
‣
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
// left eye
leftEye();
// right eye
fill("white");
circle(185, 200, 80);
fill("blue");
circle(185, 200, 80-30);
fill("black");
circle(185, 200, 30);
// mouth
fill("purple");
rect(55, 310, 180, 20);
circle(55, 305, 60);
circle(55+170, 305, 60);
}
function leftEye() {
fill("white");
circle(85, 200, 80);
fill("blue");
circle(85, 200, 80-30);
fill("black");
circle(85, 200, 15);
}
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
// left eye
leftEye();
// right eye
rightEye();
// mouth
fill("purple");
rect(55, 310, 180, 20);
circle(55, 305, 60);
circle(55+170, 305, 60);
}
function leftEye() {
fill("white");
circle(85, 200, 80);
fill("blue");
circle(85, 200, 80-30);
fill("black");
circle(85, 200, 15);
}
function rightEye() {
fill("white");
circle(185, 200, 80);
fill("blue");
circle(185, 200, 80-30);
fill("black");
circle(185, 200, 30);
}
function setup() {
createCanvas(windowWidth, windowHeight);
background("pink");
}
function draw() {
// left eye
leftEye();
// right eye
rightEye();
// mouth
mouth();
}
function leftEye() {
fill("white");
circle(85, 200, 80);
fill("blue");
circle(85, 200, 80-30);
fill("black");
circle(85, 200, 15);
}
function rightEye() {
fill("white");
circle(185, 200, 80);
fill("blue");
circle(185, 200, 80-30);
fill("black");
circle(185, 200, 30);
}
function mouth() {
fill("purple");
rect(55, 310, 180, 20);
circle(55, 305, 60);
circle(55+170, 305, 60);
}
‣
function draw() {
leftEye();
rightEye();
mouth();
}
‣
function draw() {
f1(); // draw the left eye
f2(); // draw the right eye
f3(); // draw the mouth
}
function f1() {
// …
}
function f2() {
// …
}
function f3() {
// …
}
‣
function leftEye() {
let xCenter = 85;
let yCenter = 200;
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, 15);
}
function rightEye() {
let xCenter = 185;
let yCenter = 200;
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, 30);
}
‣
let
variables into function parameters, that receive their values from where they are usedfunction draw() {
leftEye(85, 200);
rightEye();
mouth();
}
function leftEye(xCenter, yCenter) {
// let xCenter = 85;
// let yCenter = 200;
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, 15);
}
function draw() {
leftEye(85, 200);
rightEye(185, 200);
mouth();
}
function leftEye(xCenter, yCenter) {
// let xCenter = 85;
// let yCenter = 200;
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, 15);
}
function rightEye(xCenter, yCenter) {
// let xCenter = 185;
// let yCenter = 200;
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, 30);
}
‣
leftEye
and rightEye
is the pupil size. Parameterize it too, so that the functions look the samefunction draw() {
leftEye(85, 200, 15);
rightEye(185, 200, 30);
mouth();
}
function leftEye(xCenter, yCenter, pupilSize) {
// let pupilSize = 15;
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, pupilSize);
}
function rightEye(xCenter, yCenter, pupilSize) {
// let pupilSize = 30;
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, pupilSize);
}
‣
leftEye
and rightEye
have the exact same definition. We could delete rightEye
and use leftEye
twicefunction draw() {
leftEye(85, 200, 15);
leftEye(185, 200, 30);
mouth();
}
function leftEye(xCenter, yCenter, pupilSize) {
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, pupilSize);
}
‣
leftEye
is used to draw both eyes, rename it to eye
function draw() {
eye(85, 200, 15);
eye(185, 200, 30);
mouth();
}
function eye(xCenter, yCenter, pupilSize) {
fill("white");
circle(xCenter, yCenter, 80);
fill("blue");
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, pupilSize);
}
‣
eye
a third timefunction draw() {
eye(85, 200, 15);
eye(185, 200, 30);
eye((185 + 85) / 2, 200 - 50, 5);
mouth();
}
‣
function draw() {
eye(85, 200, 15, 'blue');
eye(185, 200, 30, 'blue');
eye((185 + 85) / 2, 200 - 50, 5, 'green');
mouth();
}
function eye(xCenter, yCenter, pupilSize, irisColor) {
fill("white");
circle(xCenter, yCenter, 80);
fill(irisColor);
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, pupilSize);
}
‣
function draw() {
eye({ xCenter: 85, yCenter: 200, pupilSize: 15, irisColor: 'blue' });
eye({ xCenter: 185, yCenter: 200, pupilSize: 30, irisColor: 'blue' });
eye({ xCenter: (185 + 85) / 2, yCenter: 200 - 50, pupilSize: 5, irisColor: 'green' });
mouth();
}
function eye({ xCenter, yCenter, pupilSize, irisColor }) {
fill("white");
circle(xCenter, yCenter, 80);
fill(irisColor);
circle(xCenter, yCenter, 80-30);
fill("black");
circle(xCenter, yCenter, pupilSize);
}
©2020–2022 by Oliver Steele.