《getting started with p5.js》（中文版） 第一章 您好：了解p5.js
版权声明：本文为博主原创文章，未经博主允许不得转载。
第一章 您好：了解p5.js
第二章 开始写代码：创建你的第一个p5.js程序
第三章 画：定义和画简单的形状
第四章 变量： 存储、修改和再利用数据
第五章 响应： 利用鼠标、键盘和触摸板控制和影响程序
第六章 平移、旋转、缩放：坐标的变换
第七章 多媒体： 加载和显示多媒体，包括图片和字体
第八章 运动： 移动图形并为其设计“舞步”
第九章 函数： 建立新的代码模块
第十章 对象： 创建含有变量和函数的代码模块
第十一章 数组： 让处理一列变量变得简单
第十二章 数据： 载入并可视化数据
第十三章 延伸： 了解声音的DOM
1、您好
p5.js 是一款用来制作图片、动画和交互的软件。它的设计理念是：写一行代码，然后屏幕上就出现了一个圆。再增加一些代码，圆就会跟着鼠标走。再增加一些代码，当鼠标点击这个圆时，圆就会变色。我们将其称之为用代码素描。你一行一行地写，程序就一点一点的实现了。
编程课程通常将注意力优先放在结构与理论上。而任何的可视化的教学——比如一个交互界面、一个动画，通常是在学习了几周的算法和方法课程之后。就好像你必须吃完你的正餐才能够享受饭后甜点一样。这些年，我们看到太多的朋友们试着想要学习编程却在第一次课后或者在第一次交作业前的夜晚夜不能寐之后就放弃了。使他们失去了对计算机编程初始的好奇心的原因正是他们看不到他们所学的东西与他们所想创造的东西之间的纽带。
p5.js提供了一种创建交互图形来学习编程的方法。虽然有很多可能的方式来教授编程，然而学生经常从立刻的视觉反馈中找到勇气和动力。p5.js正是致力于提供这些反馈，
而它在图形、素描和社区方面的鲜明特点将在下文中讨论。
素写和原型
速写是一种思考的方式，它是一个轻松而快速的过程。它的基本目的就是在短时间内产生大量的想法。在我们的日常工作中，我们经常先将想法画在纸上然后将其转化为代码。动画和交互的想法通常画在充满标记的故事板上。等我们将其用一些软件画好之后，我们选取其中最好的想法并整合成原型（如图1-1）。这是一个制作、测试然后提升的在纸和屏幕上来来回回的循环的过程。
图1-1
可塑性
p5.js包含了许多可以一起组合使用的工具包，这些工具包就好像放在一个软件的工具腰包里一样。所以，p5.js可以被快速使用，也可以做深层次的研究。因为使用p5.js编写的程序可以只有几行也可以有成千上万行，这给成长和改变带来了空间。p5.js的拓展库甚至已经延伸到声音和利用html增加按钮、滑块、输入框、摄像头捕捉等领域
先贤们
人们利用计算机制作图片最早可以追溯到上世纪60年代，我们可以从这段历史中学到很多。比如，在电脑可以使用CRT 或者 LCD屏幕显示之前，人们使用巨大的打点机器（如图1-2）来画图。在我们的生命长河中，我们一直站在巨人的肩膀上，而对于p5.js来说，这些巨人包括哪些设计学、计算机图形学、艺术学、建筑学、统计学和空间设计学领域中的思想家们。想要了解他们，你可以看看Lvan Sutherland 的 《Sketchpad》（1963）、Alan Key的《Dynabook》（1968）以及Ruth Leavitt的《Artist and Computer》（Harmony Books，1976）。国际图形形象协会（ACM SIGGRAPH）和 电子艺术档案（Ars Electronica archives）提供了图形与软件历史的令人着迷的一瞥。
图1-2
p5.js的家谱
和人类语言一样，程序语言也有属于自己的家谱。p5.js是编程语言JavaScript的一个分支。p5.js的语法与JavaScript几乎一样，但是p5.js增加了关于图形和交互相关的特征（如图1-3）并且提供了更简单的方式使用已经被浏览器支持的原生HTML5的特性。由于这些分享的特征，学习p5.js成为了学习其他语言和使用不同软件工具的一个初级阶段。
图1-3
加入我们
每天有数以千计的人们使用p5.js。和他们一样，你可以免费下载它。你甚至拥有权力修改它的代码来满足你的需求。p5.js 是一个FLOSS项目（FLOSS, 即free/libre/open source software）,在社区精神的指引下，我们鼓励你在线上分享你的项目和知识（如图1-4）。
图1-4
(译者：Jason Lee，邮箱：676574039@qq.com)
《getting started with p5.js》（中文版） 第一章 您好：了解p5.js相关推荐
- Java Persistence with MyBatis 3(中文版) 第一章 MyBatis入门
本章将涵盖以下话题: ž MyBatis是什么? ž 为什么选择MyBatis? ž MyBatis安装配置 ž 域模型样例 1.1 MyBatis是什么 MyBatis是一个简化和实现了Ja ...
- js高级第一章--变量提升，函数提升
js高级第一章–变量提升,函数提升 文章目录 前言 一.什么是js里的提升? 二.js变量提升 三.js函数提升 四.特殊情况 总结 前言 在js中,最基本的声明方式有三种,即:var,let,con ...
- OGRE 3D 1.7 Beginner‘s Guide中文版 第一章
文章来源:http://www.cnblogs.com/oneDouble/articles/2492648.html 这是一本优秀的书,这个中文版也是极好地,译者是我QQ群里的网友,陆陆续续用一年翻 ...
- [转载]OGRE 3D 1.7 Beginner‘s Guide中文版 第一章
这是一本优秀的书,这个中文版也是极好地,译者是我QQ群里的网友,陆陆续续用一年翻完,却没有多少人看到,因为最近发现ogre3d.cn关门大吉了,谷歌了一下更没有第二家转载,我心想,哎呀,这么好的东西以 ...
- 第一章：前端视角——js运行环境之node.js基础入门
1.为什么使用node.js 大部分情况下,我们写的js代码都是直接运行在浏览器中,由浏览器进行执行与渲染.但是随着前端工程化的发展,我们写的js代码越来越复杂,所以对我们的代码进行预处理已成为了必要 ...
- Python基础教程（第3版）中文版 第一章 快速上手：基础知识（笔记）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,分享给大家: https://www.captainai.net/lf 如果你学完了Python不知道干什么,不妨去了解一下. 第一章 快速 ...
- AMBA5 AHB协议规范(AHB5,AHB-Lite)中文版-第一章 引言
ARM AMBA 5 AHB 协议规范 AHB5, AHB-Lite 发行信息 变更历史 日期 版本 保密性 更改 2006/6/26 A 非保密 First release for v1.0 201 ...
- Solr In Action 中文版 第一章（四、五）
1.1 功能概览1. 4 最后,让我们再依照以下的分类.高速的过一下Solr的主要功能: ·用户体验 ·数据建模 ·Solr 4的新功能 在本书中.为你的用户提供良好的搜索体验 ...
- Tensorflow官方文档中文版——第一章
第一示例: import tensorflow as tf import numpy as npx_data=np.float32(np.random.rand(2,100))#随机输入 y_data ...
最新文章
- break lab c语言,C语言实验lab10.doc
- 日语学习-多邻国-关卡1-时间2
- Java反射-静态/动态加载类
- 062 函数进阶小结
- encoder, decoder, attention机制理解
- java swing 显示图片_Swing显示图片
- 夜深了，最好喝点咖啡
- h5直播|微直播weLiveShow|视频h5|video直播
- 如何建立一个属于自己的网站（小白教程）
- 情人节程序员用HTML网页表白【情人相册模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
- 如何成为有效学习的高手(笔记)
- 普通用户可以申请华为鸿蒙系统吗,鸿蒙OS系统普通用户有申请成功的吗？
- 机器人测钢卷直径_一种基于关节机器人的冷轧钢卷卷芯焊接方法与流程
- MAMP软件的安装和使用
- 一键多值的Map~~
- 整理*软件测试的方法一共有几种
- Skype语音测试，会议电话Skype音频测试
- C# 中String Builder 和string对象
- 企业私域流量电商运营规划方案计划表
- UART/RS485/RS232