名字:KIMKAI 装扮一:日常BOY 装扮二:酷BOY
按下鼠标从日常BOY切换到酷BOY模式 并带有TEMPO文字闪烁动效
1.头发、帽子、眼睛等带有弧线形状的绘制 主要用到定义bezier曲线顶点和控制点的函数bezierVertex() 语法 vertex(x1,y1): bezierVertex(x2, y2, x3, y3, x4, y4) 说明: 定义贝塞尔曲线的顶点坐标。每次调用 bezierVertex() 将定义贝塞尔曲线的第二个锚点(x4,y4)和两个控制点(x2,y2)、(x3,y3),以在线或形状上增加一个新部分。 在 beginShape() 内第一次调用 bezierVertex() 之前必须先调用一次 vertex() 以定义第一个锚点。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE(模式)参数的情况下使用。 例:帽子的绘制
beginShape(); fill(0,0,0,); noStroke(); vertex(145,100); bezierVertex(240,55,235,145,295,130); bezierVertex(295,135,320,160,328,157); bezierVertex(380,33,175,10,145,100); endShape(CLOSE);2.鼠标点击切换模式 主要用到系统变量 mouseIsPressed 说明 mouseIsPressed 系统变量将会在滑鼠键被按下时为真(true),而没按下时为假(false)。 例:衣服颜色的改变
if (mouseIsPressed) { fill( 220,20,60);//红色衣服 stroke(220,20,60); } else{ fill(255,255,255);//白色衣服 stroke(255,255,255); }3.闪烁文字的制作 textLeading() 定义或获取行与行之间的像素距离。此设置将会在所有接下来的 text() 函数调用时生效。 text() 将文字绘制在荧幕上。第一个参数为要显示在荧幕上的文字,第二、三个参数定义文字的位置。 textStyle() 定义或获取系统字体的风格。 textSize() 定义文字的大小。 mills() 返回自程序开始以来的毫秒数,一般可用于定时事件及动画序列。
if (mouseIsPressed) { background(255);//背景颜色切换 let lines = 'T\nE\n\nP\n';//设置要显示的文字 let m='M'; let o='O'; fill(220,20,60); //设置文字颜色 textSize(50); //设置文字大小 textStyle(BOLD); //设置文字风格 textLeading(60); //定义行与行之间的距离 let s = millis(); //获取自鼠标按下以来的毫秒数 if(s%500<400) //每0.5秒变换一次颜色,颜色持续时间为0.4秒 { text(lines, 400, 120); text(m, 391, 238); text(o, 397, 358); } else { fill(0,0,0); text(lines, 400, 120); text(m, 391, 238); text(o, 397, 358); } }