size(200,200);
background(255);
stroke(0);
fill(150);
rect(50,50,75,100);
长方形代码
size(200,200);
smooth();
background(255);
noFill();
stroke(0);
ellipse(60,60,100,100);
圆形代码
smooth();
background(255);
noStroke();
fill(255,0,0);
ellipse(20,20,16,16);
fill(127,0,0);
ellipse(40,20,16,16);
fill(255,200,200);
ellipse(60,20,16,16);
三个不同颜色的圆圈代码
size(200,200);
background(0);
noStroke();
fill(0,0,255);
rect(0,0,100,200);
fill(255,0,0,255);
rect(0,0,200,40);
fill(255,0,0,191);
rect(0,50,200,40);
fill(255,0,0,127);
rect(0,100,200,40);
fill(255,0,0,63);
rect(0,150,200,40);
这个是长方形透明度代码
size(200,200);
background(255);
smooth();
ellipseMode(CENTER);
rectMode(CENTER);
stroke(0);
fill(150);
rect(100,100,20,100);
fill(255);
ellipse(100,70,60,60);
fill(0);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
stroke(0);
line(90,150,80,160);
line(110,150,120,160);
这个是机器人形象代码
void setup() {
size(200,200);
}
void draw() {
background(255);
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
这个是四方块跟踪鼠标的代码
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
ellipseMode(CENTER);
rectMode(CENTER);
stroke(0);
fill(175);
rect(mouseX,mouseY,20,100);
stroke(0);
fill(255);
ellipse(mouseX,mouseY-30,60,60);
fill(0);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
stroke(0);
line(90,150,80,160);
line(110,150,120,160);
}
这个是结合了静止状态的机器人和机器人外表跟踪鼠标的结合代码
void setup() {
size(200, 200);
background(255);
smooth();
}
void draw() {
stroke(0);
line(pmouseX, pmouseY, mouseX, mouseY);
}
这个是连笔画的代码
void setup() {
size(200,200);
background(255);
}
void draw() {
}
void mousePressed() {
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,16,16);
}
void keyPressed() {
background(255);
}
这个是当鼠标在任意地方按左键时出现四方块代码
void setup() {
size(200,200);
smooth();
frameRate(30);
}
void draw() {
background(255);
ellipseMode(CENTER);
rectMode(CENTER);
stroke(0);
fill(175);
rect(mouseX,mouseY,20,100);
stroke(0);
fill(255);
ellipse(mouseX,mouseY-30,60,60);
fill(mouseX,0,mouseY);
ellipse(mouseX-19,mouseY-30,16,32);
ellipse(mouseX+19,mouseY-30,16,32);
stroke(0);
line(mouseX-10,mouseY+50,pmouseX-10,pmouseY+60);
line(mouseX+10,mouseY+50,pmouseX+10,pmouseY+60);
}
void mousePressed() {
println("Take me to your leader!");
}
这个是机器人跟踪鼠标的基础上2脚会根据惯性晃荡的代码
int circleX = 100;
int circleY = 100;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
stroke(0);
fill(175);
ellipse(circleX,circleY,50,50);
}
窗口中间画了圆形代码,
int circleX = 0;
int circleY = 100;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
stroke(0);
fill(175);
ellipse(circleX,circleY,50,50);
circleX = circleX + 1;
}
这是圆形沿着中线从左向右走一遍的代码
float circleX = 0;
float circleY = 0;
float circleW = 50;
float circleH = 100;
float circleStroke = 255;
float circleFill = 0;
float backgroundColor = 255;
float change = 0.5;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(backgroundColor);
stroke(circleStroke);
fill(circleFill);
ellipse(circleX,circleY,circleW,circleH);
circleX = circleX + change;
circleY = circleY + change;
circleW = circleW + change;
circleH = circleH - change;
circleStroke = circleStroke - change;
circleFill = circleFill + change;
}
这个是一个圆形从左上角到右下角移动一遍的过程中由圆形变成椭圆然后翻转到圆形
期间还有由黑色渐变成灰色的代码
void setup() {
size(200,200);
smooth();
}
void draw() {
background(100);
stroke(255);
fill(frameCount / 2);
rectMode(CENTER);
rect(width/2,height/2,mouseX+10,mouseY+10);
}
void keyPressed() {
println(key);
}
这个是方块随着鼠标移动便形状,期间黑色变成灰色然后变成白色又变回灰色的代码
float r = 100;
float g = 150;
float b = 200;
float a = 200;
float diam = 20;
float x = 100;
float y = 100;
void setup() {
size(200,200);
background(255);
smooth();
}
void draw() {
stroke(0);
fill(r,g,b,a);
ellipse(x,y,diam,diam);
}
中间一个蓝色黑边的小圆圈代码
float r;
float g;
float b;
float a;
float diam;
float x;
float y;
void setup() {
size(200,200);
background(255);
smooth();
}
void draw() {
r = random(255);
g = random(255);
b = random(255);
a = random(255);
diam = random(20);
x = random(width);
y = random(height);
noStroke();
fill(r,g,b,a);
ellipse(x,y,diam,diam);
}
各种各样颜色的小圆圈出现然后一点一点的填满整个屏幕的代码
float zoogX;
float zoogY;
float eyeR;
float eyeG;
float eyeB;
void setup() {
size(200,200);
zoogX = width/2;
zoogY = height + 100;
smooth();
}
void draw() {
background(255);
ellipseMode(CENTER);
rectMode(CENTER);
stroke(0);
fill(150);
rect(zoogX,zoogY,20,100);
stroke(0);
fill(255);
ellipse(zoogX,zoogY-30,60,60);
function.
eyeR = random(255);
eyeG = random(255);
eyeB = random(255);
fill(eyeR,eyeG,eyeB);
ellipse(zoogX-19,zoogY-30,16,32);
ellipse(zoogX+19,zoogY-30,16,32);
stroke(150);
line(zoogX-10,zoogY+50,zoogX-10,height);
line(zoogX+10,zoogY+50,zoogX+10,height);
zoogY = zoogY - 1;
}
机器人由下而上出现,眼睛各种颜色闪,脚还特长,估计看不到底了
float r = 150;
float g = 0;
float b = 0;
void setup() {
size(200,200);
}
void draw() {
background(r,g,b);
stroke(255);
line(width/2,0,width/2,height);
if(mouseX > width/2) {
r = r + 1;
} else {
r = r - 1;
}
if (r > 255) {
r = 255;
} else if (r < 0) {
r = 0;
}
}
屏幕被白线一分为二,鼠标移到左半部分北京变黑,到右半部分背景渐渐变红
float r = 0;
float b = 0;
float g = 0;
void setup() {
size(200,200);
}
void draw() {
background(r,g,b);
stroke(0);
line(width/2,0,width/2,height);
line(0,height/2,width,height/2);
if (mouseX > width/2) {
r = r + 1;
} else {
r = r - 1;
}
if (mouseY > height/2) {
b = b + 1;
} else {
b = b - 1;
}
if (mousePressed) {
g = g + 1;
} else {
g = g - 1;
}
r = constrain(r,0,255);
g = constrain(g,0,255);
b = constrain(b,0,255);
}
这个屏幕一分为四,不同区域背景颜色变成不同颜色,跟上面类似,不过鼠标移除屏幕是背景颜色变黑
void setup() {
size(200,200);
}
void draw() {
background(255);
stroke(0);
line(100,0,100,200);
line(0,100,200,100);
noStroke();
fill(0);
if (mouseX < 100 && mouseY < 100) {
rect(0,0,100,100);
} else if (mouseX > 100 && mouseY < 100) {
rect(100,0,100,100);
} else if (mouseX < 100 && mouseY > 100) {
rect(0,100,100,100);
} else if (mouseX > 100 && mouseY > 100) {
rect(100,100,100,100);
}
}
屏幕四分,鼠标移动到任意一个区域,区域部分变黑,跟上面不同
boolean button = false;
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
size(200,200);
}
void draw() {
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h && mousePressed) {
button = true;
} else {
button = false;
}
if (button) {
background(255);
stroke(0);
} else {
background(0);
stroke(255);
}
fill(175);
rect(x,y,w,h);
}
屏幕中间有灰色方块,左键点击北京由黑变白
boolean button = false;
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
size(200,200);
}
void draw() {
if (button) {
background(255);
stroke(0);
} else {
background(0);
stroke(255);
}
fill(175);
rect(x,y,w,h);
}
void mousePressed() {
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
button = !button;
}
}
在上面代码基础上,这次是点击一次变颜色,上面代码是点完了恢复原来颜色
看得出作者是循循渐进的形式写代码。让我们学习
int x = 0;
int speed = 1;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
x = x + speed;
if ((x > width) || (x < 0)) {
speed = speed * -1;
}
stroke(0);
fill(175);
ellipse(x,100,32,32);
}
在上面看到过一个圆圈沿着中线移动一遍的代码吧?这次是基础上让圆圈碰到屏幕边缘后来回的移动
float c1 = 0;
float c2 = 255;
float c1dir = 0.1;
float c2dir = -0.1;
void setup() {
size(200,200);
}
void draw() {
noStroke();
fill(c1,0,c2);
rect(0,0,100,200);
fill(c2,0,c1);
rect(100,0,100,200);
c1 = c1 + c1dir;
c2 = c2 + c2dir;
if (c1 < 0 || c1 > 255) {
c1dir *= -1;
}
if (c2 < 0 || c2 > 255) {
c2dir *= -1;
}
}
屏幕一分为二,左边蓝色右边红色,按正常来说画上2个方块填充颜色就完了
为什么这个代码这么复杂?搞不懂高手的用意
int x = 0;
int y = 0;
int speed = 5;
int state = 0;
void setup() {
size(200,200);
}
void draw() {
background(255);
stroke(0);
fill(175);
rect(x,y,9,9);
if (state == 0) {
x = x + speed;
if (x > width-10) {
x = width-10;
state = 1;
}
} else if (state == 1) {
y = y + speed;
if (y > height-10) {
y = height-10;
state = 2;
}
} else if (state == 2) {
x = x - speed;
if (x < 0) {
x = 0;
state = 3;
}
} else if (state == 3) {
y = y - speed;
if (y < 0) {
y = 0;
state=0;
}
}
}
一个小方块沿着屏幕四周移动
float x = 100;
float y = 0;
float speed = 0;
float gravity = 0.1;
void setup() {
size(200,200);
}
void draw() {
background(255);
fill(175);
stroke(0);
rectMode(CENTER);
rect(x,y,10,10);
y = y + speed;
speed = speed + gravity;
if (y > height) {
speed = speed * -0.95;
}
}
在高处的小方块由于重力落到地面弹起,逐渐减少反弹高度,最终落到地面
float x = 100;
float y = 100;
float w = 60;
float h = 60;
float eyeSize = 16;
float xspeed = 3;
float yspeed = 1;
void setup() {
size(200,200);
smooth();
}
void draw() {
x = x + xspeed;
y = y + yspeed;
if ((x > width) || (x < 0)) {
xspeed = xspeed * -1;
}
if ((y > height) || (y < 0)) {
yspeed = yspeed * -1;
}
background(255);
ellipseMode(CENTER);
rectMode(CENTER);
fill(150);
rect(x,y,w/6,h*2);
fill(255);
ellipse(x,y-h/2,w,h);
fill(0);
ellipse(x-w/3+1,y-h/2,eyeSize,eyeSize*2);
ellipse(x+w/3-1,y-h/2,eyeSize,eyeSize*2);
stroke(0);
line(x-w/12,y+h,x-w/4,y+h+10);
line(x+w/12,y+h,x+w/4,y+h+10);
}
机器人移动速度不变,碰到四面屏幕边缘后反弹来回撞
ize(200,200);
background(255);
stroke(0);
line(50,60,50,80);
line(60,60,60,80);
line(70,60,70,80);
line(80,60,80,80);
line(90,60,90,80);
line(100,60,100,80);
line(110,60,110,80);
line(120,60,120,80);
line(130,60,130,80);
line(140,60,140,80);
line(150,60,150,80);
很多线
int y = 80;
int x = 0;
int spacing = 10;
int len = 20;
int endLegs = 150;
void setup() {
size(200,200);
}
void draw() {
background(0);
stroke(255);
.
while (x <= endLegs) {
line(x,y,x,y + len);
x = x + spacing;
}
}
很多线,不用写出每一条线的坐标
size(200,200);
background(255);
int y = 80;
int spacing = 10;
int len = 20;
for (int x = 50; x <= 150; x += spacing) {
line(x,y,x,y + len);
}
很多线,精简代码
size(200,200);
background(255);
stroke(0);
int y = 80;
int x = 50;
int spacing = 10;
int len = 20;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
x = x + spacing;
line(x,y,x,y + len);
很多线,表达式不同
size(200,200);
background(255);
int y = 80;
int x = 50;
int spacing = 10;
int len = 20;
int endLegs = 150;
stroke(0);
while (x <= endLegs) {
line (x,y,x,y + len);
x = x + spacing;
}
很多线,不同的代码方式
void setup() {
size(200,200);
}
void draw() {
background(0);
int x = 0;
while (x < width) {
stroke(255);
line(x,0,x,height);
x += 5;
}
}
void mousePressed() {
println( " The mouse was pressed! " );
}
全屏隔间很多白线,
int y = 0;
void setup() {
size(200,200);
background(255);
frameRate(5);
}
void draw() {
stroke(0);
line(0,y,width,y);
y += 10;
if (y > height) {
y = 0;
}
}
在上面代码的基础上,让线一条一条的出现
void setup() {
size(255,255);
}
void draw() {
background(0);
int i = 0;
while (i < width) {
noStroke();
float distance = abs(mouseX - i);
fill(distance);
rect(i,0,10,height);
i += 10;
}
}
跟着鼠标移动的颜色区间
int x = 100;
int y = 100;
int w = 60;
int h = 60;
int eyeSize = 16;
int speed = 1;
void setup() {
size(200,200);
smooth();
}
void draw() {
x = x + speed;
if ((x > width) || (x < 0)) {
speed = speed * -1;
}
background(255);
ellipseMode(CENTER);
rectMode(CENTER);
for (int i = y + 5; i < y + h; i += 10) {
stroke(0);
line(x-w/3,i,x + w/3,i);
}
stroke(0);
fill(175);
rect(x,y,w/6,h*2);
fill(255);
ellipse(x,y-h/2,w,h);
fill(0);
ellipse(x-w/3+1,y-h/2,eyeSize,eyeSize*2);
ellipse(x+w/3-1,y-h/2,eyeSize,eyeSize*2);
stroke(0);
line(x-w/12,y + h,x-w/4,y + h + 10);
line(x+w/12,y + h,x + w/4,y + h + 10);
}
机器人变成多足蜈蚣,左右来回的运动
int w = 60;
int h = 60;
int eyeSize = 16;
void setup() {
size(400,200);
smooth();
}
void draw() {
background(255);
ellipseMode(CENTER);
rectMode(CENTER);
int y = height/2;
for (int x = 80; x < width; x += 80) {
stroke(0);
fill(175);
rect(x,y,w/6,h*2);
fill(255);
ellipse(x,y-h/2,w,h);
fill(0);
ellipse(x-w/3,y-h/2,eyeSize,eyeSize*2);
ellipse(x+w/3,y-h/2,eyeSize,eyeSize*2);
stroke(0);
line(x-w/12,y+h,x-w/4,y+h+10);
line(x+w/12,y+h,x+w/4,y+h+10);
}
}
四个相同的机器人
void setup() {
size(100,100);
smooth();
}
void draw() {
background(255);
drawBlackCircle();
}
void drawBlackCircle() {
fill(0);
ellipse(50,50,20,20);
}
黑色圆
int x = 0;
int speed = 1;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
move();
bounce();
display();
}
void move() {
x = x + speed;
}
void bounce() {
if ((x > width) || (x < 0)) {
speed = speed * - 1;
}
}
void display() {
stroke(0);
fill(175);
ellipse(x,100,32,32);
}
圆圈来回横移,记得前面有一个案例
void setup() {
size(200,200);
}
void draw() {
background(0);
stroke(0);
fill(distance(0,0,mouseX,mouseY));
rect(0,0,width/2 - 1,height/2 - 1);
fill(distance(width,0,mouseX,mouseY));
rect(width/2,0,width/2 - 1,height/2 - 1);
fill(distance(0,height,mouseX,mouseY));
rect(0,height/2,width/2 - 1,height/2 - 1);
fill(distance(width,height,mouseX,mouseY));
rect(width/2,height/2,width/2 - 1,height/2 - 1);
}
float distance(float x1, float y1, float x2, float y2) {
float dx = x1 - x2;
float dy = y1 - y2;
float d = sqrt(dx*dx + dy*dy);
return d;
}
四个区域,鼠标到一个区域,四个区域颜色同时变,之前是变一个
float x = 100;
float y = 100;
float w = 60;
float h = 60;
float eyeSize = 16;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
float factor = constrain(mouseX/10,0,5);
jiggleZoog(factor);
float d = dist(x,y,mouseX,mouseY);
color c = color(d);
drawZoog(c);
}
void jiggleZoog(float speed) {
x = x + random( - 1,1)*speed;
y = y + random( - 1,1)*speed;
x = constrain(x,0,width);
y = constrain(y,0,height);
}
void drawZoog(color eyeColor) {
ellipseMode(CENTER);
rectMode(CENTER);
for (float i = y - h/3; i < y + h/2; i += 10) {
stroke(0);
line(x - w/4,i,x + w/4,i);
}
stroke(0);
fill(175);
rect(x,y,w/6,h);
stroke(0);
fill(255);
ellipse(x,y - h,w,h);
fill(eyeColor);
ellipse(x - w/3,y - h,eyeSize,eyeSize*2);
ellipse(x + w/3,y - h,eyeSize,eyeSize*2);
stroke(0);
line(x - w/12,y + h/2,x - w/4,y + h/2 + 10);
line(x + w/12,y + h/2,x + w/4,y + h/2 + 10);
}
多足机器人随机移动,同时震动
Car myCar;
void setup() {
size(200,200);
myCar = new Car();
}
void draw() {
background(255);
myCar.move();
myCar.display();
}
class Car {
color c;
float xpos;
float ypos;
float xspeed;
Car() {
c = color(175);
xpos = width/2;
ypos = height/2;
xspeed = 1;
}
void display() { .
rectMode(CENTER);
stroke(0);
fill(c);
rect(xpos,ypos,20,10);
}
void move() {
xpos = xpos + xspeed;
if (xpos > width) {
xpos = 0;
}
}
}
无限小方块从左到右一个一个横移
Car myCar1;
Car myCar2;
void setup() {
size(200,200);
myCar1 = new Car(color(255,0,0),0,100,2);
myCar2 = new Car(color(0,0,255),0,10,1);
}
void draw() {
background(255);
myCar1.move();
myCar1.display();
myCar2.move();
myCar2.display();
}
class Car {
color c;
float xpos;
float ypos;
float xspeed;
Car(color tempC, float tempXpos, float tempYpos, float tempXspeed) {
c = tempC;
xpos = tempXpos;
ypos = tempYpos;
xspeed = tempXspeed;
}
void display() {
stroke(0);
fill(c);
rectMode(CENTER);
rect(xpos,ypos,20,10);
}
void move() {
xpos = xpos + xspeed;
if (xpos > width) {
xpos = 0;
}
}
}
在上面代码的情况下,现在2个小方块在移动,速度不一样
Catcher catcher;
void setup() {
size(400,400);
catcher = new Catcher(32);
smooth();
}
void draw() {
background(255);
catcher.setLocation(mouseX,mouseY);
catcher.display();
}
圆圈跟随鼠标
Ball ball1;
Ball ball2;
void setup() {
size(400,400);
smooth();
ball1 = new Ball(64);
ball2 = new Ball(32);
}
void draw() {
background(255);
ball1.move();
ball2.move();
ball1.display();
ball2.display();
}
2个圆圈随机运动,重叠是有透明
Ball ball1;
Ball ball2;
void setup() {
size(400,400);
smooth();
ball1 = new Ball(64);
ball2 = new Ball(32);
}
void draw() {
background(255);
ball1.move();
ball2.move();
if (ball1.intersect(ball2)) {
ball1.highlight();
ball2.highlight();
}
ball1.display();
ball2.display();
}
2个球,随机不同移动速度运动
int savedTime;
int totalTime = 5000;
void setup() {
size(200,200);
background(0);
savedTime = millis();
}
void draw() {
int passedTime = millis() - savedTime;
if (passedTime > totalTime) {
println( " 5 seconds have passed! " );
background(random(255));
savedTime = millis();
}
}
背景颜色每5秒换一个颜色
Timer timer;
void setup() {
size(200,200);
background(0);
timer = new Timer(5000);
timer.start();
}
void draw() {
if (timer.isFinished()) {
background(random(255));
timer.start();
}
}
每5秒背景换一个颜色,跟上面代码不同
float x,y;
void setup() {
size(400,400);
background(0);
x = width/2;
y = 0;
smooth();
}
void draw() {
background(255);
fill(50,100,150);
noStroke();
ellipse(x,y,16,16);
y++ ;
}
小球匀速向下移动
Drop[] drops = new Drop[1000];
int totalDrops = 0;
void setup() {
size(400,400);
smooth();
background(0);
}
void draw() {
background(255);
drops[totalDrops] = new Drop();
totalDrops++ ;
if (totalDrops >= drops.length) {
totalDrops = 0;
}
for (int i = 0; i < totalDrops; i++ ) {
drops[i].move();
drops[i].display();
}
}
在上面基础上,做了很多雨滴以不同速度下落
background(255);
smooth();
for (int i = 2; i < 8; i++ ) {
noStroke();
fill(0);
ellipse(width/2,height/2 + i*4,i*2,i*2);
}
雨滴形状
Catcher catcher;
Timer timer;
Drop[] drops;
int totalDrops = 0;
void setup() {
size(400,400);
smooth();
catcher = new Catcher(32);
drops = new Drop[1000];
timer = new Timer(2000);
timer.start();
}
void draw() {
background(255);
catcher.setLocation(mouseX,mouseY);
catcher.display();
if (timer.isFinished()) {
println( " 2 seconds have passed! " );
timer.start();
}
drops[totalDrops] = new Drop();
totalDrops ++ ;
if (totalDrops >= drops.length) {
totalDrops = 0;
}
for (int i = 0; i < totalDrops; i ++ ) {
drops[i].move();
drops[i].display();
}
}
雨滴每过2秒减速
Catcher catcher;
Timer timer;
Drop[] drops;
int totalDrops = 0;
void setup() {
size(400,400);
smooth();
catcher = new Catcher(32);
drops = new Drop[1000];
timer = new Timer(300);
timer.start();
}
void draw() {
background(255);
catcher.setLocation(mouseX,mouseY);
catcher.display();
if (timer.isFinished()) {
drops[totalDrops] = new Drop();
totalDrops ++ ;
if (totalDrops >= drops.length) {
totalDrops = 0;
}
timer.start();
}
for (int i = 0; i < totalDrops; i++ ) {
drops[i].move();
drops[i].display();
if (catcher.intersect(drops[i])) {
drops[i].caught();
}
}
}
雨滴随机以不同速度下落,小球跟踪鼠标,碰到雨滴,雨滴消失。
属于小游戏
float[] randoms = new float[4];
int index = 0;
void setup() {
size(200,200);
for (int i = 0; i < randoms.length; i ++ ) {
randoms[i] = random(0,256);
}
frameRate(1);
}
void draw() {
background(randoms[index]);
index = (index + 1) % randoms.length;
}
背景颜色1秒变一次
float[] randomCounts;
void setup() {
size(200,200);
randomCounts = new float[20];
}
void draw() {
background(255);
int index = int(random(randomCounts.length));
randomCounts[index] ++ ;
stroke(0);
fill(175);
for (int x = 0; x < randomCounts.length; x ++ ) {
rect(x*10,0,9,randomCounts[x]);
}
}
不同位置的方块从上而下移动
void setup() {
size(200,200);
background(255);
smooth();
noStroke();
}
void draw() {
float red_prob = 0.60;
float green_prob = 0.10;
float blue_prob = 0.30;
float num = random(1);
if (num < red_prob) {
fill(255,53,2,150);
} else if (num < green_prob + red_prob) {
fill(156,255,28,150);
} else {
fill(10,52,178,150);
}
ellipse(random(width),random(height),64,64);
}
不同颜色的半透明圆形图片快速填满屏幕
float time = 0.0;
float increment = 0.01;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
time += increment;
fill(0);
ellipse(width/2,height/2,n,n);
}
圆圈随机变大变小
float r = 75;
float theta = 0;
void setup() {
size(200,200);
background(255);
smooth();
}
void draw() {
float x = r * cos(theta);
float y = r * sin(theta);
noStroke();
fill(0);
ellipse(x + width/2, y + height/2, 16, 16);
theta += 0.01;
}
圆圈画圆圈
float theta = 0.0;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
ellipse's x location.
float x = (sin(theta) + 1) * width/2;
theta += 0.05;
fill(0);
stroke(0);
line(width/2,0,x,height/2);
ellipse(x,height/2,16,16);
}
摆钟
float theta = 0.0;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
theta += 0.02;
noStroke();
fill(0);
float x = theta;
dimension of the window).
for (int i = 0; i <= 20; i++) {
float y = sin(x)*height/2;
x += 0.2;
}
}
球形波浪动态图
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
stroke(0);
noFill();
drawCircle(width/2,height/2,100);
}
void drawCircle(float x, float y, float radius) {
ellipse(x, y, radius, radius);
if(radius > 2) {
drawCircle(x + radius/2, y, radius/2);
drawCircle(x - radius/2, y, radius/2);
}
}
圆圈里的圆圈
size(200,200);
int cols = width;
int rows = height;
int[][] myArray = new int[cols][rows];
for (int i = 0; i < cols; i ++ ) {
for (int j = 0; j < rows; j ++ ) {
myArray[i][j] = int(random(255));
}
}
for (int i = 0; i < cols; i ++ ) {
for (int j = 0; j < rows; j ++ ) {
stroke(myArray[i][j]);
point(i,j);
}
}
黑白花屏
Cell[][] grid;
int cols = 10;
int rows = 10;
void setup() {
size(200,200);
grid = new Cell[cols][rows];
for (int i = 0; i < cols; i ++ ) {
for (int j = 0; j < rows; j ++ ) {
grid[i][j] = new Cell(i*20,j*20,20,20,i + j);
}
}
}
void draw() {
background(0);
for (int i = 0; i < cols; i ++ ) {
for (int j = 0; j < rows; j ++ ) {
grid[i][j].oscillate();
grid[i][j].display();
}
}
}
屏幕分割很多小方块,从右下角到左上角颜色斜着渐变移动
float r = 8;
void setup() {
size(200,200);
}
void draw() {
background(255);
stroke(0);
fill(175);
rectMode(CENTER);
rect(width/2,height/2,r,r);
r++ ;
if (r > width) {
r = 0;
}
}
中间小方块从无到有放大直到全屏
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
stroke(0);
fill(175);
int mx = constrain(mouseX,0,width);
int my = constrain(mouseY,0,height);
translate(mx,my);
ellipse(0,0,8,8);
translate(100,0);
ellipse(0,0,8,8);
translate(0,100);
ellipse(0,0,8,8);
translate(-100,0);
ellipse(0,0,8,8);
}
四个不同位置的小圆圈 跟随鼠标同事移动
float z = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
translate(width/2,height/2,z);
rectMode(CENTER);
rect(0,0,8,8);
z++ ;
if (z > 200) {
z = 0;
}
}
3D方块从无到有放大
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
translate(100,100,0);
drawPyramid(150);
}
void drawPyramid(int t) {
stroke(0);
beginShape(TRIANGLES);
fill(255,150);
vertex(-t,-t,-t);
vertex( t,-t,-t);
vertex( 0, 0, t);
fill(150,150);
vertex( t,-t,-t);
vertex( t, t,-t);
vertex( 0, 0, t);
fill(255,150);
vertex( t, t,-t);
vertex(-t, t,-t);
vertex( 0, 0, t);
fill(150,150);
vertex(-t, t,-t);
vertex(-t,-t,-t);
vertex( 0, 0, t);
endShape();
}
3D双叉
void setup() {
size(200,200);
}
void draw() {
background(255);
stroke(0);
fill(175);
translate(width/2,height/2);
float theta = PI*mouseX / width;
rotate(theta);
rectMode(CENTER);
rect(0,0,100,100);
}
随着鼠标移动,方块翻转
float theta = 0.0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
translate(width/2, height/2);
rotateZ(theta);
rectMode(CENTER);
rect(0,0,100,100);
theta += 0.02;
}
3D方块翻转
float theta = 0.0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
translate(width/2, height/2);
rotateX(theta);
rectMode(CENTER);
rect(0,0,100,100);
theta += 0.02;
}
3D方块正面翻转,上面是左右翻转
float theta = 0.0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
translate(width/2, height/2);
rotateY(theta);
rectMode(CENTER);
rect(0,0,100,100);
theta += 0.02;
}
3D方块翻转
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
translate(width/2,height/2);
rotateX(PI*mouseY/height);
rotateY(PI*mouseX/width);
rectMode(CENTER);
rect(0,0,100,100);
}
3D方块,随着鼠标翻转,非常棒
float theta = 0.0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
theta += 0.01;
translate(100,100,0);
rotateX(theta);
rotateY(theta);
drawPyramid(50);
translate(50,50,20);
drawPyramid(10);
}
void drawPyramid(int t) {
stroke(0);
beginShape(TRIANGLES);
fill(150,0,0,127);
vertex(-t,-t,-t);
vertex( t,-t,-t);
vertex( 0, 0, t);
fill(0,150,0,127);
vertex( t,-t,-t);
vertex( t, t,-t);
vertex( 0, 0, t);
fill(0,0,150,127);
vertex( t, t,-t);
vertex(-t, t,-t);
vertex( 0, 0, t);
fill(150,0,150,127);
vertex(-t, t,-t);
vertex(-t,-t,-t);
vertex( 0, 0, t);
endShape();
}
3D 多边形随机翻转
float r = 0.0;
void setup() {
size(200,200);
}
void draw() {
background(255);
translate(width/2,height/2);
scale(r);
stroke(0);
fill(175);
rectMode(CENTER);
rect(0,0,10,10);
r += 0.02;
if (r > 20) {
r = 0;
}
}
2个方块同时放大
float theta1 = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
rectMode(CENTER);
translate(50,50);
rotateZ(theta1);
rect(0,0,60,60);
theta1 += 0.02;
}
3D翻转
float theta2 = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
rectMode(CENTER);
translate(150,150);
rotateY(theta2);
rect(0,0,60,60);
theta2 += 0.02;
}
3D翻转
float theta1 = 0;
float theta2 = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
rectMode(CENTER);
pushMatrix();
translate(50,50);
rotateZ(theta1);
rect(0,0,60,60);
popMatrix();
pushMatrix();
translate(150,150);
rotateY(theta2);
rect(0,0,60,60);
popMatrix();
theta1 += 0.02;
theta2 += 0.02;
}
2个3D翻转
Rotater[] rotaters;
void setup() {
size(200,200);
rotaters = new Rotater[20];
for (int i = 0; i < rotaters.length; i++ ) {
rotaters[i] = new Rotater(random(width),random(height),random(-0.1,0.1),random(48));
}
}
void draw() {
background(255);
for (int i = 0; i < rotaters.length; i++ ) {
rotaters[i].spin();
rotaters[i].display();
}
}
非常多的方块翻转
float theta = 0;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
stroke(0);
translate(width/2,height/2);
fill(255,200,50);
ellipse(0,0,20,20);
pushMatrix();
rotate(theta);
translate(50,0);
fill(50,200,255);
ellipse(0,0,10,10);
pushMatrix();
rotate(-theta*4);
translate(15,0);
fill(50,255,200);
ellipse(0,0,6,6);
popMatrix();
pushMatrix();
rotate(theta*2);
translate(25,0);
fill(50,255,200);
ellipse(0,0,6,6);
popMatrix();
popMatrix();
theta += 0.01;
}
小型星球轨迹动态
float theta = 0;
void setup() {
size(200, 200);
smooth();
}
void draw() {
background(255);
stroke(0);
translate(width/2,height/2);
for(float i = 0; i < TWO_PI; i += 0.2) {
pushMatrix();
rotate(theta + i);
line(0,0,100,0);
for(float j = 0; j < TWO_PI; j += 0.5) {
pushMatrix();
translate(100,0);
rotate(-theta-j);
line(0,0,50,0);
popMatrix();
}
popMatrix();
}
endShape();
theta += 0.01;
}
鸟巢一样的圆形动态图
Planet[] planets = new Planet[8];
void setup() {
size(200,200);
smooth();
for (int i = 0; i < planets.length; i++ ) {
planets[i] = new Planet(20 + i*10,i + 8);
}
}
void draw() {
background(255);
pushMatrix();
translate(width/2,height/2);
stroke(0);
fill(255);
ellipse(0,0,20,20);
for (int i = 0; i < planets.length; i++ ) {
planets[i].update();
planets[i].display();
}
popMatrix();
}
太阳系动态图
PImage img;
void setup() {
size(320,240);
img = loadImage("mysummervacation.jpg");
}
void draw() {
background(0);
image(img,0,0);
}
这里开始讲背景图片插入
先插入图片,方式是点菜单兰里的Sketch——然后点击Add File...... 打开图片
然后把mysummervacation.jpg改成你插入的图片名字
PImage head;
float x,y;
float rot;
void setup() {
size(200,200);
head = loadImage("face.jpg");
x = 0.0;
y = width/2.0;
rot = 0.0;
}
void draw() {
background(255);
translate(x,y);
rotate(rot);
image(head,0,0);
x += 1.0;
rot += 0.02;
if (x > width+head.width) {
x = -head.width;
}
}
头像弧线翻转移动
int maxImages = 10;
int imageIndex = 0;
PImage[] images = new PImage[maxImages];
void setup() {
size(200,200);
for (int i = 0; i < images.length; i ++ ) {
images[i] = loadImage( "animal" + i + ".jpg" );
}
}
void draw() {
image(images[imageIndex],0,0);
}
void mousePressed() {
imageIndex = int(random(images.length));
}
背景图切换,左键按一次换一次
int maxImages = 10;
int imageIndex = 0;
PImage[] images = new PImage[maxImages];
void setup() {
size(200,200);
for (int i = 0; i < images.length; i ++ ) {
images[i] = loadImage( "animal" + i + ".jpg" );
}
frameRate(5);
}
void draw() {
background(0);
image(images[imageIndex],0,0);
imageIndex = (imageIndex + 1) % images.length;
}
图片自动快速切换
size(200,200);
loadPixels();
for (int i = 0; i < pixels.length; i++ ) {
float rand = random(255);
color c = color(rand);
pixels[i] = c;
}
updatePixels();
黑白花屏
size(200,200);
loadPixels();
for (int x = 0; x < width; x++ ) {
for (int y = 0; y < height; y++ ) {
int loc = x + y * width;
if (x % 2 == 0) {
pixels[loc] = color(255);
} else {
pixels[loc] = color(0);
}
}
}
updatePixels();
竖线花屏
PImage img;
void setup() {
size(200,200);
img = loadImage("sunflower.jpg");
}
void draw() {
loadPixels();
img.loadPixels();
for (int y = 0; y < height; y++ ) {
for (int x = 0; x < width; x++ ) {
int loc = x + y*width;
float r = red(img.pixels [loc]);
float g = green(img.pixels[loc]);
float b = blue(img.pixels[loc]);
pixels[loc] = color(r,g,b);
}
}
updatePixels();
}
背景图片
PImage img;
void setup() {
size(200,200);
img = loadImage("sunflower.jpg");
}
void draw() {
loadPixels();
img.loadPixels();
for (int x = 0; x < img.width; x++ ) {
for (int y = 0; y < img.height; y++ ) {
int loc = x + y*img.width;
float r = red (img.pixels[loc]);
float g = green (img.pixels[loc]);
float b = blue (img.pixels[loc]);
float adjustBrightness = ((float) mouseX / width) * 8.0;
r *= adjustBrightness;
g *= adjustBrightness;
b *= adjustBrightness;
r = constrain(r,0,255);
g = constrain(g,0,255);
b = constrain(b,0,255);
color c = color(r,g,b);
pixels[loc] = c;
}
}
updatePixels();
}
随着鼠标移动,画面亮度变化
PImage img;
void setup() {
size(200,200);
img = loadImage( "sunflower.jpg" );
}
void draw() {
loadPixels();
img.loadPixels();
for (int x = 0; x < img.width; x++ ) {
for (int y = 0; y < img.height; y++ ) {
int loc = x + y*img.width;
float r = red (img.pixels[loc]);
float g = green (img.pixels[loc]);
float b = blue (img.pixels[loc]);
float distance = dist(x,y,mouseX,mouseY);
float adjustBrightness = (50-distance)/50;
r *= adjustBrightness;
g *= adjustBrightness;
b *= adjustBrightness;
r = constrain(r,0,255);
g = constrain(g,0,255);
b = constrain(b,0,255);
color c = color(r,g,b);
pixels[loc] = c;
}
}
updatePixels();
}
透明圆圈跟随鼠标,鼠标经过的地方亮,其他地区全黑
PImage source;
PImage destination;
void setup() {
size(200,200);
source = loadImage("sunflower.jpg");
destination = createImage(source.width, source.height, RGB);
}
void draw() {
float threshold = 127;
source.loadPixels();
destination.loadPixels();
for (int x = 0; x < source.width; x++ ) {
for (int y = 0; y < source.height; y++ ) {
int loc = x + y*source.width;
if (brightness(source.pixels[loc]) > threshold){
destination.pixels[loc] = color(255);
} else {
destination.pixels[loc] = color(0);
}
}
}
destination.updatePixels();
image(destination,0,0);
}
图片黑白画
PImage img;
void setup() {
size(200,200);
img = loadImage("sunflower.jpg");
}
void draw() {
image(img,0,0);
filter(THRESHOLD,0.5);
}
图片黑白画 精简版代码
PImage img;
PImage destination;
void setup() {
size(200,200);
img = loadImage("sunflower.jpg");
destination = createImage(img.width, img.height, RGB);
}
void draw() {
img.loadPixels();
destination.loadPixels();
for (int x = 1; x < width; x++ ) {
for (int y = 0; y < height; y++ ) {
int loc = x + y*img.width;
color pix = img.pixels[loc];
int leftLoc = (x - 1) + y*img.width;
color leftPix = img.pixels[leftLoc];
float diff = abs(brightness(pix) - brightness(leftPix));
destination.pixels[loc] = color(diff);
}
}
destination.updatePixels();
image(destination,0,0);
}
图片黑炭化
PImage img;
int w = 80;
float[][] matrix = { { -1, -1, -1 } ,
{ -1, 9, -1 } ,
{ -1, -1, -1 } } ;
void setup() {
size(200,200);
img = loadImage( "sunflower.jpg" );
}
void draw() {
image(img,0,0);
int xstart = constrain(mouseX-w/2,0,img.width);
int ystart = constrain(mouseY-w/2,0,img.height);
int xend = constrain(mouseX + w/2,0,img.width);
int yend = constrain(mouseY + w/2,0,img.height);
int matrixsize = 3;
loadPixels();
for (int x = xstart; x < xend; x++ ) {
for (int y = ystart; y < yend; y++ ) {
color c = convolution(x,y,matrix,matrixsize,img);
int loc = x + y*img.width;
pixels[loc] = c;
}
}
updatePixels();
stroke(0);
noFill();
rect(xstart,ystart,w,w);
}
color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img) {
float rtotal = 0.0;
float gtotal = 0.0;
float btotal = 0.0;
int offset = matrixsize / 2;
for (int i = 0; i < matrixsize; i++ ) {
for (int j = 0; j < matrixsize; j++ ) {
int xloc = x + i-offset;
int yloc = y + j-offset;
int loc = xloc + img.width*yloc;
loc = constrain(loc,0,img.pixels.length-1);
rtotal += (red(img.pixels[loc]) * matrix[i][j]);
gtotal += (green(img.pixels[loc]) * matrix[i][j]);
btotal += (blue(img.pixels[loc]) * matrix[i][j]);
}
}
rtotal = constrain(rtotal,0,255);
gtotal = constrain(gtotal,0,255);
btotal = constrain(btotal,0,255);
return color(rtotal,gtotal,btotal);
}
图片方块跟随鼠标,鼠标移动到的地方像素画,其他地方不变
PImage img;
int pointillize = 16;
void setup() {
size(200,200);
img = loadImage("sunflower.jpg");
background(255);
smooth();
}
void draw() {
int x = int(random(img.width));
int y = int(random(img.height));
int loc = x + y*img.width;
loadPixels();
float r = red(img.pixels[loc]);
float g = green(img.pixels[loc]);
float b = blue(img.pixels[loc]);
noStroke();
fill(r,g,b,100);
ellipse(x,y,pointillize,pointillize);
}
圆形小球不断飘落,最终形成图片模样
PImage img;
int cellsize = 2;
int cols, rows;
void setup() {
size(200,200,P3D);
img = loadImage( "sunflower.jpg" );
cols = width/cellsize;
rows = height/cellsize;
void draw() {
background(255);
img.loadPixels();
for (int i = 0; i < cols; i++ ) {
for (int j = 0; j < rows; j++ ) {
int x = i*cellsize + cellsize/2;
int y = j*cellsize + cellsize/2;
int loc = x + y*width;
color c = img.pixels[loc];
float z = (mouseX/(float)width) * brightness(img.pixels[loc])- 100.0;
pushMatrix();
translate(x,y,z);
fill(c);
noStroke();
rectMode(CENTER);
rect(0,0,cellsize,cellsize);
popMatrix();
}
}
}
图片以3D模式破碎
PFont f;
void setup() {
size(200,200);
f = loadFont( "ArialMT-16.vlw" );
}
void draw() {
background(255);
textFont(f,16);
fill(0);
text ( "Mmmmm ... Strings ..." ,10,100);
}
文字
PFont f;
void setup() {
size(400,200);
f = createFont("Arial", 16, true);
}
void draw() {
background(255);
stroke(175);
line(width/2,0,width/2,height);
textFont(f);
fill(0);
textAlign(CENTER);
text("This text is centered." ,width/2,60);
textAlign (LEFT) ;
text("This text is left aligned." ,width/2,100);
textAlign(RIGHT);
text("This text is right aligned." ,width/2,140);
}
以中线为住 一个在左 一个在中 一个在右 3个句子
String[] headlines = {
"Processing downloads break downloading record." ,
"New study shows computer programming lowers cholesterol." ,
};
PFont f;
float x;
int index = 0;
void setup() {
size(400,200);
f = createFont( "Arial" ,16,true);
x = width;
}
void draw() {
background(255);
fill(0);
textFont(f,16);
textAlign (LEFT);
text(headlines[index],x,180);
x = x - 3;
float w = textWidth(headlines[index]);
if (x < -w) {
x = width;
index = (index + 1) % headlines.length;
}
}
文字从下面划过,2句话,一句结束后另一句出现
PFont f;
String message = "this text is spinning";
float theta;
void setup() {
size(200,200);
f = createFont("Arial", 20, true);
}
void draw() {
background(255);
fill(0);
textFont(f);
translate(width/2,height/2);
rotate(theta);
textAlign(CENTER) ;
text(message,0,0);
theta += 0.05;
}
字体360度不停旋转
learning processing书中的所有代码
感谢一直关注着禾灮成长进步的朋友们。你们的信任、支持和鼓励,鞭策着我们一路走到了今天。
感谢所有的合作伙伴,我们相互促进,共同见证了彼此的成长。
感谢所有曾经在禾灮彼此倚靠、相互鼓励、携手同心、砥砺同行的兄弟姐妹。这里承载了我们的青春与热血。
禾灮,感谢有你。
未来,我们将一如既往,砥砺前行。
禾灮·小楊
2018.08.23