Amber_Kong's Document Blog

In this recitation section, I learned how to use camera and how to use R,G,B of each pixel to create some amazing effect. This is my work.

I use index and index2 to create 2 the “mirror effect”. And in each picture I use

if(int(x/10)/2>int(int(x/10)/2)&&int(y/10)/2>int(int(y/10)/2)){}

to check the position of each pixel to create different colors of the grid overlay effect. The first one overlay R and G, the second one overlay R and B, the third one B and G and the last one R, G and B.

Also, in the “for” loop, I didn’t use x=x++/y=y++, but use x+=2/y+=2 to create a special effect that many small dots form the whole picture. Actually, I originally tried to use a few big circle to form the photo but failed. I didn’t come up with a good solution yet.

Here is the link to my glitch: https://glitch.com/edit/#!/quintessential-almond-ghoul?path=script.js%3A114%3A69

And here is my code:

let img1, img2,img3,img4;
let cam;
let w=640, h=320;
let alpha=0, times=1
//let Check=true

function setup() {
createCanvas(w*2, h*2);

cam = createCapture(VIDEO);
cam.hide();
img1 = createImage(w, h);
img2 = createImage(w, h);
img3 = createImage(w, h);
img4 = createImage(w, h);
}

// function mousePressed(){
// Check=!Check
// m=1-m
// }

