Project Title: Slay the Stage with Shoot Dance
This Project aims to create an object dancer that dances on the stage. Inspired by the “Shoot Dance”, one of the dance trends in 2017, I have created a code combining the Halloween theme, where a pumpkin performs the “Shoot dance.” This is the link to the website where you can find what the dance is about:
https://media.giphy.com/media/33F3SzuuhjnE6GLKKG/giphy.gif
Click here to see the result (You can change the dance of the pumpkin if you click the mouse):
https://editor.p5js.org/GwangunKim/sketches/lEThzmuQX
This is the snippet of my code:
let dancer;
function setup() {
// no adjustments in the setup function needed...
createCanvas(windowWidth, windowHeight);
// ...except to adjust the dancer's name on the next line:
dancer = new SlayPumpkin(width/2, height/2);
}
function draw() {
// you don't need to make any adjustments inside the draw loop
background(0);
//drawFloor(); // for reference only
dancer.update();
dancer.display();
}
// You only code inside this class.
// Start by giving the dancer your name, e.g. LeonDancer.
class SlayPumpkin{
constructor(startX, startY){
this.x = startX;
this.y = startY;
this.boo = false;
}
update(){
// update properties here to achieve
// your dancer's desired moves and behaviour
//dance motion of pumpkin
this.y = height/2 + 10*sin(frameCount*0.21)
this.movingarmX = map(sin(frameCount*0.21), -1, 1, -30, 30)
this.movingarmY = map(sin(frameCount*0.21), -1, 1, -35, -15)
this.movinglegX = map(sin(frameCount*0.21), -1, 1, -30,50)
this.movinglegY = map(sin(frameCount*0.21), -1, 1, 60,90)
//change the motion if mouse is pressed
if(mouseIsPressed){
this.boo = !this.boo
}
if (this.boo){
this.movingarmX = map(sin(frameCount*0.21), -1, 1, -25, 15)
this.movingarmY = map(sin(frameCount*0.21), -1, 1, 40, 30)
}
}
display(){
// the push and pop, along with the translate
// places your whole dancer object at this.x and this.y.
// you may change its position on line 19 to see the effect.
push();
translate(this.x, this.y);
// ******** //
// ⬇️ draw your dancer here ⬇️
// orange
fill(255, 100, 0);
stroke(0, 90);
strokeWeight(2);
// pumpkin is made up of circles
ellipse(0, 0-40, 75, 50);
ellipse(0, 0-40, 50, 50);
ellipse(0, 0-40, 25, 50);
push();
//head part
stroke('darkolivegreen')
strokeWeight(5)
line(0,-65,-5,-70)
line(-15,-70,0,-75)
pop()
//mouth of pumpkin
fill('red')
ellipse(0+15,0-27,12)
//sunglass bridge and pumpkin smile
stroke('black')
line(0,0-45,0-38,0-40)
//sunglass of pumpkin
fill(random(0,250),random(0,250),random(0,250));
quad(0+3,0-35,0+15-3,0-35,0+15,0-45,0,0-45)
quad(0+3+17,0-35,0+15-3+17,0-35,0+15+17,0-45,0+17,0-45)
//static body part of pumpkin
stroke("green")
strokeWeight(8)
line(0,0-15,0-15,0+10)
line(0,0-15,0,0+20)
line(0,0+20,0+10,0+50)
line(0+10,0+50,0-5,0+100)
//moving leg of pumpkin
stroke('darkolivegreen')
line(0,0+20,0+25,0+50)
line(0+25,0+50,0+this.movinglegX,0+this.movinglegY)
//moving arm of pumpkin
line(0-15,0+10,0+this.movingarmX,0+this.movingarmY)
// ⬆️ draw your dancer here ⬆️
// ******** //
// the next function draws a SQUARE and CROSS
// to indicate the approximate size and the center point
// of your dancer.
// it is using "this" because this function, too,
// is a part if your Dancer object.
// comment it out or delete it eventually.
this.drawReferenceShapes()
pop();
}
drawReferenceShapes(){
noFill();
stroke(255, 0, 0);
// line(-5, 0, 5, 0);
// line(0, -5, 0, 5);
stroke(255);
// rect(-100, -100, 200, 200);
fill(255);
stroke(0);
}
}
As you can see in the code, the pumpkin changes the color of its sunglasses continuously, like a dance performed in a club with various colors of lights. Additionally, the consistent motion of the arms and legs moving back and forth was achieved by utilizing the map and sin functions.
Reflections
During project A, I had to combine three components: bird, predator, and background. At that time, I was not familiar with the concept of “Class”, so I simply merged the three codes together. This led to issues where variables and statements conflicted with each other, requiring a significant amount of time to resolve. However, using “Class” has made the process much smoother as there would be no conflicts with code outside of the class. Additionally, by encapsulating everything within a class, I could write code that is more organized and follows a consistent structure.
For example, the “SlayPumpkin” class demonstrates modularity through separate methods: constructor, update, and display. Each method has a specific purpose in defining the dancer’s properties, movement, and visual representation. This modular structure enhances code organization and allows for independent modification and reuse. This separation form in the class also allows for easy reuse of the display method if a similar visual representation is needed in other parts of the code.
However, when merging code with other people, conflicts can arise in variable naming and statement writing due to different individual coding styles. Additionally, each person’s code may only be easily understood by the original author. Therefore, ongoing communication and writing code together are essential in the process of developing the code.