P5.js动态图形描摹以及拓展

创意编程作业

主题：从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹，并进行拓展
从中选取的图片为：

每一个都是四个圆构成的一个框架，中间是一个正方形分成四个扇形进行旋转，每一个扇形都是在圆里进行旋转的。对角的扇形运动方向是一致的。

绘制图案

由图形运动规律可知，方格绘制并非直接绘制圆和正方形，而是依据周期分为两次绘制：绘制黑背景白方框

再对图形进行填充色，填充色是运用了fill函数

并且用了正弦函数用于返回自程序开始来的毫秒数

正弦函数

绘制圆的函数

绘制矩形的函数

完全代码与生成

代码：

function setup() {createCanvas(600,600);frameRate(25);
}
function draw() {background(0);var dx=0dx+=PI/180;var recS = 48.75;var t=(millis()/20)*sin(dx);if(dx==PI){dx=0;}for(var i=0;i<6;i++){for(var j=0;j<6;j++){fill(255);ellipse(i*100+50, j*100+50, 95, 95); fill(0);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();}}
}

生成截图：

拓展

圖片截圖：

其中旋转的函数rotate，在拓展中旋转的是矩形

背景不是圆而是多个矩形构成的背景

完整代码：

function setup() {createCanvas(600,600);frameRate(25);
}
function draw() {background(0);var dx=0dx+=PI/180;var recS = 48.75;var t=(millis()/20)*sin(dx);if(dx==PI){dx=0;}for(var i=0;i<6;i++){for(var j=0;j<6;j++){fill(255);rect(i*100+50, j*100+50, 95, 95); fill(0);translate(i*100+50, j*100+50);if(i%2==0&&j%2==0){rotate(-t);ellipse(0,0,recS,recS); }else if(i%2==1&&j%2==0){rotate(t);rect(-recS,0,recS,recS); }else{ rotate(t);rect(0,-recS,recS,recS); }resetMatrix();}}}

總結

這次對代碼和函數有了進一步認識，通过这次实验的亲身操作和实践，学习掌握了许多原本不知道的或者不太熟悉的地方。所以下次课的时候一定要更认真的听讲，争取把所有的东西都搞懂。

P5.js动态图形描摹以及拓展相关推荐

p5.js动态图形临摹以及拓展
p5.js动态图形临摹以及拓展动态图形原图原图分析代码分析与公式推导分析推导成果展示临摹拓展作品拓展1 拓展2 动态图形原图本次选择临摹图形为该图原图分析可以看出,图形底层由六 ...
互动媒体技术——基于p5.js实现动态图形临摹与拓展：炫彩光影的千变万化！
博文索引目录: 1. 引言 2. 临摹结果对比 3. 临摹过程 3.1 准备工作 3.2 原图规律--语言描述 3.3 原图规律--数学与代码描述 3.4 完整代码 4. 创意拓展 4.1 拓展一-- ...
p5.js 动态的表达与趣味
码绘是一个挺有争议的东西.很多人觉得它很麻烦,难度很大,门槛很高.其实想想,也许只是因为陌生. 与码绘相对应的是手绘,很多人包括之前的我,都觉得用笔画不需要什么基础都可以,笔随心动,不受束缚,而且人人 ...
老慜的A5作业——p5.js 动态、周期、随机、面向对象
A5 "运动"主题的创意编程习作终于到了这学期最后一个编程习作了,来看看最后这学期都憋出来什么玩意吧! A4pluse,上次作业中对蝴蝶的飞舞动作进行了优化,并且增加了一些环境细 ...
p5.js动态自画像
自画像展示由于本人喜欢看国产动画片<大耳朵图图>,里面图图有一个特异功能就是可以动耳朵,所以本次自画像在本人形象的基础上加入交互元素--耳朵可以跟随鼠标光标的移动而移动. 以下为静态形象 ...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...
P5.JS绘制动态图形
P5.JS绘制动态图形一.平台第一次使用p5.js进行码绘,此次直接使用P5.JS官网的在线编辑器进行编写,完成后点击file->download即可保存到本地. 在正式绘制之前,我经过小小 ...
p5.js创意绘图(1)动态图形
利用p5.js临摹一幅动态图形. 原图分析看起来像是两个葫芦在转圈,其实每个圆点并没有旋转,只是在以图形中心为原点的射线上来回移动.长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍,且 ...
p5.js 编程临摹动态图形（互动媒体技术作业）
p5.js 编程临摹动态图形(互动媒体技术作业) 动态图形的规律分析 p5.js 代码历程走过的弯路拓展总结动态图形的规律分析从老师的动态图形参考资料中,我选择了以下图形进行临摹: 初次见面 ...

P5.js动态图形描摹以及拓展

创意编程作业

绘制图案

完全代码与生成

拓展

總結

P5.js动态图形描摹以及拓展相关推荐

最新文章

热门文章