# 02-PROJECT 4：REVIEW EXERCISES

AI悦创原创
• web 1v1
• web 1v1

## # Brief:

From drawing primitives, variables, functions, conditionals, loops, arrays, classes, HTML/CSS/DOM, Data/API to Machine Learning, weʼve covered a lot in our class so far!

For the next few weeks, you will be implementing a series of exercises to review these concepts in preparation for your final project of the semester!

(30%) Sol LeWitt Wall Drawing : Functions, Loops, Random – Recreate Sol LeWittʼs Wall Drawing 289. 24 lines from the center, 12 lines from the midpoint of each of the sides, and 12 lines from each corner.

(30%) Sol LeWitt壁画:函数，循环，随机-重建Sol LeWitt的壁画289从中间起24行，每边的中点起12行，每角起12行。

• Create three functions, that uses the count parameter to draw random lines of that given count. (hint: Use loops and random() in these functions)

1. drawCenterLines(count)

drawCenterLines(计数)

1. drawCornerLines(count)

drawCornerLines(计数)

1. drawSideLines(count )

drawSideLines(计数)

• In your setup(), call these three functions, but set count to be 24 for the centerLines, and 12 for the cornerLines and sideLines.

(30%) 10 Second Timer : Variables, conditional, DOM

(30%) 10秒定时器:变量，条件，DOM

• Use variables, round(), millis(), text() to display the remaining time in seconds rounded to two decimal points.

• Use an if statement to determine when the time is up, and display a different text (ex. “timeʼs up!”)

• Use a DOM button for resetting the timer

(40%) 100 Interactive Green Faces : Object Oriented Programming + Interactivity

(40%) 100个交互式绿色面:面向对象编程+互动性

For this exercise, we will add some interactivity to the grid of 100 green faces we made for the second quiz: https://openprocessing.org/sketch/1726521open in new window

1. Update the Face class so that when a mouse hovers over it, (hint: use dist() to find the distance between the mouse position and the face position)

a) it wiggles / update the x and y value by some small random value between -1 and 1

A)它通过-1到1之间的一个小的随机值来摆动/更新x和y值

b) the face with the mouse over it changes its faceColor to yellow (when the mouse is not over the face, the face should return to its original color)

b)将鼠标放在上面的脸的faceColor变为黄色(当鼠标没有放在上面时，脸应该恢复到原来的颜色)

1. Update the mouseReleased function so that when a mouse clicks on it,

2)更新mouserrelease函数，当鼠标点击它时，

a) it plays a sound

A)它播放一个声音

b) it is removed from the list of faces / should not be drawn anymore (hint: use splice())

B)它从面列表中删除/不应该再被绘制(提示:使用splice())

Due Date: Wednesday, November 23 (11:59pm)

Submission Form: https://forms.gle/ro8jWXyUrbvhjC4c7open in new window

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>10 Second Timer</title>
<style>
#timer {
display: block;
position: relative;
width: 200px;
margin: 5% auto;
text-align: center;
}

button {
display: block;
width: 100px;
height: 10%;
margin: 5% auto;
border: solid 3px black;
background-color: white;
font-size: 24px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<h1 id="timer">Time's Up!</h1>
<button type="button" onclick="restart()">Restart</button>
<script>
let lefttime = 10;
let clear;
let start;
// 该setTimeout()方法在几毫秒后调用一个函数。
function restart() {
start = setTimeout(countdown, 1000);
if (lefttime <= 0) {
lefttime = 10;
start;
} else {
// lefttime--;
lefttime = lefttime - 1;
setTimeout(countdown, 1000)
}
}

function countdown() {
\$("#timer").html(lefttime);
if (lefttime <= 0) {
\$("#timer").html("Time's Up!");

} else {
lefttime = lefttime - 1;
setTimeout(countdown, 1000)
}
}
</script>
</body>
</html>
``````

AI悦创·编程一对一

AI悦创·推出辅导班啦，包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」，全部都是一对一教学：一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然，还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线，随时响应！微信：Jiabcdefh

C++ 信息奥赛题解，长期更新！长期招收一对一中小学信息奥赛集训，莆田、厦门地区有机会线下上门，其他地区线上。微信：Jiabcdefh

• 0
• 0
• 0
• 0
• 0
• 0

• 按正序
• 按倒序
• 按热度