# 创意编程——自画像

9 篇文章 0 订阅

### 目录

**最终效果演示（已把自己脸马赛克）**

# 绘制

## 猫猫

void eyes(){
float r1 = dist(mouseX+(0),mouseY+(-0),width/2-(40),height/2+(-0));
float si1 = (mouseX-(width/2-(40)))/r1;
float co1 = (mouseY-height/2+(0))/r1;
float r2 = dist(mouseX+(-0),mouseY+(-0),width/2+(40),height/2+(-0));
float si2 = (mouseX-(width/2+(40)))/r2;
float co2 = (mouseY-height/2+(-0))/r2;
if(abs(r1)<20){
ox1 = mouseX;
oy1 = mouseY;
}else{
ox1 = width/2+37*si1-(-80);
oy1 = height/2+17*co1+(-320);
}
if(abs(r2)<20){
ox2 = mouseX;
oy2 = mouseY;
}else{
ox2 = width/2+37*si2+(265);
oy2 = height/2+17*co2+(-320);
}
fill(254,237,185);
ellipse(width/2-(-80),height/2+(-320),110,80);
ellipse(width/2+(265),height/2+(-320),110,80);

fill(248,251,212);
ellipse(width/2-(-80),height/2+(-320),67,76);
ellipse(width/2+(264),height/2+(-320),67,77);

fill(253,253,250);
ellipse(width/2-(-54),height/2+(-336),36,32);
ellipse(width/2+(242),height/2+(-336),36,32);

fill(27,25,25);
if(pressed){
ellipse(ox1,oy1,9,49);
ellipse(ox2,oy2,9,49);
}
else{
ellipse(ox1,oy1,22,49);
ellipse(ox2,oy2,22,49);
}
}

void whisker(){
fill(254,254,252);
ellipse(width/2-(-19),height/2+(-194),156,7);
fill(254,254,252);
ellipse(width/2-(-19),height/2+(-165),156,7);
fill(254,254,252);
ellipse(width/2-(-19),height/2+(-140),156,7);
fill(254,254,252);
ellipse(width/2-(-315),height/2+(-194),156,7);
fill(254,254,252);
ellipse(width/2-(-315),height/2+(-165),156,7);
fill(254,254,252);
ellipse(width/2-(-315),height/2+(-140),156,7);
}


## 粒子

（压缩成gif不知咋的鲜艳度降得这么猛）

Particle类：

class Particle {
PVector location;
PVector velocity;
PVector acceleration;

float lifespan;
Particle(PVector l) {
// The acceleration
acceleration = new PVector(0, 0.05);
// circel's x and y ==> range
velocity = new PVector(random(-1, 1), random(-2, 0));
// apawn's position
location = l.copy();
// the circle life time
lifespan = 255.0;
}
void run() {
update();
display();
}
void update() {
lifespan-=1.0;
}

if (lifespan <= 0) {
return true;
} else {
return false;
}
}
void display() {
// border
//stroke(0, lifespan);
// border's weight
//strokeWeight(1);
float r = random(0,255);
float g = random(0,255);
float b = random(0,255);
// random the circle's color
fill(r,g,b, lifespan);
// draw circle
ellipse(location.x, location.y, 8, 8);
}
}


ParticleSystem管理类：

// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles

class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;

ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
}

}

void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
particles.remove(i);
}
}
}
}


# 交互

## 鼠标（按键与滚轮）

### 绘制色块

PImage rawImg;
PImage colorImg;
PImage mixImg;

void setup(){
size(1000, 980);
pressed = false;
mouseSize = 50;

time =0;
auto = false;
change = false;
cat = false;

pressedX = pressedY = 0;
releasedX = rawImg.width;
releasedY = rawImg.height;

colorImg = createImage(rawImg.width, rawImg.height, RGB);

mixImg = createImage(rawImg.width, rawImg.height, RGB);

noStroke();
}


void update_mixImg(){
mixImg.set(0, 0, colorImg);
mixImg.set(mouseX-mouseSize/2,mouseY-mouseSize/2,rawImg.get(mouseX-mouseSize/2,mouseY-mouseSize/2,mouseSize,mouseSize));

}


color get_mean_image(int x,int y,int w,int h){
PImage meanImg;
meanImg = rawImg.get(x,y,w,h);
float meanR = 0.0f;
float meanG = 0.0f;
float meanB = 0.0f;

for(int i=x;i<=x+w;i++){
for(int j=y;j<=y+h;j++){
meanR += red(rawImg.get(i,j));
meanG += green(rawImg.get(i,j));
meanB += blue(rawImg.get(i,j));
}
}

meanR /= w*h;
meanG /= w*h;
meanB /= w*h;

return color(meanR,meanG,meanB);
}


void update_colorImg(int x,int y,int w,int h){
PImage meanImg;
meanImg = createImage(w, h, RGB);
color mean = get_mean_image(x,y,w,h);
for (int i = 0; i < meanImg.pixels.length; i++) {
meanImg.pixels[i] = mean;
}
colorImg.set(x,y,meanImg);
}


### 猫眼样式改变

boolean pressed;

void mousePressed(){
pressed = true;
}

void mouseReleased(){
pressed = false;
}

void eyes(){
……
fill(27,25,25);
if(pressed){
ellipse(ox1,oy1,9,49);
ellipse(ox2,oy2,9,49);
}
else{
ellipse(ox1,oy1,22,49);
ellipse(ox2,oy2,22,49);
}
}


## 下方按钮

import controlP5.*;
ControlP5 cp5;
Slider2D s;

boolean auto,change,cat,particle,pressed;

void setup(){
size(1000, 980);
cp5 = new ControlP5(this);
……
auto = false;
change = false;
cat = false;

……

.setPosition(40,700)
.setRange(0,255)
.setSize(200,20)
;

.setPosition(320,700)
.setSize(50,20)
.setMode(ControlP5.SWITCH)
;

.setPosition(400,700)
.setSize(50,20)
.setMode(ControlP5.SWITCH)
;
.setPosition(480,700)
.setSize(50,20)
.setMode(ControlP5.SWITCH)
;
.setPosition(560,700)
.setSize(50,20)
.setMode(ControlP5.SWITCH)
;

noStroke();
}


# 功能

## 自动填充

void draw(){
……
if(auto){
update_colorImg(random_width()-mouseSize/2,random_height()-mouseSize/2,mouseSize,mouseSize);
}
……
}


## 更改随即填充范围

void mousePressed(){
pressed = true;
if(change){
pressedX = mouseX;
pressedY = mouseY;
}
}

void mouseReleased(){
pressed = false;
if(change){
releasedX = mouseX;
releasedY = mouseY;
}
}

• 4
点赞
• 3
评论
• 6
收藏
• 一键三连
• 扫一扫，分享海报

11-04

11-03 379
11-04 1933
10-31 321
10-20 2857
11-03 747
11-04 2704
02-14 7395
11-03 364
11-04 1957
11-03 436
11-03 603
11-05 462
01-08
07-26 854
10-30 554
11-04 264