function draw() {
background(0);

cam.loadPixels();
img1.loadPixels();
img2.loadPixels();
img3.loadPixels();
img4.loadPixels();

// for(i=0;i<width;i=i+20){
// for(j=0;j<height;j=j+20){
// getCircle(i,j)
// }
// }
// if (Check===true){
for (let y = 0; y < img1.height; y+=1) {
for (let x = 0; x < img1.width; x+=1) {
let index = (x + y * img1.width) * 4;
let index2=(y*img1.width-x)*4;

let r = cam.pixels[index + 0];
let g = cam.pixels[index + 1];
let b = cam.pixels[index + 2];

if(int(x/10)/2>int(int(x/10)/2)&&int(y/10)/2>int(int(y/10)/2)){
img1.pixels[index2 + 0] = r; // R
img1.pixels[index2 + 1] = g; // G
img1.pixels[index2 + 2] = 0; // B
img1.pixels[index2 + 3] = 255; // A
}else if(int(x/10)/2>int(int(x/10)/2)){
img1.pixels[index2 + 0] = r; // R
img1.pixels[index2 + 1] = 0; // G
img1.pixels[index2 + 2] = 0; // B
img1.pixels[index2 + 3] = 255; // A
}else if(int(y/10)/2>int(int(y/10)/2)){
img1.pixels[index2 + 0] = 0; // R
img1.pixels[index2 + 1] = g; // G
img1.pixels[index2 + 2] = 0; // B
img1.pixels[index2 + 3] = 255; // A
}else{
img1.pixels[index2 + 0] = 0; // R
img1.pixels[index2 + 1] = 0; // G
img1.pixels[index2 + 2] = 0; // B
img1.pixels[index2 + 3] = 255; // A
}
}
}

for (let y = 0; y < img2.height; y+=1) {
for (let x = 0; x < img2.width; x+=1) {
let index = (x + y * img2.width) * 4;

let r = cam.pixels[index + 0];
let g = cam.pixels[index + 1];
let b = cam.pixels[index + 2];

if(int(x/10)/2>int(int(x/10)/2)&&int(y/10)/2>int(int(y/10)/2)){
img2.pixels[index + 0] = r; // R
img2.pixels[index + 1] = 0; // G
img2.pixels[index + 2] = b; // B
img2.pixels[index + 3] = 255; // A
}else if(int(x/10)/2>int(int(x/10)/2)){
img2.pixels[index + 0] = r; // R
img2.pixels[index + 1] = 0; // G
img2.pixels[index + 2] = 0; // B
img2.pixels[index + 3] = 255; // A
}else if(int(y/10)/2>int(int(y/10)/2)){
img2.pixels[index + 0] = 0; // R
img2.pixels[index + 1] = 0; // G
img2.pixels[index + 2] = b; // B
img2.pixels[index + 3] = 255; // A
}else{
img2.pixels[index + 0] = 0; // R
img2.pixels[index + 1] = 0; // G
img2.pixels[index + 2] = 0; // B
img2.pixels[index + 3] = 255; // A
}
}
}

for (let y = 0; y < img3.height; y+=1) {
for (let x = 0; x < img3.width; x+=1) {
let index = (x + y * img3.width) * 4;
let index2=(y*img1.width-x)*4;

let r = cam.pixels[index + 0];
let g = cam.pixels[index + 1];
let b = cam.pixels[index + 2];
// fill(r,g,b);
// ellipse(width-x,y,2,2);
if(int(x/10)/2>int(int(x/10)/2)&&int(y/10)/2>int(int(y/10)/2)){
img3.pixels[index2 + 0] = 0; // R
img3.pixels[index2 + 1] = g; // G
img3.pixels[index2 + 2] = b; // B
img3.pixels[index2 + 3] = 255; // A
}else if(int(x/10)/2>int(int(x/10)/2)){
img3.pixels[index2 + 0] = 0; // R
img3.pixels[index2 + 1] = 0; // G
img3.pixels[index2 + 2] = b; // B
img3.pixels[index2 + 3] = 255; // A
}else if(int(y/10)/2>int(int(y/10)/2)){
img3.pixels[index2 + 0] = 0; // R
img3.pixels[index2 + 1] = g; // G
img3.pixels[index2 + 2] = 0; // B
img3.pixels[index2 + 3] = 255; // A
}else{
img1.pixels[index2 + 0] = 0; // R
img1.pixels[index2 + 1] = 0; // G
img1.pixels[index2 + 2] = 0; // B
img1.pixels[index2 + 3] = 255; // A
}
}
}

for (let y = 0; y < img1.height; y+=1) {
for (let x = 0; x < img1.width; x+=1) {
let index = (x + y * img1.width) * 4;

let r = cam.pixels[index + 0];
let g = cam.pixels[index + 1];
let b = cam.pixels[index + 2];

if(int(x/10)/2>int(int(x/10)/2)&&int(y/10)/2>int(int(y/10)/2)){
img4.pixels[index + 0] = r; // R
img4.pixels[index + 1] = g; // G
img4.pixels[index + 2] = b; // B
img4.pixels[index + 3] = 255; // A
}else if(int(x/10)/2>int(int(x/10)/2)){
img4.pixels[index + 0] = r; // R
img4.pixels[index + 1] = 0; // G
img4.pixels[index + 2] = 0; // B
img4.pixels[index + 3] = 255; // A
}else if(int(y/10)/2>int(int(y/10)/2)){
img4.pixels[index + 0] = 0; // R
img4.pixels[index + 1] = g; // G
img4.pixels[index + 2] = 0; // B
img4.pixels[index + 3] = 255; // A
}else{
img4.pixels[index + 0] = 0; // R
img4.pixels[index + 1] = 0; // G
img4.pixels[index + 2] = b; // B
img4.pixels[index + 3] = 255; // A
}
}
}

img1.updatePixels();
image(img1, 0, 0);
img2.updatePixels();
image(img2, w, 0);
img3.updatePixels();
image(img3, 0, h);
img4.updatePixels();
image(img4, w, h);

}

Inspiration：

We start our project when Halloween is around the corner so we decided to make a novel video game using the theme of Halloween. We searched a lot of already-existed video games and decided to combine two of them as a wholly new one which is Halloween Adventure as presented now as our group project. We originally drew our inspiration from Flappy Bird and Jetpack joyride, but since the two both used the mouse (pressed/drag) to control the object , we eventually decided to input microphone to make it different and more interesting.

