ProcessingJS

ProcessingJS

图形

• rect(x, y, w, h)（在新窗口中打开）
• ellipse(x, y, w, h)
• triangle(x1, y1, x2, y2, x3, y3)
• line(x1, y1, x2, y2)
• point(x, y)
• arc(x, y, w, h, start, stop)
• bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
• quad(x1, y1, x2, y2, x3, y3, x4, y4)
• image(image, x, y, width*, height*)

另请参见:ellipseMode, rectMode, imageMode, strokeCap, bezierPoint, bezierTangent, curve, curvePoint, curveTangent, curveTightness

复杂的图形

• beginShape() / endShape() / vertex()
• curveVertex()
• bezierVertex()

另请参见:strokeJoin, curveTightness

颜色

• background(r, g, b)设置背景色
• fill(r, g, b)设置形状的填充颜色
• noFill()关闭形状的填充
• stroke(r, g, b)设置形状的边框颜色
• strokeWeight(thickness)更改线条和轮廓的粗细
• noStroke()关闭轮廓的形状
• color(r, g, b)存储颜色在变量中
• blendColor(c1, c2, MODE)两种颜色混合在一起
• lerpColor(c1, c2, amount)求 2 种颜色之间的颜色

另请参见:colorMode, red, green, blue, alpha, hue, saturation, brightness

文本

• text(text, x, y)绘制一些文字
• textFont(font, size*)更改文本的字体
• textSize(size)更改文本的大小

另请参见:textWidth, textAscent, textDescent, textLeading, textAlign

变换

• rotate(angle)绕中心旋转图形
• scale(amount)在二维平面中放大图形
• translate(x, y)平移图形

另请参见:pushMatrix/popMatrix, resetMatrix, printMatrix

环境

• width / height画布的大小
• draw = function() { }在程序执行期间反复调用
• playSound(sound)播放一个允许的声音

另请参见:Program.assertEqual, Program.restart, frameRate(fps), frameCount, loop, noLoop

鼠标

• mouseX, mouseY鼠标的当前坐标
• pmouseX, pmouseY过去的鼠标坐标
• mouseButton按下哪个按钮
• mouseIsPressed鼠标是否被按下
• mouseClicked = function() { }在单击鼠标时调用
• mousePressed = function() { }当按下鼠标时调用
• mouseReleased = function() { }当释放鼠标时调用
• mouseMoved = function() { }当鼠标移动时调用
• mouseDragged = function() { }拖动鼠标时调用
• mouseOver = function() { }当鼠标在移过画布时调用
• mouseOut = function() { }当鼠标移出画布时调用

键盘

• key表示被按下的键的数字
• keyCode表示一个特殊键被按下
• keyIsPressed如果键被按下, 返回真, 否则假
• keyPressed = function() { }当按下某个键时调用
• keyReleased = function() { }当释放某个键时调用
• keyTyped = function() { }当键入键时调用

数学

• random(low, high)生成一个随机数
• dist(x1, y1, x2, y2)计算两个点之间的距离
• constrain(value, min, max)限定最小值和最大值
• min(num1, num2)返回两个数字的最小值
• max(num1, num2)返回两个数字的最大值
• abs(num)返回数字的绝对值
• log(num)返回一个数的对数
• pow(num, exponent)把一个数变成指数
• sq(num)求一个数的平方
• sqrt(num)取一个数的平方根
• round(num)返回最近的整数
• ceil(num)返回最近更大/相等值的整数
• floor(num)返回最近的更小/相等值的整数
• PVector(x, y)一个描述 2 维向量对象

另请参见:mag, exp, map, norm, lerp, noise, noiseDetail, Random.nextGaussian

三角函数

• cos(degrees)取余弦值
• sin(degrees)取正弦值
• tan(degrees)取正切值

另请参见:acos, asin, atan, atan2, radians, degrees, angleMode

日期和时间

• day() / month() / year()当前日期
• hour() / minute() / second()当前时间
• millis()程序启动以来消逝的毫秒

调试

• debug(arg1, arg2, ...)打印到您的浏览器开发人员控制台
• println(data)列印新一行文本到画布控制台
• print(data)打印到画布控制台

JavaScript

• var drawWinston = function() { }定义一个新的函数
• var array = [0, 1, 2, 3, 4]制作 5 个数字的矩阵
• if (x < 20) { }仅当某一特定条件为真时运行代码
• for (var i = 0; i < 8; i++) { }重复运行代码固定的次数
• while (x < 250) { }仅当某一特定条件为真时，持续运行代码

我们的文档并不包含更多使用 JavaScript 的方式。了解更多：

• Mozilla 开发者网络 ︰ JavaScript 指南（在新窗口中打开）
• W3Schools JavaScript 教程