加载中…《Processing互动编程》第6课背景图(引入图片）
(2019-05-20 08:41:18)
标签：
《processing互动编程创客教育初中信息技术杂谈 |
分类： 《Processing互动编程》 |
任务：引入二维码的背景图片，然后用线条模拟扫码的动画效果。
复习：
1.line函数
line(x1,y1,x2,y2);
其中x1、y1，x2、y2是线段两个端点的横、纵坐标
2.stroke函数
stroke(r,g,b);
思考：无论背景图片是什么尺寸，如何沿着背景图片画一条等宽、等高的线？
调试以下语句，观察它实现的功能；
size(800,800);
line(0,100,width,100);
line(400,0,400,height);
一、背景图
1.准备：找一张背景图，并存放在程序保存的文件中，便于调用。（可先保存文件形成文件夹）
素材图片：
2.调用背景图
1）定义存放图片的变量：PImage 变量
2）调用图片：变量 =
loadImage("图片名.后缀名")
参考：
想一想：当有引入背景图时，背景的尺寸大小设置有什么要求？以上例子中size(1023,345)为什么这样设置呢？观察下面这张图：二、线条动画-扫码
1.绘制线：line(0, y, width, y)
其中y不断变化时，产生多条线
参考代码：
2.线条画到底部的处理：
线条到达底部后，重新置零，即y的值置零
三、合成程序
多个功能的代码在合成为一个整体程序时，个别语句需要调整，在逻辑上形成完整的功能。
参考：
拓展题：
1.变量.mask(); 图片效果
在范例程序中添加：bg.mask(bg);
可使背景图片产生虚化的效果，试一试，加在哪里合适？
2.noLoop()；终止循环
将该语句加入范例程序中，放在哪里，可产生只扫码一次的动画效果。
喜欢
0
赠金笔