Concept:

Then it come to the setting and sub-theme of our project, since we want to make the video unique as our own, I thought about the Quidditch game played by the characters in harry potter film. As all of us three group members are freshmen co2024, we engage in our university life and the course just like we are playing Quidditch, since quidditch is a positive competition, we should think about how to fly high, but also how to fly stably and overcome all the obstacles on the way to survive. And the use of microphone is meant to help the users relieve their stress whenever they feel stressful.

Effects:

Basically, we set two modes in our game, the easy mode and a more difficult one. In the easy mode, you just have to control harry with sound-making and making sure not to touch on the blocks, you pass a block and you got one score. In the hard mode we set random bonus which will change your scores. As your voice reaches a certain height, a ghost will rise up from the bottom of the screen which serves as a surprise.

User-testing:

We did get lots of useful feedback in our user-testing process.

①Rudi reminded us that the playing method of shouting is not that close related to letting harry fly with the broom so we add a special effect of the rising flying from the bottom of the screen.

②Also, some users found that there’s something wrong with our check function which make it much too difficult for the players to get scores and move on.

③Another point is that we initially have a moving golden snitch on the first page, which they found distracting hence we make it still as a decoration.

④Lastly, some of our classmates found out that the background of our game is not that dynamic because it’s not moving at all in the process. So we use another three backgrounds to change the settings with the sequence function.

Basic structure:

Working process:

Step 1. Preliminary conception. We want to use a microphone to input the sound and use sound to control the figure. We want this to be a game.

Step 2. Building the basic model of the game. We draw a ball first. Then we use a class to store this.rec to create black blocks and another array this.hei to define the height of each “passage” for balls to pass. Also we use the random function to randomize the height of each passage.
This is the original design sketch:

Step 3. Sound input. We refer to the p5.js library and some videos on YouTube. We use “var mic” and then “new p5.AudioIn()”  to create a sound input. Then use “mic.getLevel ” to get the level of the sound.

Step 4. Add judgment. Judgement mainly include the start button, whether the ball crashes on the blocks or bonus and restart button. If the ball crashes on the blocks, the game will end.
These are the original start and end page:

Step 5. Beautification. We use procreate to draw some cute figures ourselves and find some background pictures to replace the original black blocks, balls and white background.

These are the beautified scene:

Step 6. Debugging and optimization. We overcame some challenges.

Challenge

According to our plan at first, we want to decide the height of Harry by using the exact volume level, which means the higher the volume is, the higher Harry will fly accordingly. However, although we try to make a stable sound, there still exists slight change of the volume, which makes Harry continues shaking up and down. Due to the instability, we decide to use a new and fixed form to change the height. As a result, the flying of Harry becomes much more stable and user-friendly.
Here is the code we use:

Since the basic model of Harry was a ball, the game was easy to play. However, when we changed the ball model into the picture of Harry, we should use a rectangle to tangent to the general shape of the picture. Thus it became quite difficult to play. So we have to make the standards lower. We used a smaller rectangle to represent the shape of Harry.

As our concept tells, we would like to make a game that can relieve stress by shouting or screaming. Actually at the beginning we added some screaming part. For example, the user has to shout to begin the game. However, when we did the user-testing, we found out that most of the users were too shy to do so. Also Professor Rudi thought screaming is not related to the theme of the adventure of Harry Potter. So we just deleted some and only added a function that when the user’s sound volume reached a certain level, there would fly out a cute ghost. Here is the picture:

Dynamic and interactive elements are quite important to our project. However, it seemed that we somehow lack these and the background was too dull without any changes. So we added four backgrounds. As the user is playing, the background will change according to time by using the function of sequence. Here is the code:

What I did in this project:

I was responsible for creating the overall framework of the game. I used mathematical algorithms to generate blocks, judge whether there is a collision, etc. into mathematical expressions, and express them in code. I was also mainly responsible for the coding and optimization part.

