Screen Recording 2020-09-27 at 11.29.28 PM
The Entire action is recorded ^^^
Here is the link to my P5.js Editor:
https://editor.p5js.org/xues00/sketches/mgbW2FEcH
Here are my Codes:
x = 0;
y = 0;
value = 0;
function setup() {
createCanvas(400, 400);
rectMode(CENTER);
}
function draw() {
//
background(237, 34, 93);
mouseClicked()
keyPressed()
fill(value);
strokeWeight(value)
line(0, 0, 400, 400);
}
function keyPressed() {
if (keyCode === LEFT_ARROW) {
value = value + 0.1;
} else if (keyCode === RIGHT_ARROW) {
value = 10;
}
}
function mouseClicked() {
if (x > 400) {
x -= 2;
} else if (x < 400) {
x += 2;
}
x += floor(movedX + 10);
if (x > 400) {
x = 0;
}
fill(278, 100, 35);
rect(x, 50, 50, 50);
ellipse(mouseX, mouseY, 100, 100);
}
Reflection:
In this project, I used keyPressed, mousePressed, if statement, and interactive functions.
Coding with functions is much harder than simply drawing. Besides difficulties with connection, I also had trouble recognizing different error types, for which I had to go back to the slides or scrutinize the codes line by line. It is definitely a tedious and laborious process. However, as I familiarized myself with the difference between “define function(){}” and “draw function()”, it became much easier to just let the codes flow. It certainly takes countless practice to achieve precision and dexterity.
One thing that was helpful in this process was to mute some phrases to see if there is any differences. There were many times where I typed dysfunctional syntax, though having the correct “grammar”, the visuals are not shown in the graph and muting line my line really helps to quickly detect error.