A1实验技术报告

function文件
- 1. function ellipse_drawStdFace_0128(x, y, rate)
- 2. function line_ao_0128(x0, y0, xstep, ystep, num)
- 3. function line_flower_0128(x, y, angle, radius1, radius2, velocity)
- 4. function line_noise_0128(x, y, lineArray, lineNum, controlPointNum)
- 5. function line_apple_0128(r, n, x, y)
- 6. function line_BW_0128(y, XN, YN, XL, YL)
- 7. function line_heart_0128()
- 8. function frameRate_line_0128()
- 9 class Pendulun
rainbow文件
- 1. rainbow_line_0128_1(x, y)
- 2. function rainbow_ellipse_0128(x, y)
Processing
- 海绵宝宝
粒子效果分享

function文件

1. function ellipse_drawStdFace_0128(x, y, rate)

效果：笑脸，并根据鼠标位置放大缩小。
扩展：对ellipse进行了扩展，画出来了笑脸

function ellipse_drawStdFace_0128(x, y, rate)
{let StdSize = 1.5*rate;print("face");// face//ellipse(0, 0, StdSize, StdSize);ellipse(0+x, 0+y, StdSize, StdSize);var ESize = -0.2*StdSize;// LEyefill(255);//ellipse(-0.2*StdSize,-0.1*StdSize,ESize,ESize);ellipse(x-0.2*StdSize, y-0.1*StdSize, ESize, ESize);fill(0);//ellipse(-0.2*StdSize,-0.1*StdSize,0.4*ESize,0.4*ESize);ellipse(x-0.2*StdSize, y-0.1*StdSize, 0.4*ESize, 0.4*ESize);// REyefill(255);//ellipse(0.2*StdSize,-0.1*StdSize,ESize,ESize);ellipse(x+0.2*StdSize, y-0.1*StdSize, ESize, ESize);fill(0);//ellipse(0.2*StdSize, -0.1*StdSize, 0.4*ESize, 0.4*ESize);ellipse(x+0.2*StdSize, y-0.1*StdSize, 0.4*ESize, 0.4*ESize);// Mouthvar MWd = 0.3*StdSize;var MHt = 0.2*StdSize;push();fill(255, 0, 0);//ellipse(0, MHt, MWd, MHt);ellipse(x, y+ MHt, MWd, MHt);pop();
}

2. function line_ao_0128(x0, y0, xstep, ystep, num)

效果：笑脸和凹凸线，并根据鼠标位置拉伸（放大）收缩（缩小）
扩展：对ellipse，line进行了扩展，画出来了笑脸，并放在凹凸线上。

