1. Personal Logo representing my ideintity. I use it as my 'face' when I have design works, so I chose it for my portrait.
2. Also added some interactive face sticker.
3. While I was doing the worksheet, I found the use of ‘mouseX, mouseY’, and I got interested in using it for my first mini project. I positioned the shapes based on mouseX, and mouse Y position. and applied it to make it interactive. Also, chaged color based on mouse X and mouse Y value, switching the scale up to 255, dividing it by certain number.
Worksheet_01
1. Used Loop to make a multiple ractangle.
** Overlapping several layers helps the visual impact.
2. Used ‘Sin’ to give the animation. Realized that ‘Sin’ works with ‘PI’ system. To use it efficiently, change the ‘angleMode’ to DEGREES.
Worksheet_04
1. To understand the way to send the ball always to the corner no matter the sizes of canvas are, I had to understand some of mathmatic problem. Here is the key code:
= x and y positions -> evenly decrease by certain numbers, which are driven by Width and Height.
Worksheet_05
1. To understand the way to send the ball always toward where the mouseX and Y position are, I had to understand some of mathmatic problem. Here is the key code:
Shout out to: Vivian Jia
dx, dy = distance between ball position and mouse position.
x = x + dx*spped -> decrease the distance until it’s closed to ‘0’
y = y + dy *speed-> decrease the distance until it’s closed to ‘0’
or
lerp(from,to,speed); ----> savme function.
1. used Loop to make a circle and rotating them by second.
2. random colors when refreshing.
3. Sin and Cos for vertexs to make coool shape by time.
4. control the side of vertexs by mouse movements.
Worksheet _ 3-2
*Using Mouse Hover as a button function*
let hovered = false;
let a = false;
let i = 0;
function setup() {
createCanvas(600, 600);
background(205);
}
function draw() {
//when the mouse go over the 1/3 area:
if (
mouseX > width / 3 &&
mouseX < width - width / 3 &&
mouseY > 0 &&
mouseY < height
) {
//give a cue that the mouse is over the area:
hovered = true;
//if the mouseover state was different with before:
if (hovered !== a) {
//once it is over the area:
if (hovered == true) {
//change the color of the area:
if (i % 2 == 0) {
fill("red");
rect(width / 3, 0, width / 3, height);
}
if (i % 2 == 1) {
fill("white");
rect(width / 3, 0, width / 3, height);
//and count them:
}
i++;
}
}
a = hovered;
}
// change the state:
else {
a = false;
}
}
Repeatation the line and using noise function, I created a something fabric feeling & ball bouncing.
Experimentation_01_using loop and dist
Bubble Movement:
Falling motion of the bubbles. I used two arrays,
posX and posY, to track the positions of each bubble.Using a sine function based on the frame count, which gives a gentle swaying effect, and speedY -> slow down and accelation:
for (let i = 0 + deleteBubble; i < posX.length; i++) {
speedX = sin(frameCount / 10 + i);
speedY = 1.005;
posY[i] = posY[i] * speedY;
posX[i] = posX[i] + speedX;
Bubbles also interact with each other. If they come too close, it stop falling. If a bubble reaches the bottom of the canvas, we stop it from falling further.
for (let j = i + 1; j < posX.length; j++) {
distance = dist(posX[i], posY[i], posX[j], posY[j]);
// stop falling if bubble hit the ground
if (posY[i] > height || distance < (size[i] + size[j]) / 4) {
posY[i] = posY[i] / speedY;
posX[i] = posX[i] - speedX;
}
}
Mouse Interaction:
Create bubbles. The
addParticle function captures the mouse’s position. The size of each bubble is determined by the speed of the mouse movement.function addParticle()
{ posX.push(mouseX);
posY.push(mouseY);
let speed = dist(mouseX, mouseY, pmouseX, pmouseY);
let particleSize = map(speed, 0, 100, 10, 70);
size.push(particleSize); }
Deleting the Bubble to make the program smooth:
if(posX.length > 450)
{ deleteBubble++;
}