21、创意编程中的鼠标与键盘交互及拓展探索

创意编程中的鼠标与键盘交互及拓展探索

1. 键盘交互基础

计算机键盘设计源于打字机，在发展过程中衍生出众多新按键。如箭头键、Esc 键、功能键以及用于高效输入数字的数字小键盘。同时，还有像 ALT 和 CTRL 这类修饰键，它们可与其他按键组合执行特定操作，例如 CTRL 与 Z、X、C、V 键组合能实现撤销、剪切、复制、粘贴操作。打字机的 SHIFT 键可视为最初的修饰键，其名称源于它能将打字机制的大部分物理部件移动到输入大写字母的位置。

在编程环境里，键盘交互和鼠标交互类似，有 key 和 keyPressed 等系统变量，以及 keyPressed() 、 keyReleased() 和 keyTyped() 等事件函数。

2. 为绘图应用添加键盘快捷键

要给绘图应用程序编写快捷键，可结合 key 系统变量和 keyPressed() 事件函数。 keyPressed() 函数在每次按键时运行一次，但长按某个键可能会导致函数重复调用，这种重复行为由操作系统控制，不同用户的配置可能不同。编程环境会将最近使用的键值存储在 key 系统变量中。

以下是实现步骤：
- 打印键值 ：在代码末尾添加 keyPressed() 事件函数，暂时用于在控制台打印键值。

def keyPressed():
    print(key)

运行代码并按下不同按键，控制台会显示相应的数字、字母和符号。若开启大写锁定，将显示大写字母。特殊按键（如箭头键和修饰键）的处理方式有所不同，若需检测这些按键，可参考 keyCode 的参考条目。
- 选择颜色样本 ：用使用数字键 1 到 6 的代码替换 print() 函数，以选择不同的颜色样本。

def keyPressed():
    global brushcolor, paintmode
    paintmode = 'select'
    # color swatch shortcuts
    if str(key).isdigit():
        k = int(key) - 1
        if k < len(swatches):
            brushcolor = swatches[k]
            redraw()

Python 的 isdigit() 方法用于判断字符串中的所有字符是否为数字。由于编程环境用数字代码表示特殊按键，因此使用 str(key) 将数字代码转换为字符串，防止某些按键操作导致应用程序崩溃。若键值为数字，Python 会将其减 1 并赋值给变量 k ，因为 swatches 列表是从 0 开始索引的，所以颜色 1 对应 swatches[0] 。最后，通过 if 语句验证索引值 k 是否小于 swatches 列表的长度， redraw() 函数用于更新画笔预览。

3. 为绘图应用添加更多功能

• 添加清除按钮 ：为绘图应用添加一个“CLEAR”按钮，用于将画布重置为深蓝色。

def draw():
    # clear button
    fill('#FFFFFF')
    text('CLEAR', 10, height-12)

此代码会在显示窗口的左下角绘制“CLEAR”按钮。
- 实现清除功能 ：使用 mouseClicked() 函数，当鼠标点击“CLEAR”按钮时执行相应代码。

def mouseClicked():
    # 原代码绘制圆形
    # circle(width/2, height/2, width)
    # 替换为仅响应清除按钮点击并绘制深蓝色方块的代码
    # 此处需根据按钮位置判断点击事件，代码略
    pass

当清除按钮正常工作后，还可尝试添加保存（为图像）按钮、橡皮擦、更多颜色样本甚至颜色混合器等功能。

4. 创意编程的拓展方向

创意编程可借助鼠标和键盘输入为程序添加交互性，同时编程环境支持多种输入设备，如麦克风、摄像头和游戏控制器，还可连接 Arduino 板构建自定义输入设备。

在图形界面开发方面，编程环境有 GUI 库可供探索，Python 也有 Tkinter、PyQt 和 Kivy 等框架。对于想要进一步探索的人，可考虑以下方向：
|探索方向|具体内容|
| ---- | ---- |
|Processing 高级技巧|可在官方论坛与社区成员交流，获取帮助并了解新动态。官方 Python Mode 参考文档提供详细描述和代码示例，还可探索“Images and Pixels”以进行像素级图形操作、使用“P3D”进行 3D 绘图以及利用各种库实现物理、GUI、视频、AI 和音频等功能。|
|Python 框架|Python 是通用编程语言，适用于 AI、游戏、模拟、Web 应用等领域，有众多相关库和框架。如用于游戏开发的 Invent Your Own Computer Games with Python ，以及深入介绍 Python 的 Python Crash Course 等。|
|其他创意编程环境|可学习 Processing 的 Java 模式、JavaScript 的 p5.js 和 Ruby 的 JRubyArt 等变体，也可探索 openFrameworks（C++）和 OPENRNDR（Kotlin）等。若想编程与现实世界交互的设备，Arduino 是不错的选择。|

