For this project, we wanted to create a fan-made animation inspired by the Nintendo Switch startup screen. Both of us are longtime Nintendo players, so we thought it would be fun to make something as a small tribute. We were especially interested in the interaction where pressing buttons on the Switch can trigger certain system functions. At the same time, we did not want to make the assignment too complicated, so we decided to build the interactions mainly with mouseIsPressed.
At the beginning, we discussed which parts of the interface were the most important. We decided to first draw the main screen and the buttons on the left side. Since we did not plan to add interactions to the buttons on the right side, we left that part out in version 1.1. Our plan was to use the X and A buttons for interactions related to the Nintendo Switch logo itself, while Y and B would trigger simpler visual effects. For example, the X button controls the movement of the circle inside the logo like a joystick, and the A button makes the two Joy-Con shapes move away from each other. （This is 1.1 version.）
<https://editor.p5js.org/lw3981/sketches/Eq8Ga91Ek>
For our collaboration process, since p5.js does not support real-time collaborative editing in the same way as some other platforms, we decided to write the main code and structure on Isabelle’s computer. Our project used many if statements, and Qinjie focused on finding references, checking possible solutions, and helping optimize the code. We spent around four to five hours discussing the logic and testing different ways of writing the interactions. Whenever we realized that our existing variables were not enough to create the effect we wanted, we added new variables and adjusted the structure.
Later, we felt that the composition still looked a little incomplete, so we decided to add simulated joysticks to make the screen more interactive. At first, we tried to control the joystick by checking whether mouseX and mouseY were within a certain range and then assigning the mouse position to the joystick coordinates. However, this method was very easy to trigger accidentally and did not feel very precise.
After some testing, we found that dist() worked much better. It allowed us to calculate the exact distance between the mouse and the center of the joystick, which made the interaction more accurate. We then used if and else statements to create two joysticks that could be dragged and would return to their original positions when released. Finally, we completed the remaining buttons on the left Joy-Con, which made the whole interface feel much more complete.
Through this project, we became more comfortable using variables, if statements, else, mouseIsPressed, and dist(). More importantly, we learned that interactive coding often requires adjusting the logic step by step. Many of our ideas could not be completed with the variables we had at the beginning, so the process became a cycle of testing, finding problems, adding new variables, and rewriting the interaction until it worked the way we wanted.
let iconX = 500; let iconY = 200; //logo x y坐标
let ShiftA = 120; let ShiftB = 100; let ShiftC = 60; let ShiftD = 20; let ShiftE =70;
let ScreenX = 0; //A键中间屏幕
let failedStart = false;
let Start = false;
let buttonXx = 900; let buttonXy = 80; //X键 x y坐标
let buttonYx = 850; let buttonYy = 130; //Y键 x y坐标
let buttonAx = 950; let buttonAy = 130; //A键 x y坐标
let buttonBx = 900; let buttonBy = 180; //B键 x y坐标
//小球运动相关变量
let whiteCircleY = 150;
let redCircleY = 225;
let circleSpeed = 2;
function setup() {
createCanvas(1000, 500);
}
function mousePressed() {
if (dist(mouseX, mouseY, buttonXx, buttonXy) < 27.5) {
failedStart = true;
}
if (dist(mouseX, mouseY, buttonAx, buttonAy) < 27.5) {
Start = true;
}
}
function draw() {
background(240, 0, 20);
noStroke();
fill(50);
rect(800, 0, 200, 500);
rect(0, 0, 200, 500);
// NS icon
if (failedStart) {
fill(255);
textAlign(CENTER, CENTER);
textSize(25);
text("Failed to start up", 510, 370);
}
if(Start){
fill(255);
textAlign(CENTER, CENTER);
textSize(25);
text("YOU DON'T HAVE NS2!", 510, 140);
text("IT'S TIME TO WAKE UP", 510, 250);
}
push();
translate();
fill(255);
rect(iconX - ShiftA, iconY - 120, 120, 240, 80, 0, 0, 80);//白色底
fill(240, 0, 20);
rect(iconX - ShiftB, iconY - 105, 80, 205, 50, 0, 0, 50); //红色内部
fill(255);
circle(iconX - ShiftC, whiteCircleY, 45); // 白圆
pop();
// 右边
fill(255);
rect(iconX + ShiftD, iconY - 120, 110, 240, 0, 80, 80, 0);
fill(240, 0, 20);
circle(iconX + ShiftE, redCircleY, 45); // 右边红圆
if (!failedStart && mouseIsPressed && dist(mouseX, mouseY, buttonAx, buttonAy) < 27.5){
if (ShiftA < 250) ShiftA = ShiftA +2;
if (ShiftB < 230) ShiftB = ShiftB +2;
if (ShiftC < 190) ShiftC = ShiftC +2;
if (ShiftD < 150) ShiftD = ShiftD +2;
if (ShiftE < 200) ShiftE = ShiftE +2;
push();
rectMode(CENTER);
fill(255);
if (ScreenX<250) ScreenX = ScreenX+3;
rect(510,200,ScreenX,240);
pop();
}
if (!failedStart && mouseIsPressed && dist(mouseX, mouseY, buttonBx, buttonBy) < 27.5){
push();
fill(255);
ellipse(random(220,780),random(0,500),50,50);
pop();
}
if ( mouseIsPressed && dist(mouseX, mouseY, buttonXx, buttonXy) < 27.5) {
//白色圆移动
whiteCircleY = whiteCircleY + circleSpeed;
if (whiteCircleY > 260) {
circleSpeed = -2;
}
if (whiteCircleY < 120) {
circleSpeed = 2;
}
//红色圆移动
redCircleY = redCircleY - circleSpeed;
if (redCircleY > 260) {
circleSpeed2 = -2;
}
if (redCircleY < 120) {
circleSpeed2 = 2;
}
}
//按钮和文字
stroke(255);
strokeWeight(3);
fill(0);
circle(buttonXx, buttonXy, 55); // X
circle(buttonYx, buttonYy, 55); // Y
circle(buttonAx, buttonAy, 55); // A
circle(buttonBx, buttonBy, 55); // B
circle(100, 200, 55); // 上
circle(100, 300, 55); // 下
circle(150, 250, 55); // 右
circle(50, 250, 55); // 左
noStroke();
fill(255);
textAlign(CENTER, CENTER);
textSize(25);
text("X", buttonXx, buttonXy);
text("Y", buttonYx, buttonYy);
text("A", buttonAx, buttonAy);
text("B", buttonBx, buttonBy);
text("↑", 100, 200); // 上
text("↓", 100, 300); // 下
text("←", 50, 250); // 左
text("→", 150, 250); // 右
//摇杆部分
fill(246, 132,132);
ellipse(900,300,90,90); //蓝色
fill(132, 202,246);
ellipse(100,100,90,90);// 红色
let JoyStickx1 = 900; let JoySticky1 = 300; //红色摇杆初始xy位置
if (mouseIsPressed && dist(mouseX, mouseY, 900, 300) < 30) {
JoyStickx1 = mouseX;
JoySticky1 = mouseY;
}
else {
JoyStickx1 = 900; JoySticky1 = 300; //回到红色摇杆初始xy位置
}
fill(10, 10, 10);
ellipse(JoyStickx1, JoySticky1, 70, 70); //可动黑色摇杆
let JoyStickx2 = 100; let JoySticky2 = 100; //蓝色摇杆初始xy位置
if (mouseIsPressed && dist(mouseX, mouseY, 100, 100) < 30) {
JoyStickx2 = mouseX;
JoySticky2 = mouseY;
}
else {
JoyStickx2 = 100;
JoySticky2 = 100; //回到蓝色摇杆初始xy位置
}
fill(10, 10, 10);
ellipse(JoyStickx2, JoySticky2, 70, 70); //可动黑色摇杆
//Y键交互
if (!failedStart && mouseIsPressed && dist(mouseX, mouseY, buttonYx, buttonYy) < 27.5) {
fill(255);
textAlign(CENTER, CENTER);
textSize(35);
text("N i n t e n d o", 510, 350); //第一行字
textSize(60);
text("S W I T C H", 510, 400); //老任商标
textSize(10);
text("It's not the botton for opening.", 510, 450);
}
}