I made two versions of animation playing with the random attribution of colors.
One is called “moon”. Here are some works it generates:
The user would see a white circle(the moon) at the center of the screen at the start of the animation, and random white stars would be generated by the program. By pressing “q”, “w”, “e”, “1”, “2”, “3” the user can change the color of the moon and the stars it produces by controling the hue of red, green and blue. By clicking the moon all stars would be erased and new stars of the current color of the moon would be produced. If the user want to stop the star-borns and screenshot their project they can press SPACE. It is also possible to change the color when pressing space.
Here is a video example of what it does:
Another rendering of this idea is to only produce stars when key is pressed. A video example of this is here:
It is very enjoyable to see the stars being born in the sky. The visual effect was beyond my expectation. Growing up in a city where there are few stars to be seen, I almost felt touched by the starfull night sky it produces. It also offers a good way to experiment and observe the impressional effect of colors.
This is the code I wrote for it:
int x=255;
int y=255;
int z=255;
int i=0;
void setup() {
size(600,600);
background(0);
}
void draw() {
if (keyPressed) {
if (key == ‘1’) {
x+=1;
}
if (key == ‘2’) {
y+=1;
}
if (key == ‘3’) {
z+=1;
}
if (key == ‘q’ || key == ‘Q’) {
x-=1;
}
if (key == ‘w’ || key == ‘W’) {
y-=1;
}
if (key == ‘e’ || key == ‘E’) {
z-=1;
}
}
fill(x,y,z);
noStroke();
circle(300,300,50);
if (keyPressed) {
if (key==’ ‘) {
}
}
else if (i<10000) {
fill(x,y,z);
circle(random(0,600),random(0,600),random(0,5));
i+=1;
}
if (mousePressed) {
if ((mouseX-300)*(mouseX-300)+(mouseY-300)*(mouseY-300)<300) {
background(0);
i=0;
}
}
}
I also made a simpler project, which is quite interesting for me:
This is some of the pictures it can produce:
The user would have a pen producing random color and a canvas. By pressing SPACE the pen stops drawing, else it draws on. By clicking on the grey square at the top left corner the canvas would be cleared, and the canvas-color will switch between black and white, which have different effect with the color stroke.
The code I used is as folllowing:
int i=0;
int n=0;
void setup() {
size(600,600);
background(0);
frameRate(1000);
}
void draw() {
fill(200);
noStroke();
rect(20,20,50,50,20,20,20,20);
if (mousePressed) {
}
//if (mouseX<100 && mouseY<100) {
// background(255);
// i=0;
// n+=1;
//if (n%2 == 0) {
// background(0);
//}
//else {
// background(255);
//}
//}
if (keyPressed) {
if (key==’ ‘){
}
}
else if (i<20000) {
fill(random(0,255),random(0,255),random(0,255));
circle(random(pmouseX-10,mouseX),random(pmouseY-10,mouseY),random(0,5));
i+=1;
}
}
void mousePressed() {
if (mouseX<100 && mouseY<100) {
background(255);
i=0;
n+=1;
if (n%2 == 0) {
background(0);
}
else {
background(255);
}
}
}
Additional Assignment:
This is the video of the project:
And this is the code:
int x=200;
int y=200;
boolean change=false;
int i = 0;
int j = 0;
boolean colorchange=false;
int a = 300;
int b = 300;
void setup() {
size(600,600);
frameRate(100);
}
void draw() {
background(0,0,100);
if (x==250 && y==250) {
change=true;
}
if (change==false) {
x+=2;
y+=2;
}
else if (change) {
x-=2;
y-=2;
if (x==48 && y==48) {
change=false;
}
}
colorMode(HSB, 100);
if (i==100) {
colorchange=true;
}
if (colorchange==false) {
i+=1;
j+=1;
}
else if (colorchange) {
i-=1;
j-=1;
if (i==0) {
colorchange=false;
}
}
strokeWeight(20);
stroke(i, j, 100);
ellipse(a,b,x,y);
if (a>=125 && a<=475 && b>=125 && b<=475) {
if (keyPressed) {
if (key == CODED) {
if (keyCode == LEFT) {
if (a>130){
a-=5;
}
}
else if (keyCode == RIGHT) {
if (a<470){
a+=5;
}
}
else if (keyCode == UP) {
if (b>130){
b-=5;
}
}
else if (keyCode == DOWN) {
if (b<470){
b+=5;
}
}
}
}
}
}
When making this project I searched for functions of Processing and realized there’s just so many possibilities with it——I will definitely explore more of those functions in my artistic expression.