My learning outcome:

I know how to use mathematical models to construct judgment expressions expressed by code. Learn how to input audio using a microphone, class as well. And I also get some knowledge about sequence and understand its meaning.

Glitch link:https://glitch.com/edit/#!/ccl-amber-?path=script.js%3A55%3A17

This is a rotating Tai-chi. If you put the mouse on Tai-chi, it will rotate faster and faster. If you remove the mouse, the rotation would slow down until it stopped.

Here is the code:

let Taichi;

function setup() {
createCanvas(400, 400);
Taichi = new RT();
}

function draw() {
background(100);
push();
Taichi.display();
Taichi.circleRotate();
pop();
fill(0);
text(“Put the mouse on TaiChi to make it rotate”,75,50);
}

class RT {
constructor() {
this.d = [200, 100, 100, 20, 20] this.c = [0, -50, 50, -50, 50] this.angle = 0
this.a = 0
}
display() {
noStroke();
translate(200, 200);

fill(255);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);

push();
rotate(PI);
fill(0);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);
pop();

fill(0);
circle(this.c[1], 0, this.d[1])

fill(255);
circle(this.c[2], 0, this.d[2]);

fill(255);
circle(this.c[3], 0, this.d[3]);

fill(0);
circle(this.c[4], 0, this.d[4]);
}
circleRotate() {
if ((mouseX-200)*(mouseX-200)+(mouseY-200)*(mouseY-200)<=10000) {
this.angle = this.angle + this.a
this.a = this.a + 0.07
if(this.a>=15){
this.a=15;
}
}else{
this.angle = this.angle + this.a
this.a = this.a – 0.07
if(this.a<=0){
this.a=0
}
}
rotate(radians(this.angle));
noStroke();

fill(255);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);

push();
rotate(PI);
fill(0);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);
pop();

fill(0);
circle(this.c[1], 0, this.d[1])

fill(255);
circle(this.c[2], 0, this.d[2]);

fill(255);
circle(this.c[3], 0, this.d[3]);

fill(0);
circle(this.c[4], 0, this.d[4]);
}
}

Team name:Golden Snitches

The big idea:

We want to create a game that has Harry Potter flying through the horrible forest. The minimum viable product would be the user could control Harry Potter with sound level and the game would end if Harry Potter crashes on the blocks. The stretch goal is that we want to record the scores.

Learning goals:

Amber：Using mathematical models to construct judgment expressions expressed by code. Learn how to input audio using a microphone.

Emma: Gain coding skills and learn how to insert pictures and audio into the code.

Rocio: Learn how to systematically design and create a video through p5js on our own

            Grasp how to add images and audio in a project

Inspiration and preference:

We got the inspiration from the game Flappy Birds. But this game uses mouse click to control the bird flying through the blocks but we use sound to control.

Implementation plan:

—Step 1. Preliminary conception. We want to use a microphone to input the sound and use sound to control the figure. We want this to be a game.

—Step 2. Building the basic model of the game. We draw a ball first. Then we use an array rec[i] to create black blocks and another array hei[i] to define the height of each “passage” for balls to pass. Also we use the function random to randomize the height of each passage.

—Step 3. Sound input. We refer to the p5.js library and some videos on YouTube. We use “var mic” and then “new p5.AudioIn()”  to create a sound input. Then use “mic.getLevel ” to get the level of the sound. Applying the sound level to the ordinate of the ball and we can get a ball jumping along with the sound level.

—Step 4. Add judgment. If the ball crashes on the blocks, the game will end. So we want to use a function Check() and by applying true or false on it to check whether the user loses the game. (Additional: We also want to use the “i” in the array rec[i] to count the score)

—Step 5. Beautification. We use procreate to draw some cute figures and find some amazing background pictures to replace the original black blocks, balls and white background to make the game more interesting.

