{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"---\n",
"title: p5.js教程03-动作响应\n",
"date: 2018-06-06 20:17:55\n",
"tags: [p5.js]\n",
"toc: true\n",
"xiongzhang: true\n",
"\n",
"\n",
"---\n",
"\n",
"\n",
"\n",
"> 声明: 本文由[DataScience](http://mlln.cn)发表,未经允许不得转载。 转载请注明[本文链接](http://mlln.cn)mlln.cn, 并在文后留言`转载`.\n",
"\n",
"本文代码运行环境:\n",
"\n",
"- windows10\n",
"- jupyter notebook\n",
"- p5.js 0.6.1"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"本章主要讲对鼠标/键盘/触摸等事件的响应, 对这些交互事件的响应可以让我们做出更强大的应用。我们首先在第1章中遇到了setup（）和draw（）函数。现在我们将更多地了解它们的作用以及如何使用它们来响应这些事件。\n",
"\n",
"(下面我们注册p5魔法, 以便于在jupyter notebook中使用p5.js, 如果你不用notebook, 请忽略这部分python代码)"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [],
"source": [
"from IPython.core.magic import register_cell_magic\n",
"from IPython.display import IFrame\n",
"\n",
"TEMPLATE = \"\"\"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"Notebook中显示P5.js页面\n",
"\n",
"\n",
"p5.js效果展示: %(name)s
\n",
"\n",
"\n",
"\n",
"\"\"\"\n",
"\n",
"\n",
"@register_cell_magic\n",
"def p5(line, cell):\n",
" file_id, kws = line.split(' ')[0], line.split(' ')[1:]\n",
" kwargs = {}\n",
" for kw in kws:\n",
" k, v = kw.split('=')\n",
" kwargs[k] = v\n",
" filename = f\"p5js-html/p5-03-{file_id}.html\"\n",
" with open(filename, \"w\") as fp:\n",
" fp.write(TEMPLATE % {\"script\": cell, \"name\": filename})\n",
" if 'height' not in kwargs:\n",
" kwargs['height'] = '200px'\n",
" return IFrame(filename, width=\"100%\", **kwargs)\n",
"\n",
"del p5"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### draw和setup函数\n",
"\n",
"draw（）函数中的代码从上到下运行，然后重复执行，直到你通过关闭窗口退出程序。通过draw（）的每次执行称为一帧。 （默认帧速率为每秒60帧，但可以更改。）这是你看到之前教程里出现动态效果的原因。但是setup函数只在开始执行一次。"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 10,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 print-frameCount height=2\n",
"\n",
"// 只执行一次\n",
"function setup(){\n",
" print('Begin.....')\n",
"}\n",
"\n",
"// 每帧执行一次\n",
"function draw() { \n",
" // 在浏览器console中打印当前的帧数\n",
" print(\"I’m drawing\"); \n",
" print(frameCount); \n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 鼠标动作\n",
"\n",
"#### 鼠标位置\n",
"\n",
"mouseX 和 mouseY这两个全局变量就代表鼠标指针的坐标。所以我们可以简单的绘制一个捕捉鼠标轨迹的程序。"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 11,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 mouse-track height=400\n",
"\n",
"function setup(){\n",
" createCanvas(880, 380); \n",
" fill(255, 255, 255, 50)\n",
" stroke(0, 0, 0, 50)\n",
" background(240)\n",
"}\n",
"\n",
"function draw() { \n",
" // mouseX和mouseY代表鼠标位置\n",
" // 使用 pmouseX, pmouseY捕捉前一个鼠标位置\n",
" // 可以使用前后两个鼠标点的位置推断鼠标速度\n",
" // 我们让速度快的轨迹深一些\n",
" let weight = dist(mouseX, mouseY, pmouseX, pmouseY)*5;\n",
" // 设置透明度为weight\n",
" stroke(0, 0, 0, weight)\n",
" // 绘制圆圈\n",
" ellipse(mouseX, mouseY, 10, 10, 0)\n",
" // 绘制轨迹, \n",
" line(mouseX, mouseY, pmouseX, pmouseY); \n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### 鼠标点击\n",
"\n",
"mouseIsPressed变量可以显示鼠标是否点击, 它是一个布尔值。"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 12,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 mouse-click height=400\n",
"\n",
"function setup(){\n",
" createCanvas(880, 380); \n",
" fill(255, 255, 255, 50)\n",
" stroke(0, 0, 0, 50)\n",
" background(220)\n",
"}\n",
"\n",
"let w = 0\n",
"function draw() { \n",
" // 鼠标点击加粗线条\n",
" if (mouseIsPressed){\n",
" w +=1\n",
" strokeWeight(w)\n",
" }\n",
" // 绘制轨迹, \n",
" line(mouseX, mouseY, pmouseX, pmouseY); \n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 键盘动作\n",
"\n",
"key变量存储已按下的最新键。与布尔变量keyIsPressed（每次释放键时恢复为false）不同，key变量保持其值，直到按下下一个键。以下示例使用key的值将字符绘制到屏幕。每次按下新键时，值都会更新并绘制一个新字符。某些键（如Shift和Alt）没有可见字符，因此当您按下它们时，不会绘制任何内容。"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 13,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 show-key height=200\n",
"\n",
"function setup() { \n",
" createCanvas(120, 120); \n",
" textSize(64); \n",
" textAlign(CENTER); \n",
" fill(255); \n",
"}\n",
"function draw() { \n",
" background(0); \n",
" text(key, 60, 80); \n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"使用方向键控制鼠标移动。"
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 14,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 arrow-key height=200\n",
"\n",
"let x = 215;\n",
"let y = 60\n",
"function setup() { \n",
" createCanvas(480, 120); \n",
" background(150)\n",
"}\n",
"function draw() {\n",
" if (keyIsPressed) { \n",
" if (keyCode == LEFT_ARROW) {\n",
" x--; \n",
" } else if (keyCode == RIGHT_ARROW) {\n",
" x++; \n",
" }else if(keyCode == UP_ARROW){\n",
" y --;\n",
" }else if(keyCode == DOWN_ARROW){\n",
" y ++;\n",
" }\n",
" } \n",
" ellipse(x, y, 10, 10); \n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 总结\n",
"\n",
"除了上面介绍的常用动作外还有很多, 这里不一一介绍, 等你在以后的应用中用到其他的动作事件, 再去查文档即可。"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}