The purpose of this recitation was to learn about the basics of animating in processing. I started by creating the canvas with the basic shape.
After the shape was created, I worked on making the shape move. At first I had difficulty adjusting the speed of the shape, but after working through various methods such as adjusting the for loop and the if loops, I was able to get the circle to move at a normal, steady speed. I also experienced a problem when the circle was shrinking, it would invert on itself. When I adjusted the lowest value so that it was greater than a certain threshold (in my case val > 30), then the circle no longer inverted as it came back to its center.
The next part was a little trickier. The main struggle was trying to get the color to change at a smooth, constant speed instead of erratically changing. Once I was able to understand the colorMode() HSB capabilities, it made it a lot easier to code.
video of color changing circle
The last part I got help from the processing forum website. I used the basis of his methods in which to apply the keyboard function. From there, I built off his code and made my own object and applied the color changing stroke technique.
https://forum.processing.org/one/topic/movement-using-arrow-keys.html
My favorite function that I used in this lab was keyPressed(). Something I really love about the coding community is the open-source community where everyone is sharing their work. It creates a great environment for people who are just first learning and it allows people to work upon the work of others and make the projects better. This community was super helpful for me in this case because I really did not know where to start trying to create a function like keyPressed() but I was able to build up on the work of another.
My code for creating a game that has two circles. The circles move based on what keys that you press and the goal is to get the circles to touch. The circles move with different movements based on the keys.
int rad= 20;
int rbg;
int length=300;
int value = 0;
int c = 0;
int radius = 10, directionX = 1, directionY = 0;
float x=20, y=20, speed=0.5;
boolean circleIsShrinking = false;
void setup() {
size(600, 600);
smooth();
noStroke();
colorMode( HSB, 360, 100, 100);
}
void draw() {
background(255);
x=x+speed*directionX;
y=y+speed*directionY;
// check boundaries
if ((x>width-radius) || (x<radius))
{
directionX=-directionX;
}
if ((y>height-radius) || (y<radius))
{
directionY=-directionY;
}
fill(32, 50, 120);
circle(x, y, 20, 20);
void keyPressed()
{
if (key == CODED)
{
if (keyCode == LEFT)
{
//if (directionX>0) {
directionX=-1;
directionY=0;
//}
}
else if (keyCode == RIGHT)
{
//if (directionX<0) {
directionX=1;
directionY=0;
//}
}
else if (keyCode == UP)
{
//if (directionY<0) {
directionY=-1;
directionX=0;
//}
}
else if (keyCode == DOWN)
{
//if (directionY<0) {
directionY=1;
directionX=0;
//}
}
}