Okay! Here we go with week 3! Definitely getting the pace a little bit more after catching up since I arrived. This has been a good week to learn to code. I am not going to lie, I still get confused with the syntax between Arduino and P5js. However, I feel I am making some progress.
First, Jua and I worked on the team assignment. We thought about creating a little game with a ball bouncing, letting you decide on which side to choose. However, it immediately goes back and lets you reconsider your choice and keep playing indefinitely. We worked together on the code in general, but also divided the logic thinking. I was defining the statements part while Jua was defining the actions that were about to happen if those statements were true of false. I added a couple of notes to our code to better portrait who did what after a certain point.
let x;
let y;
let speed = 10;
function setup() {
createCanvas(800, 800);
x = width / 2;
y = height;
}
function draw() {
background(220);
fill(250, 0, 0);
rect(0, 0, 400, 200); //left rectangle
fill(0, 0, 250);
rect(400, 0, 400, 200); // right rectangle
//drawing ball
fill(250);
x = mouseX;
circle(x, y, 30);
y -= speed;
if (x < width / 2 && y < 200) { // ivan
// jua
fill(100, 220, 80);
rect(0, 0, 400, 200);
fill(250);
circle(x, y, 30);
} else if (x > width / 2 && y < 200) {// ivan
//jua
fill(100, 220, 80);
rect(400, 0, 400, 200);
fill(250);
circle(x, y, 30);
}
if (y >= height || y <= 0) {//ivan
//jua
speed = speed * -1;
}
}
After that, I tackled the worksheet exercises. It was challenging and having some support from Mimi and a couple of amazing peers (shout out to Arjun, Matt and Anna), I was able to polish the understanding of a couple of crucial concepts to successfully achieve the worksheet’s exercises.
This is the code for Q1, I was able to make it work with the intended functionality. No problem on this one. Tried to make the statements as tidy as I could.
let colWidth;
let secCol;
let thirdCol;
function setup() {
createCanvas(400, 400);
colWidth = width / 3;
secCol = 2 * colWidth - colWidth;
thirdCol = 2 * colWidth;
}
function draw() {
background(220);
if (mouseX < colWidth) {
noStroke();
fill(0, 255, 140);
rect(0, 0, colWidth, height);
} else if (mouseX < (2 * width) / 3) {
noStroke();
fill(0, 255, 140);
rect(secCol, 0, colWidth, height);
} else {
noStroke();
fill(0, 255, 140);
rect(thirdCol, 0, colWidth, height);
}
}
For Q2, it was more of a challenge. This functionality was a little quirky for me. After my meeting with Mimi, I took some time to think about what we talked about and unravel the mystery. However, it was still hard for me to understand what I needed aside from another variable to separate the draw part from the switching from the ‘again’ part. Anna told me she is proficient with P5.js and later Matt joined too. Both being really good at coding and explaining, helped me think about the remaining things I needed to take into account. Together, we figured that the new variables were needed to check when the mouse moved over the column area and if it was coming from there as well. Because of this, a prevState variable and a curState variable would be created. These states would be updated and compared to each other each time the mouse comes back to the area. Once that was brought into the table, everything else became easier. The trick was in understanding that because draw( ) is always looping, you need to make this comparison for it to successfully toggle. This concept is a little bit different for me at the beginning specially coming from a background where you would need to actually use while and for loops to loop things in the first place, like when coding in C or C#. Hard to abstract! But really interesting to work around it.
let colWidth;
let secCol;
let thirdCol;
let prevState = false; /// saves the last previous state defaults to false
let curState = false; /// is the current state defaults to false
let active = false; /// shows the third column also default to false
function setup() {
createCanvas(400, 400);
colWidth = width / 3;
secCol = 2 * colWidth - colWidth;
thirdCol = 2 * colWidth;
}
function draw() {
background(220);
if (mouseX < colWidth) {
/// this part turns on and off the first and second columns like the last exercise
// paint the first column
noStroke();
fill(0, 255, 140);
rect(0, 0, colWidth, height);
} else if (mouseX < (2 * width) / 3) {
// paint the second column
noStroke();
fill(0, 255, 140);
rect(secCol, 0, colWidth, height);
}
// now for the third column
if (mouseX > thirdCol) {
// if the mouse is in the area
curState = true; // the current state updates to true
if (prevState !== curState) {
// check with previous state, only if the mouse was not there before the column switches to active or inactive
active = !active;
}
} else {
curState = false; // if the mouse is not in the area, the current state is false
}
// after deciding what the current state is, it now becomes the next prev state.
prevState = curState;
if (active) { // and if activek is true then draw the rect.
noStroke();
fill(0, 255, 140);
rect(thirdCol, 0, colWidth, height);
}
}
Q3 was also a hard one. Specially because at first I tried to make the slider from a knob perspective. In the end, I ran out of time to figure out how to turn my knob into slider functionality. However, I created a slider that would be connected to the knob. Making the knob just visual, but adding the slider functionality differently. Anna assisted me so much in this one because I was having a hard time figuring out how to be able to move a shape when the mouse is pressed!
//
let posX;
let posY;
let size;
let radius;
let sliderPosX;
let sliderPosY;
let circleX;
let circleY;
let knobPos;
let knobStep;
let circleColor;
let constrained_val;
let bcolor;
function setup() {
createCanvas(600, 600);
posX = width / 2;
posY = height / 2;
size = width / 2;
radius = 30 / 2;
sliderPosX = width / 6;
sliderPosY = height - height / 6;
circleX = sliderPosX;
circleY = sliderPosY + 5;
circleColor = color(222, 149, 100);
knobPos = posX / 4;
angleMode(RADIANS);
}
function draw() {
bcolor = map(circleX, 104,400, 0,255);
background(bcolor);
noStroke();
//back circle
fill(255, 100, 0);
circle(posX, posY, size);
//front circle
fill(255, 255, 0);
circle(posX, posY, size - 80);
fill(222, 149, 100);
rect(sliderPosX, sliderPosY, 400, 10);
if (
mouseIsPressed &&
mouseX > sliderPosX &&
mouseX < sliderPosX + 400 && mouseX >= sliderPosX && mouseX <= 400 + sliderPosX
) {
circleX = mouseX;
circleColor = 'blue';
} else {
circleColor = color(222, 149, 100)
}
fill(circleColor);
circle(circleX, circleY, radius * 2);
// point of reference
//rotate
fill(255);
translate(width / 2, height / 2);
let movAngle = map(circleX, 0, width, (3 * PI) / 4, (9 * PI) / 4);
constrained_val = constrain(movAngle, (3 * PI) / 4, (9 * PI) / 4);
// rotate(-1* constrained_val);
//rotate(movAngle);
rotate(constrained_val);
circle(knobPos, 0, size / 15);
}
In Q4, I was able to make the square be pulsing with a background in between every instance. I figured it could be fun to make it move around.
let speed;
function setup() {
createCanvas(400, 400);
frameRate(30);
}
function draw() {
background(220);
speed = frameCount % 15;
if(speed == 0){
fill(0, random(255), random(170));
rect(mouseX, mouseY, 100, 50);
}
}
For Q5, I was able to make the ball bounce and change color on sync with each bounce.
let movmntX = 0;
let movX;
let movY;
let size;
let speed;
let circColor;
function setup() {
createCanvas(600, 600);
movX = width / 2;
movY = height / 2;
size = width / 8;
speed = 10;
}
function draw() {
background(255);
noStroke();
fill(movX / 2.1);
circle(movX, movY, size);
movX += speed;
if(movX >= width || movX <= 0){
speed *= -1;
}
}