P5的动态绘画

尝试利用P5.JS绘制一幅“动态”绘画

作业流程:

1.首先,我们需要绘制一幅会动的“图”,本着这一思想,写下了第一段代码。

var x=0;
function setup() { 
  createCanvas(400, 400);
} 
function draw() { 
  background(255);
  x+=2;
  fill(0,255,255);
  ellipse(x%width,height/2,20,20);
}

它的功能十分简单,就是一个在屏幕中央不断右移的圆形,而 x%width 的写法让这个球在到达屏幕最右端后回到最左端,继续这个循环。

效果如下:

在这里插入图片描述

2.现在,我们利用for循环画出10排10列圆形,i和k两个循环数使圆形的位置改变并让其颜色渐变。

var x=0;
var y=0;

function setup() { 
  createCanvas(400, 400);
} 
 
function draw() { 
  background(255);
  //width和height是关键词,分别是Canvas的宽和高
  x+=2;
  y+=2;
  for(var i=0;i<10;i++){
	  for(var k=0;k<10;k++){
	  fill(255,255-i*20,255-k*20);
	  ellipse((x+i*30)%width,(y+k*30)%height,20,20);
	  }
  }
	fill(255,245,0);
}

从这一步,因为圆形数量的增多,画面开始丰富起来,同时有了一些变化元素,例如:颜色渐变与位置平移。

效果如下:
在这里插入图片描述

3.接着,我们运用rotate()函数,对圆形的轨迹(按坐标起点)进行旋转,这样小球就在屏幕中做散乱位移(其实是有规则地),这一步为接下来的操作做准备。<

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值