p5.js创意编程_p5.js互联网创意编程" pdf-程序员宅基地

p5.js创意编程

一、临摹动图

1、临摹动图为：在这里插入图片描述
2、观察动图会发现共有6行6列的圆，以及每个圆上会有一个动态的正方形。可以发现偶数行偶数列规律相同，奇数行偶数列规律相同，偶数行奇数列规律相同，奇数行技术列规律相同。
初始时偶数行偶数列
在这里插入图片描述初始时奇数行偶数列
初始时偶数行奇数列
初始时奇数行奇数列
3、开始写代码，首先填背景色，设置后面要画的小正方体的边长，设置时间轴规律，因为我没有找到合适的周期函数来满足原动图的规律，所以直接用了匀速的。

background(38);
var recS = 48.75;
var t = millis() / 500;

4、写两个for循环，因为6行6列，所以i,j的值都为从0到5的6个值。其中因为上面说的奇偶行的规律，所以写了4个if else的判断。

for (var i = 0; i < 6; i++) {
    
        for (var j = 0; j < 6; j++) {
    
            noStroke(); //去掉描边
            fill(220,220,210); 
            ellipse(i * 100 + 50, j * 100 + 50,
95, 95);
            fill(38);
            translate(i * 100 + 50, j * 100 +
50);
            if (i % 2 == 0 && j % 2 == 0) {
    
                rotate(-t);
                rect(0, 0, recS, recS);
            }
            else if (i % 2 == 1 && j % 2 == 0) {
    
                rotate(t);
                rect(-recS, 0, recS, recS);
            }
            else if (i % 2 == 1 && j % 2 == 1) {
    
                rotate(-t);
                rect(-recS, -recS, recS, recS);
            }
            else {
    
                rotate(t);
                rect(0, -recS, recS, recS);
            }
            resetMatrix();
        }
    }

我的临摹：
在这里插入图片描述

二、扩展动图

更改时间轴为：

var t = cos(millis() / 500);

将正方形换成圆形，并找准圆心坐标，可以实现扩展动图。

for (var i = 0; i < 6; i++) {
    
        for (var j = 0; j < 6; j++) {
    
            noStroke(); //去掉描边
            fill(220, 220, 210);
            ellipse(i * 100 + 50, j * 100 + 50,
95, 95);
            fill(38);
            translate(i * 100 + 50, j * 100 + 50);
            if (i % 2 == 0 && j % 2 == 0) {
    
                rotate(-t);
                ellipse((1 / 2) * recS, (1 / 2)
* recS, recS, recS);
            }
            else if (i % 2 == 1 && j % 2 == 0) {
    
                rotate(t);
                ellipse(-(1 / 2) * recS, (1 /
2) * recS, recS, recS);
            }
            else if (i % 2 == 1 && j % 2 == 1) {
    
                rotate(-t);
                ellipse(-(1 / 2) * recS, -(1 /
2) * recS, recS, recS);
            }
            else {
    
                rotate(t);
                ellipse((1 / 2) * recS, -(1 /
2) * recS, recS, recS);
            }
            resetMatrix();
        }
    }
}

最终拓展动图：
在这里插入图片描述

本文链接：https://blog.csdn.net/qq_43594855/article/details/102670834

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

HTNL5拖拽事件_box.ondragend = function (e) { box.style.csstext =-程序员宅基地

HTML5拖拽事件1. 设置拖拽图片自带拖拽功能其他元素可设置draggable属性<div draggable="true"></div>const box = document.querySelector('.box'); box.addEventListener('dragend', (e) => { box.style.cssText = 'top:' + (e.clientY) + 'px;left:' + (e.clientX) _box.ondragend = function (e) { box.style.csstext = 'top:' + (e.clienty) + 'p

python正则表达式简单的手机号码格式的验证_正确手机格式正则-程序员宅基地

import re#手机号的匹配phone = re.compile('^(13(7|8|9|6|5|4)|17(0|8|3|7)|18(2|3|6|7|9)|15(3|5|6|7|8|9))\d{8}$')num = input('请输入手机号:')if re.match(phone, num): print('格式正确')else: print('格式错误')..._正确手机格式正则

Vue 下拉框获取数据_vue的下拉框的值的获取-程序员宅基地

Vue 使用数据网上很多方法都需要使用到路由器但是我不太会，于是自己写了一个小组件也可以起到获取数据库数据并返回到 Vue 下拉框的作用<template> <div class="demo"> <el-select v-model="queryParams" @change="selectPlatform($event)"> <el-option v-for="(item,index) in timeList" :key="ind_vue的下拉框的值的获取

Akka（13）：分布式运算：Cluster-Sharding-运算的集群分片-程序员宅基地

通过上篇关于Cluster-Singleton的介绍，我们了解了Akka为分布式程序提供的编程支持：基于消息驱动的运算模式特别适合分布式程序编程，我们不需要特别的努力，只需要按照普通的Actor编程方式就可以实现集群分布式程序了。Cluster-Singleton可以保证无论集群节点出了任何问题，只要集群中还有节点在线，都可以持续的安全运算。Cluster-Singleton这种模式保证了某种Ac

java线程 kill linux_新手程序员登录服务器杀进程！高级：你别再瞎Kill进程服务了...-程序员宅基地

免费无套路分享 100G Java 视频、pdf 面试学习资料获取方式：【关注 + 转发】后，私信我，回复关键字【666】，即可免费无套路获取哦~以下是资源的部分目录以及内容截图：干货较多，这里仅仅贴出了部分哟~重要的事再说一遍，获取方式：【关注 + 转发】后，私信我，回复关键字【666】，即可免费无套路获取哦~正文开始，前言我们都知道，kill在linux系统中是用于杀死进程。kill pid ..._java 杀linux进程

actionSupport类-程序员宅基地

actionSupport类该类实现了action接口和其他的几个有用的接口,比如数据校验、错误消息本地化等.继承该类后,这些功能便自动获得.一、基本校验public void validate(){ PortfolioService ps = getPortfolioService(); if ( getPassword().length() == 0 ){ ..._actionsupport类