p5.js实现动态旋转的小球

实验要求：

从给出的参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹并进行拓展。编程语言推荐p5,processing。写一篇文章发表为博文、推文等形式，描述从原作中提炼出的规律。

使用的工具

p5.js官网在线编辑器
https://editor.p5js.org

想要临摹的动态图形

临摹过程

小白一枚，从零开始。
盯着图片看了一会儿，还截了张图，首先我要画只球出来，然后画两只球出来，画的球要可以旋转，这两只球的要在同一个圆上…

画只球

第一次打开编辑器或者新建都会默认是下面这个样子，setup()函数是只在一开始调用一次，draw()函数则会在之后不停调用。

function setup() {createCanvas(400, 400);
}function draw() {background(220);
}

画只球(实际上只是个圆形，但如果称呼它为圆的话，感觉怪怪的,反正这里的小球实际上都是圆)

function draw() {background(220);//设置背景色，220为灰度值ellipse(200,200,200,200);//圆心坐标（200，200），宽度200，高度200
}

填充颜色

function draw() {background(220);//设置背景色，220为灰度值noStroke();//去除边线fill(32,178,170);//填充颜色ellipse(200,200,200,200);//圆心坐标（200，200），宽度200，高度200
}

画只旋转的小球

function setup() {createCanvas(400, 400);//创建400x400的画布
}function draw() {background(0);//设置背景色，220为灰度值noStroke();//去除边线fill(32,178,170);//填充颜色t=millis()/1000;ellipse(200+60*cos(2*t),200+80*sin(2*t),20,20

p5.js实现动态旋转的小球相关推荐

P5.JS绘制动态图形
P5.JS绘制动态图形一.平台第一次使用p5.js进行码绘,此次直接使用P5.JS官网的在线编辑器进行编写,完成后点击file->download即可保存到本地. 在正式绘制之前,我经过小小 ...
用p5.js实现动态形状笔刷
用p5.js实现动态创意画板跟之前两篇文章有关联的是,这次也是为了互动媒体大作业写了一篇博客. 这次的作业内容是编写一个绘画系统,提供一系列绘画颜料给用户操作,这颜料可以是画笔.颜料或者滤镜的形式, ...
互动媒体技术——基于p5.js实现动态图形临摹与拓展：炫彩光影的千变万化！
博文索引目录: 1. 引言 2. 临摹结果对比 3. 临摹过程 3.1 准备工作 3.2 原图规律--语言描述 3.3 原图规律--数学与代码描述 3.4 完整代码 4. 创意拓展 4.1 拓展一-- ...
p5.js 实现动态互动画板
目标编写一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个绘画系统是对"绘画"的概念的扩展,但仍然体现 ...
p5.js之动态魔幻画板
基于p5.js的魔幻画板一.起因本学期的互动媒体技术大作业要求每个人做一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个 ...
用P5 JS绘制动态绚丽烟花——动态篇
上一节我们探究了绘制静态图像手绘与码绘的差异,但是万事万物,变化万千,有很多东西仅仅用静态是无法描述的. 正如恩格斯所言:"整个自然界,从最小的东西到最大的东西,从沙粒到太阳,从原生生物到人 ...
第一次码绘——P5.JS实现动态图片临摹
所临摹图片临摹过程首先我们先仔细观察这张图片的静态图片,确定其图案我这张图截的效果并不是很好,但也可以看出它是由不同数量的小圆组成一个大圆,那我们应该怎么处理呢?答案是一个个画就完事了(误), ...
互动媒体技术-用p5.js临摹动态图片
1,临摹图片 2,图像运动规律原图中一共有36个等大的四分之三圆形,按照一定的规律转动,可以等效为圆形不动,每个圆上有以其半径为边长的矩形在绕圆形的原点转动,每四个为一组,其他部分都是在重复这四个的 ...
p5.js 变换操作
theme: smartblue 本文正在参加「金石计划」本文简介带尬猴,我嗨德育处主任在 canvas 里,变换是基础功能.很多基于 canvas 封装的库都有这功能,比如 <Fabri ...