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

最新推荐文章于 2024-08-20 09:09:22 发布

天边琥珀明

最新推荐文章于 2024-08-20 09:09:22 发布

阅读量3.2k

点赞数 2

本文链接：https://blog.csdn.net/bellisheng/article/details/102655902

版权

本文介绍了如何使用p5.js从零开始临摹并拓展动态旋转小球的图形。通过设置不同的相位差，实现了多个小球在同一圆上的匀速旋转，同时探讨了速度变化对旋转效果的影响，以及转动方向的变化。文章指出了作品的不足，如小球转动时的画面抖动问题，并表达了继续学习的愿望。

摘要由CSDN通过智能技术生成

实验要求：

从给出的参考资料中的“动态图形艺术”中选取不少于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,