加载中…
个人资料
WZ_Daixiaohong
WZ_Daixiaohong
  • 博客等级:
  • 博客积分:0
  • 博客访问:367,090
  • 关注人气:232
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

《Processing互动编程》第6课背景图(引入图片)

(2019-05-20 08:41:18)
标签:

《processing互动编程

创客教育

初中信息技术

杂谈

分类: 《Processing互动编程》
《Processing互动编程》第6课背景图(引入图片)任务:引入二维码的背景图片,然后用线条模拟扫码的动画效果。


复习:

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.准备:找一张背景图,并存放在程序保存的文件中,便于调用。(可先保存文件形成文件夹)
素材图片:
《Processing互动编程》第6课背景图(引入图片)
《Processing互动编程》第6课背景图(引入图片)
《Processing互动编程》第6课背景图(引入图片)
2.调用背景图
1)定义存放图片的变量:PImage 变量
2)调用图片:变量 = loadImage("图片名.后缀名")
                      background(变量); 

参考:
《Processing互动编程》第6课背景图(引入图片)想一想:当有引入背景图时,背景的尺寸大小设置有什么要求?以上例子中size(1023,345)为什么这样设置呢?观察下面这张图:
《Processing互动编程》第6课背景图(引入图片)

二、线条动画-扫码
1.绘制线:line(0, y, width, y) 其中y不断变化时,产生多条线
参考代码:
《Processing互动编程》第6课背景图(引入图片)
2.线条画到底部的处理:
线条到达底部后,重新置零,即y的值置零

《Processing互动编程》第6课背景图(引入图片)
三、合成程序
多个功能的代码在合成为一个整体程序时,个别语句需要调整,在逻辑上形成完整的功能。

参考:
《Processing互动编程》第6课背景图(引入图片)

拓展题:
1.变量.mask(); 图片效果
在范例程序中添加:bg.mask(bg); 可使背景图片产生虚化的效果,试一试,加在哪里合适?

2.noLoop();终止循环
将该语句加入范例程序中,放在哪里,可产生只扫码一次的动画效果。

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有