graph LR
    A[创意编程] --> B[鼠标与键盘交互]
    B --> C[绘图应用功能拓展]
    C --> D[添加键盘快捷键]
    C --> E[添加清除按钮等功能]
    A --> F[拓展探索]
    F --> G[Processing 高级技巧]
    F --> H[Python 框架]
    F --> I[其他创意编程环境]

通过上述内容，我们不仅掌握了在绘图应用中添加键盘快捷键和其他功能的方法，还了解了创意编程的多种拓展方向，为进一步提升编程技能和实现创意项目提供了思路。

5. 编程基础与操作回顾

在编程过程中，我们会用到各种基础操作和概念，下面进行简要回顾：
- 变量与数据类型
- 变量用于存储数据，命名需遵循一定规范。例如， x = 10 中 x 就是一个变量，存储了整数 10。
- 常见的数据类型有整数（如 10）、浮点数（如 3.14）、字符串（如 “hello”）、布尔值（True 或 False）等。
- 运算符
|运算符类型|运算符|示例|
| ---- | ---- | ---- |
|算术运算符|+、-、 、/、%| 5 + 3 结果为 8， 5 % 3 结果为 2|
|赋值运算符|=、+=、-= 等| x = 5 ， x += 3 相当于 x = x + 3 |
|比较运算符|==、!=、<、>、<=、>=| 5 == 3 结果为 False|
|逻辑运算符|and、or、not| True and False 结果为 False|
- 控制流语句
- 条件语句 *：根据条件判断执行不同的代码块。

if x > 10:
    print("x 大于 10")
elif x == 10:
    print("x 等于 10")
else:
    print("x 小于 10")

- **循环语句**：用于重复执行代码块。

# for 循环
for i in range(5):
    print(i)

# while 循环
i = 0
while i < 5:
    print(i)
    i += 1

6. 图形绘制与变换

在创意编程中，图形绘制和变换是重要的部分。
- 基本图形绘制
- 点 ：使用 point() 函数绘制点。

point(50, 50)

- **线**：使用 `line()` 函数绘制线。

line(10, 10, 100, 100)

- **圆**：使用 `circle()` 函数绘制圆。

circle(50, 50, 30)

- **矩形**：使用 `rect()` 函数绘制矩形。

rect(20, 20, 80, 60)

• 图形变换
  • 平移 ：使用 translate() 函数将图形在坐标系中移动。

translate(50, 50)
circle(0, 0, 20)

- **旋转**：使用 `rotate()` 函数将图形绕指定点旋转。

rotate(radians(45))
rect(0, 0, 30, 20)

- **缩放**：使用 `scale()` 函数对图形进行缩放。

scale(2)
circle(50, 50, 20)

7. 数据处理与可视化

在编程中，数据处理和可视化也是常见的需求。
- 数据读取
- CSV 文件 ：可使用 loadStrings() 函数读取 CSV 文件。

lines = loadStrings("data.csv")
for line in lines:
    parts = line.split(",")
    print(parts)

- **JSON 文件**：使用 `json` 模块读取 JSON 数据。

import json
data = loadStrings("data.json")[0]
parsed_data = json.loads(data)
print(parsed_data)

• 数据可视化
  • 可使用图形绘制函数将数据以图形形式展示，例如绘制柱状图。

data = [10, 20, 30, 40]
for i, value in enumerate(data):
    rect(i * 30, 0, 20, value)

8. 面向对象编程

面向对象编程是一种重要的编程范式，通过定义类和创建对象来组织代码。
- 类的定义

class Circle:
    def __init__(self, x, y, radius):
        self.x = x
        self.y = y
        self.radius = radius

    def display(self):
        circle(self.x, self.y, self.radius)

• 对象的创建和使用

c = Circle(50, 50, 30)
c.display()

graph LR
    A[编程基础] --> B[变量与数据类型]
    A --> C[运算符]
    A --> D[控制流语句]
    E[图形绘制与变换] --> F[基本图形绘制]
    E --> G[图形变换]
    H[数据处理与可视化] --> I[数据读取]
    H --> J[数据可视化]
    K[面向对象编程] --> L[类的定义]
    K --> M[对象的创建和使用]

通过对上述编程知识的综合运用，我们可以在创意编程的道路上不断前进，实现更加复杂和有趣的项目。无论是简单的图形绘制，还是复杂的数据处理和交互应用，都离不开这些基础知识的支撑。不断探索和实践，将能创造出更多有价值的作品。