您的位置:首页 > 其它

互动媒体技术动态图形临摹

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();
}
}
  • 点赞
  • 收藏
  • 分享
  • 文章举报
LukasRossander 发布了8 篇原创文章 · 获赞 0 · 访问量 170 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: