_19.15.39.png)
For week 5 I feel I understood more about functions. However, I am not entirely sure that I was able to fully exploit it’s functionality, specially when talking about making a function completely reusable. I feel that I had problems with making it completely independent and, therefore, it stopped connecting with global variables, making the code break at some point. It was a little frustrating and, because of midterms, I feel that I was not able to make some time for a proper office hours meeting. But it’s okay, I tried my best here this week.
So, talking about the worksheet. This was Q1’s code.
function setup() {
// Create drawing canvas
createCanvas(400, 400);
// Dark gray background
background(120);
x = face();
eyes();
eyebrows();
antenna();
mouth();
arms();
body();
}
function face() {
// Purple face
fill(127, 0, 127);
ellipse(200, 200, 150, 200);
}
function eyes() {
// Green eyes
fill(0, 200, 127);
ellipse(150, 150, 70, 40);
ellipse(250, 150, 40, 60);
// Black pupils
fill(0);
ellipse(170, 150, 5, 5);
ellipse(270, 150, 10, 10);
}
function eyebrows() {
// Orange eyebrows
stroke(255, 100, 100);
strokeWeight(15);
line(130, 110, 170, 120);
line(230, 105, 270, 100);
}
function antenna() {
// Antenna
stroke(255);
strokeWeight(5);
line(200, 125, 200, 50);
// No fill
noFill();
ellipse(200, 40, 20, 20);
}
function mouth() {
// No stroke
noStroke();
// Pink mouth
fill(255, 0, 127);
ellipse(200, 250, 50, 20);
}
function arms() {
// Black arms
stroke(0);
strokeWeight(30);
line(150, 350, 300, 300);
}
function body() {
// No stroke
noStroke();
// Yellow body
fill(255, 255, 0);
rect(150, 275, 100, 200);
}
I feel I understood how to separate them in a way that makes sense to me. However, for the next question, I felt this way didn’t make sense anymore to achieve the intended functionality.
Well, in Q2, the code was the following.
function setup() {
// Create drawing canvas
createCanvas(400, 400);
// Dark gray background
background(120);
x = face();
eye(150, 150, 70, 40);
eye(250, 150, 40, 60);
eye(200, 200, 40, 40);
pupil(170, 150, 5, 5);
pupil(270, 150, 10, 10);
pupil(215, 200, 5, 5)
eyebrows();
antenna();
mouth();
arms();
body();
}
function face() {
// Purple face
fill(127, 0, 127);
ellipse(200, 200, 150, 200);
}
function eye(x, y, r1, r2) {
// Green eyes
fill(0, 200, 127);
ellipse(x, y, r1, r2);
}
function pupil(x, y, r1, r2){
// Black pupils
fill(0);
ellipse(x, y, r1, r2);
ellipse();
}
function eyebrows() {
// Orange eyebrows
stroke(255, 100, 100);
strokeWeight(15);
line(130, 110, 170, 120);
line(230, 105, 270, 100);
}
function antenna() {
// Antenna
stroke(255);
strokeWeight(5);
line(200, 125, 200, 50);
// No fill
noFill();
ellipse(200, 40, 20, 20);
}
function mouth() {
// No stroke
noStroke();
// Pink mouth
fill(255, 0, 127);
ellipse(200, 250, 50, 20);
}
function arms() {
// Black arms
stroke(0);
strokeWeight(30);
line(150, 350, 300, 300);
}
function body() {
// No stroke
noStroke();
// Yellow body
fill(255, 255, 0);
rect(150, 275, 100, 200);
}
This is the image I came up with. I was trying to have more control over each eye. But because they are composed by eye and pupil, I felt it was needed to have them separated as well.
I am not entirely sure if I did Q3 correctly. But it feels like this could be reusable in any code, so that’s what I did.
let result;
function setup() {
createCanvas(400, 400);
result = numSum(4,5);
print(result);
}
function draw() {
background(220);
}
function numSum(a, b){
return a + b;
}
For Q4, I felt I was struggling to separate the functions from the global variables. I think that would make them not reusable as the rule says. But I wasn’t able to make them work in other way and I am not sure what I am doing wrong. I feel like I only organize them, but I am having trouble abstracting the whole capabilities of a function.
let result;
function setup() {
createCanvas(400, 400);
result = numSum(4,5);
print(result);
}
function draw() {
background(220);
}
function numSum(a, b){
return a + b;
}
In my sketch using the self portrait, I tried to do something different with it because I felt that I am still pending to understand and learn more about coding in P5.js. So I wanted to try something different. However, I am having trouble making interactive sketches that can move in a cool way. Maybe I get lost in the code somehow. Also I feel like I tend to make my code quite complex even for the simplest things. Arjun has mentioned something about it but I still haven’t figured it out. Anyways, here’s my code and what it does. I change the face because I wasn’t able to find a way to stick it together but I managed to make it do something different and organize it with functions, as well as dive a little into classes.
var s;
let x, y, d;
let fX, fY;
let fXspeed = 4;
let fYspeed = 5;
let col = 10;
let Balls = [];
function setup() {
createCanvas(600, 500);
x = width / col;
y = height / col;
fX = 1;
fY = 1;
// distance = dist(x,y,mouseX,mouseY);
d = random(80, 160);
for (let i = 0; i < col; i++) {
Balls[i] = [];
for (let j = 0; j < col; j++) {
Balls[i][j] = new ball(j * x, i * y, random(d) / 2);
}
}
print(Balls);
}
function draw() {
background(0, 190, 200);
for (let i = 0; i < col; i++) {
for (let j = 0; j < col; j++) {
Balls[i][j].show();
}
}
moveFace();
drawFace(fX, fY);
bounceFace();
}
class ball {
constructor(_x, _y, _d) {
this.x = _x;
this.y = _y;
this.base = _d;
this.d = _d;
}
show() {
noStroke();
fill(255);
circle(this.x, this.y, this.d);
}
}
function drawFace(faceX, faceY) {
push();
translate(faceX, faceY);
head();
eyes();
mouth();
// nose();
// hair();
pop();
}
function bounceFace() {
if (fX < 0 || fX > width) {
fXspeed *= -1;
}
if (fY < 0 || fY > height) {
fYspeed *= -1;
}
}
function moveFace() {
fX += fXspeed;
fY += fYspeed;
}
function head() {
//helmet like skin colour part
noStroke();
fill(130, 20, 18);
//300,250
arc(0 + d / 2, 50 - d / 2, 255, 255, HALF_PI + QUARTER_PI, PI + PI, PIE);
//pink rest of the head
noStroke();
//stroke(255, 255, 200);
//strokeWeight(2);
fill(230, 250, 250);
arc(0 + d / 2, 50 - d / 2, 200, 200, 0, HALF_PI + QUARTER_PI);
}
function eyes() {
//right eye small circle
fill(80, 230, 142);
stroke(84, 111, 114);
strokeWeight(2);
circle(100, -30, 30);
//left eye ellipse
fill(250, 199, 80);
stroke(199, 129, 80);
strokeWeight(5);
ellipse(0, -40, 60, 100);
}
function mouth() {
//mouth-like rectangle
fill(71, 70, 64);
stroke(255, 214, 206);
strokeWeight(5);
rect(30, 30, 60, 10);
}
function hair() {
noStroke();
fill(190, 81, 3);
triangle(-20, -175, 200, 200, -190, -100);
noStroke();
fill(190, 81, 3);
triangle(30, -180, 200, -80, -120, -170);
}
function nose() {
//nose triangle
stroke(71, 70, 64);
strokeWeight(2);
fill(190, 183, 80);
triangle(0, -50, 50, -110, 100, 0);
}