link: https://jasonlee557.github.io/CCLab/project-b-draft/

Title: English in Shanghainese

Description:

This is a draft of my project B. It will be an interactive storytelling that helps people to learn Shanghainese.

Reflection:

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
  • By classifying different files into different folders and distinct names, I don’t think people will mix different files up. Different types of files have different purposes, so a taxonomy can help people to distinguish things.
• When would you want to use classes, when IDs?
  • Classes are for HTML files and identifying different paragraphs, and different divs while IDs are not used regularly in HTML.
• Which limitations did you run into in the styling of your page?
  • I can only style of the text styles, the margins and padding in one page and I am not sure about how to create more than one page and making them have the button to jump back and forth.
• How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?
  • Microsoft Word gives users the freedom of choice and it is easier to vary the style, while HTML is more difficult to use with Google fonts.
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
  • HTML sets the tone and the structure of the website while CSS is used for the styling of the web page, whereas p5.js can add more interactivity and get the immediate outcome to the web page.
     

Project Description:

The project will be a mix of interactive storytelling and a tool. It is a website about learning English loanwords in Shanghainese. The minimum goal is to let the users learn six words after using the website.

The project will start with an introduction of the content, loanwords in Shanghainese, and the purpose. It will then follow with an interactive story about a kid feeling as if he were the child of a boss after going to a bakery by taxi to buy biscuits and nougats. The story will contain six loanwords in Shanghainese. Hopefully, the audience will learn from them. The interaction will be the taxi driving, the snacks eaten, and the camera capture of the audience’s figure as if he were the character in the story. 

If the users are eager learners, there will be an appendix of many loanwords in Shanghainese for them to learn more. Sound of the pronunciations and interaction to play the sound will be included.

Presentation:

https://docs.google.com/presentation/d/1VzXFv9OeKYW9xzgiCz-6d4zmrpARO3kffWSJ6U8E7-4/edit?usp=sharing

Project Title: Tadpoles to Frogs

link: https://editor.p5js.org/jl14064/sketches/kjU3aX4h3

Description: 

In this project, I tried to explore the principles and dynamic applications of Object-Oriented Programming (OOP) by creating the tadpoles’ growth into frogs.

Initially, they are just tiny tadpoles while their sizes will grow bigger as they swim in the pool. They will try to avoid colliding with each other by shaking their bodies. And if the size exceeds 70, the tadpole will become a frog. Eventually, the grown frogs will inhabit the surface of the pool in a “V” sequence. 

You should hear the frogs’ sound in the program though the following video doesn’t include the sound.

Coding:

During the coding process, I encountered several problems. 

At first, I put Class Tadpoles in the draw() function, which made several variables not defined before being called.

In addition, to count how many tadpoles successfully grow up, I introduced variable fn as a counter. I put it in Class Tad at first and made it this.fn. However, fn would be a local variable instead of a global variable, which would not be called when I tried to push Frog into the frog array. Therefore, I created a global variable called fn in the first few lines.

By introducing Class Frog after Class Tad, I also finished the challenging option of making two classes. 

let fn = 0;

function draw() {
background(152, 218, 248);
......
//remove tads
for (let i = tads.length - 1; i >= 0; i--) {
if (tads[i].isGone == true) {
if (tads[i].frog == true) {
fn += 1;
}
tads.splice(i, 1); // (index, quantity)
console.log(tads.length);
console.log(fn);
}
}

//frogs
for (let i = 0; i < fn; i++) {
if (i < fn / 2) {
frogs[i] = new Frog(
i * (width / frogs.length) + 20,
i * (height / (frogs.length / 2)) + 20
);
} else if (i == fn / 2) {
frogs[i] = new Frog(width / 2 + 20, height - 20);
} else {
frogs[i] = new Frog(
i * (width / frogs.length) + 20,
height - (i - fn / 2) * (height / (frogs.length / 2)) + 20
);
}
}
for (let i = 0; i < fn; i++) {
let frog = frogs[i];
frog.display();
}
}

To meet the challenging options, I created interactions among the tadpoles by making them shake if they were too close to each other.

detectCollition(other) {
let d = dist(other.x, other.y, this.x, this.y);
if (d < (this.w + other.w) * 0.8) {
this.y += random(-5, 5);
}
}

Reflection:

• What is Object-Oriented Programming (OOP), a Class and an Instance of the Class?
  • Programming with objects is called Object-Oriented Programming (OOP). A class is a grouping of related data and subroutines. A Class is like a blueprint for an Object, describing what an Object like this should have. An Instance is a specific version of an object, with its own particular details.
    

• Discuss the effectiveness of OOP. When is OOP useful? In what way can it be utilized?
  • OOP is useful when the code is designed to create an object, and it can be easily utilized for different purposes and it can be reused easily.
• Describe the objects you have created. What properties and methods were implemented? What kind of behaviors did you create by manipulating them?
  • I created a tadpole-like and a frog-like class. I used methods: update(), display(), detectCollition(), checkOutOfCanvas(), growth(). The tadpoles will grow bigger as they move around and their tails will make waves. If they are big enough, they will become frogs.