Recitation:
void setup() {
size(1024, 768);
background(180);
}
void draw() {
int r = int(random(200, 255));
int g = int(random(200, 255));
int y = int(random(10, 35));
fill(255);
if (millis()<1454) {
stroke(0);
strokeWeight(0.3);
circle(100, 5+ millis()/5., 50);
}
if (millis() >= 1454 && millis()< 2353) {
circle(120 + (millis()/8.-1454/8), 595-millis()/5., 50);
}
if (millis() >= 2353 && millis()< 2678) {
circle(235+(millis()/8.-2353/8), 118+(millis()/5.-2353/5), 50);
}
if (millis()>= 2678 && millis()<3029) {
circle(274+(millis()/8.-2678/8), 182-(millis()/5.-2678/5), 50);
}
if (millis()>= 3029) {
circle(318+(millis()/8.-3029/8), 110+(millis()/5.-3029/5), 50);
}
if (millis()>= 4291 && millis()<5100) {
circle(418+(millis()/8.-4291/8), 275-(millis()/5.-4291/5), 50);
}
if (millis()>= 5100) {
circle(524+(millis()/8.-5100/8), 100+(millis()/5.-5100/5), 50);
}
if (millis()>= 5900) {
circle(492+ (millis()-5900/8), 392, 30);
}
if (millis()>= 6000) {
text2();
}
if (millis()>= 6800 && millis()< 7200 ) {
textSize(55);
fill(#FC1C1C, 80);
text("22 End-Of-Semester Show", 153+(millis()-6800)/5.333333, 398+(millis()-6800)/3.333333333);
}
if (millis()>= 7300 && millis()<7400) {
textSize(55);
fill(#FC671C, 80);
text("22 End-Of-Semester Show", 240+(millis()-7400)/8, 517-(millis()-7400)/5);
}
if (millis()>= 7400 && millis()<7500) {
textSize(55);
fill(#FCA31C, 80);
text("22 End-Of-Semester Show", 247-(millis()-7400)/8, 516-(millis()-7400)/5);
}
if (millis()>= 7500 && millis()< 8200) {
textSize(55);
fill(#FCDB1C, 100);
text("22 End-Of-Semester Show", 236+(millis()-7500)/8, 500+(millis()-7500)/5);
}
if (millis()>= 8200 && millis()<8300) {
textSize(55);
fill(#45BF6A, 100);
text("22 End-Of-Semester Show", 328+(millis()-8200)/8, 642-(millis()-8200)/5);
}
if (millis()>= 8300 && millis()<8400) {
textSize(55);
fill(#28984A, 100);
text("22 End-Of-Semester Show", 343-(millis()-8300)/8, 621-(millis()-8300)/5);
}
if (millis()>= 8400 && millis()<9000) {
textSize(55);
fill(#3EA25D, 135);
text("22 End-Of-Semester Show", 334+(millis()-8400)/8, 621+(millis()-8400)/5);
}
if (millis() >= 9000) {
textSize(55);
fill(#117931);
text("22 End-Of-Semester Show", 411, 742);
}
if (millis()>= 9400) {
text3();
time();
}
if (millis()>= 10000 && millis()< 10600) { //two srings hanging from the ceiling
fill(0);
circle(100, (millis()-10000)/15, 1);
circle(900, (millis()-10000)/15, 1);
fill(255, 128);
noStroke();
circle(498+(millis()-10000)/6., 194, 30); //the highlighting of the location
text1();
}
if (millis()>= 10600 && millis()<10900) { //a blue ball to the "i" and the first triangle
stroke(0.1);
fill(#0C8AF5);
strokeWeight(0.1);
circle(100, 80, 80);
fill(#04B216);
noStroke();
triangle(900, 39, 848, 158, 948, 158);
}
if (millis()>= 10601 && millis()< 10800) { //the second triangle
fill(#009D35);
strokeWeight(0.1);
triangle(900, 142, 828, 209, 968, 209);
}
if (millis()>= 10800 && millis()< 11750) { //the third triangle
stroke(#036A26);
strokeWeight(2.5);
line(900, 186, 808+(millis()-10800)/5., 260);
}
if (millis()>=10900) { //the yellowish light bulbs
fill(r, g, 0, 128);
noStroke();
circle(millis()-10900, 20, y);
}
if (millis()>=10900 && millis()< 11400) { // the snow on top
fill(255, 128);
noStroke();
circle(848+(millis()-10900)/5., 145, y);
}
if (millis()>=11400 && millis()< 12100) {
fill(255, 128);
noStroke();
circle(828+(millis()-11400)/5., 200, y); // the snow on top
}
if (millis()>=12100) {
fill(#FFE02C, 128);
noStroke();
circle(845, 164, y); // the decoration
}
if (millis()>=12110) {
fill(255, 0, 0, 128);
noStroke();
circle(965, 219, y); // the decoration
}
}
void text1() {
textSize(30);
fill(128);
text("8th floor", 498, 204);
}
void text2() {
push();
translate(642, 264);
rotate(radians(35));
textSize(35);
fill(100);
text("Fall", 0, 0);
pop();
}
void text3() {
push();
translate(107, 434);
rotate(radians(58));
textSize(45);
fill(255);
text("Friday December 16", 0, 0);
pop();
}
void time() {
push();
translate(136, 582);
rotate(radians(58));
textSize(35);
fill(255);
text("6pm to 8pm", 0, 0);
pop();
}
Interesting Functions:
1. millis() My whole poster is based on the function of millis, because I wanted the information to pop up as the audience come by and watch it so that they can both get the key information and appreciate the colors and shapes I “drew”. And the tricky part of millis is that I have to keep track of the time. And because I don’t want to keep calculate the time spent for a point to get to the place I want it to, I often use the combination of (mouseX, mouseY) and void mousePressed(), println(millis), so that when the point gets to the place I want it to be, I simply just click and then the millis will be printed out. Another thing I found interesting about “drawing” a line with moving circles is that when the program is drawing something else, the line “breaks”, but I think there is a way to fix it-to make it draw the exact missing circle again when drawing something else, which is to put the drawing function inside another loop so that it won’t be missed.
2. push(), pop(), rotate() This is a function that I learned from Professor Rudi. It was during the recitation that I asked him if it was possible for me to line the words in a diagonal direction and he patiently showed me how to achieve that through push(), pop(), rotate() and he also kindly reminded me that I should be careful to include both push() and pop() in the loop so that the words can pop up.
3. line() I think it was my experience of using the circles to draw a “line” that inspired me that I can use the line function with millis() to draw many kinds of geometric shapes as if I were coloring them, for example, here I used multiple lines to color up the third triangle of the Christmas tree. And the effect was in fact really amazing as the “light bulbs” being lit up in the background, creating a cozy Christmas vibe. There is one question though: whether I can use the same method to color up a circle? If so, what additional functions should I be using?
Homework:
Task #1: Add a Fixed Pattern
As I was all using millis() in my poster to show the sequence of different elements showing up to grab the audience’s attention and also making them wonder or expect what’s going to happen next, I wanted to also include that kind of effect in my homework, too. So, I picked the Christmas tree in my poster and then added a star to the top using vertex() , just as I did on the first class when we first get to know Processing.
void setup() {
size(1024, 768);
background(180);
}
void draw() {
for (int x = -900; x <= width; x = x + 200) {
for (int y = -50; y <= height; y = y + 200) {
Xmas(x, y);
}
}
}
void Xmas(float x, float y) {
int t = int(random(20, 128));
int a = int(random(10, 35));
if (millis()>= 600 && millis()<900) { //the first triangle
fill(#04B216);
noStroke();
triangle(x+900, y+60, x+848, y+158, x+948, y+158);
}
if (millis()>= 601 && millis()< 800) { //the second triangle
fill(#009D35);
strokeWeight(0.1);
triangle(x+900, y+142, x+828, y+209, x+968, y+209);
}
if (millis()>= 800 && millis()< 1750) { //the third triangle
stroke(#036A26);
strokeWeight(2.5);
line(x+900, y+186, x+808+(millis()-800)/5., y+260);
}
if (millis()>=900 && millis()< 1400) { // the snow on top
fill(255, t);
noStroke();
circle(x+848+(millis()-900)/5., y+145, a);
}
if (millis()>=1400 && millis()< 2100) {
fill(255, t);
noStroke();
circle(x+828+(millis()-1400)/5., y+200, a); // the snow on top
}
if (millis()>=2100 && millis()<2300) {
fill(#FFE02C, t);
noStroke();
circle(x+845, y+164, a); // the decoration
}
if (millis()>=2110) {
fill(220, 0, 0, t);
noStroke();
circle(x+965, y+219, a); // the decoration
fill(#FFE02C);
beginShape();
vertex(x+908, y+54);
vertex(x+885, y+68);
vertex(x+913, y+68);
vertex(x+891, y+54);
vertex(x+899, y+74);
vertex(x+908, y+54);
endShape();
}
}
Task #2: Add a Random Pattern
Although I still really wanted to keep that sequence of elements showing up using millis, I found it difficult to include millis together with the function of the random position the Christmas tree. And when I had both of them in my code, all the elements of the tree couldn’t form a whole tree together. And therefore, I made an appointment with Carina to get to know whether it’s possible to include both. After she discussed with me the difficulty to include both based on her own experience, I decided to use the “for loop” instead and only on the snow part of the christmas tree.
Another thing I learned from Carina’s office hour is that I can use frameRate() to control the speed of the pattern popping up. And I also used it in task 3 and I think it’s really simple and easy to use whenever I want the flow to go slower than the default speed.
And I also changed the original “red” light into yellow to make the color more compatible with each other.
And there’s also a remaining question here: How can I make the pattern pop up only for a one hundred times, instead of ForEver?
void setup() {
size(1024, 768);
background(180);
}
void draw() {
frameRate(13);
int x = int(random(-900, 400));
int y = int(random(-100, 1024));
Xmas(x, y);
decoration(x, y);
}
void Xmas(float x, float y) {
//the third triangle
int t3 = int(random(148, 225));
fill(#066F11, t3);
noStroke();
triangle(x+900, y+186, x+808, y+260, x+992, y+260);
//the second triangle
int t2 = int(random(188, 250));
fill(#009D35, t2);
triangle(x+900, y+142, x+828, y+209, x+968, y+209);
int t1 = int(random(20, 128));
fill(#04B216, t1);
noStroke();
triangle(x+900, y+60, x+848, y+158, x+948, y+158);
}
void decoration(float x, float y) {
int t = int(random(128, 188));
// the snow on top
fill(#FFE02C, t);
noStroke();
int a = int(random(10, 35));
circle(x+845, y+164, a);
fill(#FFE02C);
beginShape();
vertex(x+908, y+54);
vertex(x+885, y+68);
vertex(x+913, y+68);
vertex(x+891, y+54);
vertex(x+899, y+74);
vertex(x+908, y+54);
endShape();
circle(x+965, y+219, a);
for (int i =0; i<=100; i+=10) {
int b = int(random(10, 25));
fill(255, t);
circle(x+848+i, y+145, b);
println(x+848+i);
}
for (int j =0; j<=130; j+=10) {
fill(255, t);
noStroke();
int c = int(random(10, 30));
circle(x+828+j, y+200, c); // the snow on top
}
}
Task #3: Make it interactive
I thought it interesting to assign a key to realize the appearance of the decorations like the snow, the lights and the star on top. But at first, when I was still using millis, I could only draw the “snow” under the layer of the green christmas tree. And then, we found that it was very inconvenient to use millis because it’s really common case to miss the time slot that we’re supposed to press “s”, and the snow, therefore, may only start in the middle or even not appear at all. Therefore, Carina suggested that I can probably use the “for loop” to achieve a similar kind of effect as millis. Although the snow doesn’t “falls down” at once smoothly, it actually “rolls” every time I press the keyboard, which makes it more interactive in the sense that you can play with it over and over again. (although again, the most ideal form of interaction I expect is that every time I press “s” the snow and the decoration shows up, with the snow slowly “rolling” from the left to the right, and when I press “s” again, the process goes all over again. And I’m not sure if there is anything I can do to realize that.) TIP: when using the for loop, the snowballs will show up in front of the “green” layer because we’ve adjusted the interval to a certain one so that it looks like it’s smoothly connected. For example, when we tried i+=100, the snowballs are only drawn on the two endpoints; when we tried i+=50, the snowballs are only drawn on the two endpoints and the middle. So what I learned is that we should always try things out and see how it goes. Don’t be afraid of mistakes, even Carina makes mistakes but she’s still trying anything she has in mind to better help me.
During that process, Carina and I also tried constraint() together because we first wanted to constrain the snowball to a certain “domain”. But I think I wasn’t that familiar with that function and we finally chose to use for (int i =0; i<=100; i+=10) instead, so that we can limit those snowballs by controlling how many times it is drawn for each loop. TIP: I have to name two variables for the two different rows of the snow that “rolls” as I press “s” on my keyboard.
And Carina also told me that there are differences between long press and instant press on the keyboard, depending on whether keyPressed is in an if loop. And it works like this below:
With if (keyPressed) { if (key == 's' || key == 'S') I have to long press “s” to make them move:
But only with (key == 's' || key == 'S') , I only press “s” once, and then the snowballs rolls by itself.
And I thought that the first one was definitely more interesting and interactive so I chose to do it that way.
void setup() {
size(1024, 768);
background(180);
}
void draw() {
frameRate(10);
//background(180);
for (int x = -900; x <= width; x = x + 200) {
for (int y = -50; y <= height; y = y + 200) {
Xmas(x, y);
decoration(x, y);
}
}
}
void Xmas(float x, float y) {
fill(#04B216);
noStroke();
triangle(x+900, y+60, x+848, y+158, x+948, y+158);
//the second triangle
fill(#009D35);
strokeWeight(0.1);
triangle(x+900, y+142, x+828, y+209, x+968, y+209);
//the third triangle
stroke(#036A26);
noStroke();
triangle(x+900, y+186, x+808, y+260, x+992, y+260);
}
void decoration(float x, float y) {
int t = int(random(20, 128));
if (keyPressed) {
if (key == 's' || key == 'S') {// the snow on top
noStroke();
fill(#FFE02C, t);
noStroke();
int a = int(random(10, 35));
circle(x+845, y+164, a);
fill(220, 0, 0, t);
noStroke();
circle(x+965, y+219, a);
fill(#FFE02C);
beginShape();
vertex(x+908, y+54);
vertex(x+885, y+68);
vertex(x+913, y+68);
vertex(x+891, y+54);
vertex(x+899, y+74);
vertex(x+908, y+54);
endShape();
for (int i =0; i<=110; i+=20) {
int b = int(random(10, 25));
fill(255, t);
circle(x+848+i, y+145, b);
}
for (int j =0; j<=140; j+=20) {
fill(255, t);
noStroke();
int c = int(random(10, 30));
circle(x+828+j, y+200, c); // the snow on top
}
}
}
}