—Step 6. Debugging and optimization. Find the potential bugs and try to make the game functioning more smoothly.

Collaboration plan:

Amber: Building the basic framework of code. Write the function ballCheck() part and the audio input part.

Rocio：Provide ideas of program running, design and draw the image we use andbeautify the whole picture.

Emma: Record and document the process of doing the project. Write and organize reports.

Risks:

1. Up to now, we haven’t found a very suitable background for the game. 
2. How to check whether the ball crashes on the block is a problem. If we use an array, it is complex and confusing and will cause computer crash. If we don’t use an array, it is hard to confirm the variable.
3. As the sound level is changing all the time, Harry Potter moves quite unstable. We tried to use the function smooth() but did not succeed.

Additional course content:

No. I think we can find everything we want in the reference and p5.js library. ^_^

This week our group uses Glitch and Visual Studio Code to do our project. Below is the first report about our project.

The link to our game: https://editor.p5js.org/yk2308/sketches/1hW4T1Ehr

Design Inspiration:

In this interactive experience project, our group drew our inspiration from the old-fashioned video game Flappy Birds. We would like to make a modern game with more interactive experiences provided for our users. We originally used a black point and some simple rects as the prototype, which will be later on designed and decorated more fancy.

We want to use the Hogwarts’ traditional game Quidditch as the setting. The BG will be a cartoon old-fashioned Hogwarts castle. The stumbling blocks will be some gothic pillars cursed by Lord Voldemort. The moving subject will be HarryPotter flying by riding brooms or rakes, or riding magical animals, which is controlled by mousePressed/Microphone. The users should control the role and try not to touch the pillars.Upon touching the pillars, game’s over. All of these images will be originally drawn by our group members. 

Apart from this fundamental settings, we also want to have the Golden Snitches with wings flying around in the screen to create a sense of magic. Add some sound effects is also in our scheme. Additionally, we are thinking about researching into Makey-Makey to relate our project with a special and funny keyboard such as the plasticine. We think replace the mouse with plasticine can be a good try but we still aren’t sure if that will work smoothly.

Workflow:

—Step 1. Preliminary conception. We want to use microphone to input the sound and use sound to control figure. We want this to be a game.

—Step 2. Building the basic model of the game. We draw a ball first. Then we use an array rec[i] to create black blocks and another array hei[i] to define the height of each “passage” for balls to pass. Also we use the function random to randomize the height of each passage.

—Step 3. Sound input. We refer to the p5.js library and some videos on YouTube. We use “var mic” and then “new p5.AudioIn()”  to create a sound input. Then use “mic.getLevel ” to get the level of the sound. Applying the sound level to the ordinate of the ball and we can get a ball jumping along with the sound level.

—Step 4. Add judgment. If the ball crash on the blocks, the game will end. So we want to use a function Check() and by applying true or false on it to check whether the user loses the game. (Additional: We also want to use the “i” in the array rec[i] to count the score)

—Step 5. Beautification. We use procreate to draw some cute figures and find some amazing background pictures to replace the original black blocks, balls and white background to make the game more interesting.

—Step 6. Debugging and optimization. Find the potential bugs and try to make the game functioning more smoothly.

First Trial Process:

For now, we have finished our basic model, which only includes the ball and the blocks. In theory, the sound volume decides how long and how high the ball will fly. However, the ball was unstable. It continued to be shaking when we made a stable sound. When we controlled the ball only by clicking the mouse, the ball was stable, which meant every time we clicked mouse, the ball would fly higher within a fixed distance and then fell down because of the gravity. As a result, we will try to find out why it was unstable when we used the sound to control and find a way to stabilize it. As for other parts, such as the speed of the moving block, the random passages, etc. they meet our expectations and won’t subject to changes unless it is necessary. What’s more, we asked our roommates to play the game and they met the problems as us. After we optimize and beautify the game, we will let them play again and see if there is anything to improve.