function line_ao_0128(x0, y0, xstep, ystep, num)
{for (i=0; i<num; i++){ line(x0+2*xstep*i, y0, x0+xstep+2*xstep*i, y0);line(x0+xstep+2*xstep*i, y0, x0+xstep+2*xstep*i, y0+ystep);line(x0+xstep+2*xstep*i, y0+ystep, x0+2*xstep+2*xstep*i, y0+ystep);ellipse_drawStdFace_0128(float(x0+3.5*xstep*i), y0+ystep+10, xstep);//画笑脸line(x0+2*xstep+2*xstep*i, y0+ystep, x0+2*xstep+2*xstep*i, y0);}
}

3. function line_flower_0128(x, y, angle, radius1, radius2, velocity)

效果：一个可以根据鼠标位置调节变化快慢的花团形状。
扩展：贝塞尔曲线和ellipse的应用

function line_flower_0128(x, y, angle, radius1, radius2, velocity)
{/*let num; //let angle; //petal anglelet radius1;  //petal sizelet radius2;  //petal sizelet velocity //petal speed*/stroke(255, 255, 255); //设置线条颜色为紫色let num=int(360/angle); //num must be int//fill(0, 0, 0, 50);//rect(0, 0, width, height);translate(x, y);for (i=0; i<num; i++){let x1 = sin(radians(i * angle + velocity)) * radius1; let y1 = cos(radians(i * angle + velocity)) * radius1;let x2 = sin(radians(i * angle - velocity)) * radius2;   let y2 = cos(radians(i * angle - velocity)) * radius2;noFill();  bezier(x1, y1, x1+x2, y1+y2, x2+x1, y2+y1, x2, y2);  bezier(x1, y1, x1-x2, y1-y2, x2-x1, y2-y1, x2, y2); fill(51, 51, 51); ellipse(x1+x2, y1+y2, 6, 6);}velocity += 1*0.005*mouseX; return velocity;
}

4. function line_noise_0128(x, y, lineArray, lineNum, controlPointNum)

效果：一个根据噪声形成的不断变化的曲线。可以调节曲线数量，密度，抖动情况。
扩展：对绘制多边形流程进行了扩展，用了random函数。

function line_noise_0128(x, y, lineArray, lineNum, controlPointNum)
{//lineNum            //线的总数//controlPointNum    //每条线控制点总数translate(x, y);noFill();stroke(255);strokeWeight(2);//strokeWeight(0.7);for ( i=0; i<lineNum+1; i++) {beginShape();curveVertex(line[i][0].x, line[i][0].y);for ( j=0; j<controlPointNum+1; j++) {curveVertex(line[i][j].x, line[i][j].y);}curveVertex(line[i][controlPointNum].x, line[i][controlPointNum].y);endShape();}let off =float( random(50));for ( i=0; i<lineNum+1; i++) {for ( j=0; j< controlPointNum+1; j++) {//line[i][j].y = height/lineNum*i + random(-20, 20); //随机偏移line[i][j].y = height/6/lineNum*i + map(noise(0.1*i, 0.1*j+off), 0, 1, -60, 60);//通过判断点的上下,判断线条是否会交叉,如果交叉就把点降到上一条的下面if (i>0) {if (line[i][j].y <= line[i-1][j].y) {line[i][j].y = line[i-1][j].y + random(5);}}}}
}

5. function line_apple_0128(r, n, x, y)

效果：一个用线组成的花环形状。
扩展：对line，正余弦函数进行了扩展

function line_apple_0128(r, n, x, y) {//background(255);  //画布颜色translate(x, y); //移动坐标原点到中心//let r = 300;    //设置图形半径//let n = 200;  //设置等分点的数目//通过循环，为每一个点找到对应的点进行连线for ( i=0; i<n; i++) {let a = i * 2 * PI/n;  //相应的角度取值0-2PIlet b = frameCount * 0.005 * a;  //规则对应的点的角度let x1 = r * cos(a);let y1 = r * sin(a);let x2 = r * cos(b);let y2 = r * sin(b);line(x1, y1, x2, y2);  //进行连线}
}

6. function line_BW_0128(y, XN, YN, XL, YL)

效果：多条类似斑马线的线条形状，可以调节线条数量，并根据鼠标位置改变变化的快慢。
扩展：对rect函数的扩展

7. function line_heart_0128()

效果：一个可以根据鼠标移动的心得形状。
扩展:对bezierVertex的扩展。

8. function frameRate_line_0128()

效果：一条根据帧数变化而形成的心率线。
扩展：对line的扩展。

9 class Pendulun

效果：模拟重力，摩擦力，加速度，角速度做出的摆锤效果。并根据彩虹色渐变。
扩展：对ellipse ，line ，rect的扩展

rainbow文件

1. rainbow_line_0128_1(x, y)

效果：按下鼠标中键，会有多条根据柏林噪音形成的不断变化的线。
根据彩虹色进行渐变。
扩展：noise，line函数的扩展。

2. function rainbow_ellipse_0128(x, y)

效果：一个根据柏林噪声不断抖动的渐变色球。根据彩虹色变化。
扩展：对noise，ellipse函数的扩展

Processing

海绵宝宝

用代码画的海绵宝宝。

粒子效果分享

int num = 1000;//the number of point(s).
float mts = PI/24;//max theta speed.
int r = 100;//radius of the circle
int rdtr = 5;//range of the rdt
int rdu = 1;//radius of circle
//**********
PVector v[]=new PVector[num];
boolean mv = true;
boolean mo = true;
color c[] = new color[num];//color of each point.
float theta[] = new float[num];//original angle of each point.
float mtheta[] = new float[num];//translate angle to math value.
float dtheta[] = new float[num];//speed of theta.
float easing[] = new float[num];
int rdt[] = new int[num];//make a shuffle of radius.
void setup() {colorMode(RGB,255,255,255);size(650,650);for(int i =0;i<num-1;i++){c[i] = color(random(100,200),random(100,200),random(100,200));v[i] = new PVector(random(width),random(height));theta[i] = round(random(360));dtheta[i] = random(mts);mtheta[i] = theta[i]/180*PI;rdt[i] = round(random(-rdtr,rdtr));easing[i] = random(0.02,0.3);}frameRate(60);
}
void draw() {fill(25,25,25,25);rect(0,0,width,height);pushMatrix();noStroke();if(mv){if(mo){for(int i = 0;i<num-1;i++){mtheta[i] += dtheta[i];v[i].lerp(mouseX+cos(mtheta[i])*(rdt[i]+r), mouseY+sin(mtheta[i])*(rdt[i]+r),0,easing[i]);fill(c[i]);ellipse(v[i].x, v[i].y, rdu,rdu);}}if(!mo){for(int i = 0;i<num-1;i++){v[i].lerp(mouseX+cos(mtheta[i])*(rdt[i]+r), mouseY+sin(mtheta[i])*(rdt[i]+r),0,easing[i]);fill(c[i]);ellipse(v[i].x, v[i].y, rdu,rdu);}}}if(!mv){if(mo){for(int i = 0;i<num-1;i++){mtheta[i] += dtheta[i];v[i].lerp(mouseX+cos(mtheta[i])*rdt[i], mouseY+sin(mtheta[i])*rdt[i],0,easing[i]);fill(c[i]);ellipse(v[i].x, v[i].y, rdu,rdu);}}if(!mo){for(int i = 0;i<num-1;i++){v[i].lerp(mouseX+cos(mtheta[i])*rdt[i], mouseY+sin(mtheta[i])*rdt[i],0,easing[i]);fill(c[i]);ellipse(v[i].x, v[i].y, rdu,rdu);}}}popMatrix();fill(0);rect(0,0,width,15);fill(255);textAlign(LEFT,TOP);text("r = "+r,0,0);text("fps = "+round(frameRate),40,0);if(mv){fill(255,0,0);text("Running",100,0);}if(!mv){text("Static",100,0);}if(mo) {fill(255,0,0);text("motion",150,0);}if(!mo){fill(255);text("stop",150,0);}
}
void mousePressed(){/*for(int i = 0;i<num-1;i++){v[i] = new PVector(random(width),random(height));theta[i] = round(random(360));mtheta[i] = theta[i]/180*PI;dtheta[i] = random(mts);rdt[i] = round(random(-rdtr,rdtr)+r);}*/mv = !mv;
}
void keyPressed(){if(key == 's'||key == 'S'){mo =!mo;}
}
void mouseWheel(MouseEvent event){float e = event.getCount();if(e == -1) r+=10;if(e == 1) r-=10;
}

互动媒体技术A1作业报告相关推荐

互动媒体技术课程作业十二个“一”的人格感受
互动媒体技术课程作业十二个"一"的人格感受 (本文与编程无关) 十二个"一"的人格评价--想象为十二个异性追求者结合以下五个方面评价开放性(opennes ...
互动媒体技术期末作业——简易绘画系统
主题编写一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个绘画系统是对"绘画"的概念的扩展,但仍然体现 ...
【互动媒体技术赏析作业】
我最喜欢的作品:数艺18级59号. 第一印象是很有活力的小仙女. 构成人物形象的几何图形十分简练,落柿色的红晕,艳红的嘴唇,白皙的皮肤,薄花蓝的连衣裙,几个简单的几何图形就将人物的美丽与可爱表现出来. ...
互动媒体技术作业——processing码绘
互动媒体技术作业--processing码绘一.作品临摹二.码绘拓展三.心得体会一.作品临摹 1.要求: 从参考资料中的"动态图形艺术"中选取不少于1幅作品,用编程方式临摹 ...
p5.js 编程临摹动态图形（互动媒体技术作业）
p5.js 编程临摹动态图形(互动媒体技术作业) 动态图形的规律分析 p5.js 代码历程走过的弯路拓展总结动态图形的规律分析从老师的动态图形参考资料中,我选择了以下图形进行临摹: 初次见面 ...
十二个“一”与耍猴（互动媒体技术作业）
十二个"一"与耍猴(互动媒体技术作业) 角色简介第一章耍猴之兴第二章耍猴之变第三章第四章 -- 总结角色简介本文故事时间为古代某时期,文中时间点与现实无关,故事背景 ...
十二个“一”，十二台手机（互动媒体技术作业）
十二个"一",十二台手机(互动媒体技术作业) 选题: A:VIVO NEX3 B:OPPO Reno系列 C:iPhone 11系列 D:三星 Note10 系列 E:8848钛金 ...
p5.js 绘制创意自画像（互动媒体技术作业）
p5.js 绘制创意自画像Little Prince(互动媒体技术作业) 作品展示代码&创意点分析 1.设置工具类以获取坐标点:本次实验最有用的东西就是这个了 2.眼睛跟随鼠标运动: 3.披 ...
流动墨迹速度感知实验（互动媒体技术作业）
流动墨迹速度感知实验(互动媒体技术作业) 文献综述数据分析研究问题实验方法评价标准测量结果结果分析文献综述阅读律大大关于"测量书法的可回溯感"的论文可知,汉字书法艺 ...

互动媒体技术A1作业报告