《Processing互动编程》第6课背景图(引入图片)
(2019-05-20 08:41:18)
标签:
《processing互动编程创客教育初中信息技术杂谈 |
分类: 《Processing互动编程》 |
任务:引入二维码的背景图片,然后用线条模拟扫码的动画效果。
复习:
background(变量);
复习:
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.准备:找一张背景图,并存放在程序保存的文件中,便于调用。(可先保存文件形成文件夹)
素材图片:
1)定义存放图片的变量:PImage 变量
2)调用图片:变量 =
loadImage("图片名.后缀名")
参考:
二、线条动画-扫码
1.绘制线:line(0, y, width, y)
其中y不断变化时,产生多条线
参考代码:
线条到达底部后,重新置零,即y的值置零
多个功能的代码在合成为一个整体程序时,个别语句需要调整,在逻辑上形成完整的功能。
参考:
1.变量.mask(); 图片效果
在范例程序中添加:bg.mask(bg);
可使背景图片产生虚化的效果,试一试,加在哪里合适?
2.noLoop();终止循环
将该语句加入范例程序中,放在哪里,可产生只扫码一次的动画效果。