互动媒体技术动态图形临摹
2020-01-12 15:42
344 查看
首先放出原图
临摹图片预览
我的方法是首先用PS打开图片,找到合适的位置确定图案的起点,用PS取色器获取每个小球的颜色
然后编写循环函数放置小球,为了确保每个小球旋转的周期一样,进行了大致的运算。
下面放出代码
function setup() { createCanvas(600, 600); frameRate(55); } function draw() { background(50); translate(width/2,height/2); noStroke(); drawCirle1(); drawCircle2(); drawCircle3(); drawCircle4(); drawCircle5(); drawCircle6(); drawCircle7(); drawCircle8(); } function drawCirle1(){ fill(23,114,184); //translate(width/2,height/2); for(var i=0;i<5;i++){ push(); theta = TWO_PI * i / 4; rotate(theta); rotate(millis()/250); circle(width/45,0,5); pop(); } } function drawCircle2(){ fill(0,164,150); for(var i=0;i<9;i++){ push(); theta = TWO_PI * i / 8; rotate(theta); rotate(millis()/250); circle(width/20,0,5); pop(); } } function drawCircle3(){ fill(130,197,64); for(var i=0;i<13;i++){ push(); theta = TWO_PI * i / 12; rotate(theta); rotate(millis()/250); circle(width/12,0,5); pop(); } } function drawCircle4(){ fill(237,175,45); for(var i=0;i<17;i++){ push(); theta = TWO_PI * i / 16; rotate(theta); rotate(millis()/295); circle(width/9,0,5); pop(); } } function drawCircle5(){ fill(212,82,50); for(var i=0;i<21;i++){ push(); theta = TWO_PI * i / 20; rotate(theta); rotate(millis()/400); circle(width/7.2,0,5); pop(); } } function drawCircle6(){ fill(200,35,82); for(var i=0;i<25;i++){ push(); theta = TWO_PI * i / 24; rotate(theta); rotate(millis()/450); circle(width/6,0,5); pop(); } } function drawCircle7(){ fill(194,34,134); for(var i=0;i<29;i++){ push(); theta = TWO_PI * i / 28; rotate(theta); rotate(millis()/600); circle(width/5.1,0,5); pop(); } } function drawCircle8(){ fill(97,46,141); for(var i=0;i<33;i++){ push(); theta = TWO_PI * i / 32; rotate(theta); rotate(millis()/800); circle(width/4.5,0,5); pop(); } }
拓展图形
这里我添加了个参数 使得每个小球有放缩
最终效果:
代码如下:
function setup() { createCanvas(600, 600); frameRate(55); } function draw() { background(50); translate(width/2,height/2); noStroke(); drawCirle1(); drawCircle2(); drawCircle3(); drawCircle4(); drawCircle5(); drawCircle6(); drawCircle7(); drawCircle8(); } function drawCirle1(){var move=20*sin(millis()/500); fill(23,114,184); //translate(width/2,height/2); for(var i=0;i<5;i++){ push(); theta = TWO_PI * i / 4; rotate(theta); rotate(millis()/250); circle(width/45,0,5+move); pop(); } } function drawCircle2(){ var move=20*sin(millis()/500); fill(0,164,150); for(var i=0;i<9;i++){ push(); theta = TWO_PI * i / 8; rotate(theta); rotate(millis()/250); circle(width/20,0,5+move); pop(); } } function drawCircle3(){ var move=20*sin(millis()/500); fill(130,197,64); for(var i=0;i<13;i++){ push(); theta = TWO_PI * i / 12; rotate(theta); rotate(millis()/250); circle(width/12,0,5+move); pop(); } } function drawCircle4(){ var move=20*sin(millis()/500); fill(237,175,45); for(var i=0;i<17;i++){ push(); theta = TWO_PI * i / 16; rotate(theta); rotate(millis()/295); circle(width/9,0,5+move); pop(); } } function drawCircle5(){ var move=20*sin(millis()/500); fill(212,82,50); for(var i=0;i<21;i++){ push(); theta = TWO_PI * i / 20; rotate(theta); rotate(millis()/400); circle(width/7.2,0,5+move); pop(); } } function drawCircle6(){ var move=20*sin(millis()/500); fill(200,35,82); for(var i=0;i<25;i++){ push(); theta = TWO_PI * i / 24; rotate(theta); rotate(millis()/450); circle(width/6,0,5+move); pop(); } } function drawCircle7(){ var move=20*sin(millis()/500); fill(194,34,134); for(var i=0;i<29;i++){ push(); theta = TWO_PI * i / 28; rotate(theta); rotate(millis()/600); circle(width/5.1,0,5+move); pop(); } } function drawCircle8(){ var move=20*sin(millis()/500); fill(97,46,141); for(var i=0;i<33;i++){ push(); theta = TWO_PI * i / 32; rotate(theta); rotate(millis()/800); circle(width/4.5,0,5+move); pop(); } }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 互动媒体技术——浅谈艺工融合+p5.js实现动态图形
- 互动媒体技术-用p5.js临摹动态图片
- 互动媒体技术——Processing模仿并拓展动态爱心图案
- 流动墨迹速度感知实验(互动媒体技术作业)
- 互动媒体技术(十二个一)
- 互动媒体技术-代码本色-第1章
- 互动媒体技术(十二个一)
- 互动媒体技术-代码本色-第0章
- SVG技术实现动态图形输出的嵌入式Web服务
- 媒体层图形技术之ImageIO 学习笔记
- 多视角交叉认知(互动媒体技术作业)
- 互动媒体技术——创意编程
- p5.js实现动态图形临摹
- 用SVG技术实现动态图形输出的嵌入式Web服务
- 互动媒体技术作业——processing码绘
- 十二个“一”,十二台手机(互动媒体技术作业)
- 互动媒体技术课程作业3 《代码本色》编程练习
- 互动媒体技术——processing旋转方块(不同角度的旋转)
- p5.js动态图形临摹以及拓展
- 互动媒体技术非自画像