<aside> 💡
Write no more than 5 sentences about how computation applies to your interests. Something you studied, a job, a hobby, or a cause you care about.
</aside>
I want to make games and explore fun ways for the mouse to interact with shapes on the screen. Since I’m completely new to coding, I can only draw basic geometric shapes right now, but I’ve seen so many creative and interactive projects in the p5.js examples that make me want to try more. I’d love to make my shapes feel more alive, for example, having them follow the mouse, change size, bounce around, or react when the mouse gets close.
<aside> 💡
In the same post , point to one thing in your code that you'd like us to talk about in class. Cite the line number(s). Be prepared to talk about why it's interesting to you.
</aside>
In class, I’d like to talk about my smoke design (lines 94–116). link
// SMOKE
noStroke();
fill(230, 230, 230, 150);
ellipse(
385 + (mouseX - 385) * 0.2,
385 + (mouseY - 385) * 0.2,
25, 25
);
fill(230, 230, 230, 100);
ellipse(
385 + (mouseX - 385) * 0.4,
385 + (mouseY - 385) * 0.4,
35, 35
);
fill(230, 230, 230, 60);
ellipse(
385 + (mouseX - 385) * 0.6,
385 + (mouseY - 385) * 0.6,
45, 45
);
}
fill(R, G, B, transparency); ellipse(x, y, width, height);
I used three circles to create the smoke, and placed them at 20%, 40%, and 60% of the distance from the pipe to the mouse.
For example, for the first circle, I calculate the distance between the mouse and the pipe with mouseX - 385, then multiply it by 0.2, so the circle only moves 20% of the way toward the mouse. I use the same idea for the Y position, and then repeat it with 0.4 and 0.6 for the other two circles. I also make the circles bigger and more transparent as they get farther from the pipe, so together they look more like a trail of smoke following the mouse.
AI Disclosure: I came up with the idea of smoke first, and then ask Chatgpt for its advice, but did the coding on my own.
Other things I learnt during class this week:
setup(): Runs once when the program starts.draw(): Runs continuously, useful for animation and interaction.createCanvas(width, height): Sets the canvas size.x controls horizontal position; y controls vertical position.x → move right; larger y → move down.rect(x, y, w, h) / ellipse(x, y, w, h): Position + size.quad(x1,y1,...,x4,y4): Creates a shape using four points.line(x1, y1, x2, y2): Draws a line between two points.