ICM: Week 3 homework (working in pairs)

Last week we started looking into conditional statements: if/else, while, for, loops. It made our lives a bit easier and opened doors to a much bigger imagination (and more sleepless nights). So far all the homework we had to do, we did it individually and this time we were paired up with the fellow classmate.

I’ve been lucky to work with Muqing Niu from Shanghai, China, who’s really really very very talented, nothing to compare with me, but I’m getting there. Image may be NSFW.
Clik here to view.

The thing we had to do was working on rule-based animation, motion and interaction. We had to follow the instructions on the web or invent our own assignment, we could also work on two separate ideas and then see how they can be integrated or start from one idea and split it into two parts. That’s pretty much what we did.

Muqing Niu came up with an awesome idea to use the painting of a very famous Chinese painter Wu Guanzhong:

Image may be NSFW.
Clik here to view.

The idea was to use the painting as a background and code small green ellipses (to represent green spots in the painting) and make them slowly and randomly fly on the canvas, and bounce back when they knock the wall. Then we added a slider, which changes the background picture from spring to winter  and the ellipse color from green to white as we change the season.

We’ve divided whole project in two parts:

1. Drawing background images (1 image for spring and another for winter) and create bouncing ellipses. (Muqing Niu)
2. Creating a slider to change the background (preload image) and the color of ellipses. (me)

Drawing images and coding the bouncing ellipses (Muqing Niu)

Muqing created a code blogs of ellipses, vectors and variations to let ellipses freely move in the canvas just like plants growing in spring and the snow dancing in the winter (that’s why there’s var “plant” in the code). She gave the ellipses two diameter scales, and two position vectors, as well as two speed vectors in order to make the ellipses fly in a random but orderly way. Besides, the bouncing effect Dan taught us last Wednesday really helped a lot.Here’s how it looks and part of the code below:

Image may be NSFW.
Clik here to view.

function circle() {
 //create two diameter types of plants.
 this.diameter1 = random(4,8);
 this.diameter2 = random(2,4);

 // create two position scales.
 this.position1 = createVector(random(this.diameter1, width),random(this.diameter1 + 150, height - this.diameter1-100)) ;
 this.position2 = createVector(random(this.diameter2,width),random( this.diameter2 + 270, height - 190)) ;
 //
 this.speed1 = createVector(random(-0.2 * this.diameter2 , 0.2 * this.diameter2),random(-0.2 * this.diameter2 , 0.2 * this.diameter2));
 this.speed2 = createVector(random(-0.02 * this.diameter1 , 0.02 * this.diameter1),random(-0.02 * this.diameter1 , 0.02 * this.diameter1));

Creating a slider (Ruta)

First, I’ve tried working on a slider separately from the main homework. To do that I was following the guidelines on p5.js website. I’ve preloaded both of the pictures and built a slide to change a background once the slider is moved:

function preload (){
 winter = loadImage ("winter.png");
 spring = loadImage ("spring.jpg");
}

function setup() {
 //createCanvas
 createCanvas (600, 600);
 imgSlider = createSlider (0, 1, 0);
 imgSlider.position (100, 550);
 
}

function draw() {
 var img = imgSlider.value ();
 
 if (img == 1) {
 background (winter);
 }else {
 background (spring);
 }
 text ("spring", 65, 565)
 text ("winter", 245, 565);
}

Here’s how it looks like: http://itpruta.com/ICM/slider/.

Then I’ve tried building the slider into Muqing Niu’s existing code. To make it easier, I’ve first built two sliders: one for changing the background picture and the second one for changing the ellipse color (I’ll try to merge both after). Here it is to review.

Well… but that’s not what we wanted. Image may be NSFW.
Clik here to view. The idea was to merge everything into one slider (keep in mind, I’m working with sliders for the first time in my life). I had two options: to put everything under the color or image slider. I chose color slider first: when I put it there, the program became very slow and seconds later didn’t load at all (I guess because I moved the “background” command from it’s place. Here’s part of the code (pay attention to the “background” under comment below, because this is the part that’s not working:

function setup() {
 createCanvas(600,600);
 // draw plants 
 for (var i=0; i<700; i++) {
 plant.push(new circle());
 
 //create slider
 colSlider = createSlider (0, 1, 0);
 colSlider.position (100, 550);
}
}

function draw() {
 var img = imgSlider.value ();
 if (img == 1) {
 background (spring);
 }else {
 background (winter);
 }
 text ("winter", 65, 565)
 text ("spring", 245, 565);
 text ("color", 245, 535);
 
 for (var i=0; i<plant.length; i++) {
 
 plant[i].display();
 }
 
 
}

function circle() {
 //create two diameter types of plants.
 this.diameter1 = random(4,8);
 this.diameter2 = random(2,4);

 // create two position scales.
 this.position1 = createVector(random(this.diameter1, width),random(this.diameter1 + 150, height - this.diameter1-100)) ;
 this.position2 = createVector(random(this.diameter2,width),random( this.diameter2 + 270, height - 190)) ;
 //
 this.speed1 = createVector(random(-0.2 * this.diameter2 , 0.2 * this.diameter2),random(-0.2 * this.diameter2 , 0.2 * this.diameter2));
 this.speed2 = createVector(random(-0.02 * this.diameter1 , 0.02 * this.diameter1),random(-0.02 * this.diameter1 , 0.02 * this.diameter1));

 this.display = function() {
 var col = colSlider.value ();
 if (col==1){
 fill (182, 204, 42);
 noStroke ();
background (spring);
 }else{
 fill (255, 250, 250);
 noStroke();
 //background (winter);
}
text ("color", 245, 565);

So finally I’ve done everything under the image slider: the “background” command stayed where it was and I’ve put the ellipse color conditional command up , and it worked! Here’s how this part of the code looks like:

function preload (){
 winter = loadImage ("winter_011.png");
 spring = loadImage ("spring_011.jpg");
}

function setup() {
 createCanvas(600,600);
 // draw plants 
 for (var i=0; i<700; i++) {
 plant.push(new circle());
 
 //create slider
 imgSlider = createSlider (0, 1, 0);
 imgSlider.position (30, 550);
}
}

function draw() {
 var img = imgSlider.value ();
 if (img == 1) {
 background (spring);
 fill (182, 204, 42);
 noStroke ();
 }else {
 background (winter);
 fill (255, 250, 250);
 noStroke();
 }
 text ("slide", 175, 565);

Here’s the full image and code.

The question here is: why the first code with the color slider didn’t work?

UPDATE (Muqing Niu) about the final one and the picture

Muqing found a reference online that sort of merges both pictures to one and create this map of colors that, when moving the slider, nicely change from spring to winter. Here’s the full code with reference.

context = document.getElementById('defaultCanvas').getContext('2d’);

context.globalAlpha = 1 - img / 100;

fill (lerpColor(color(182, 204, 42), color(255,255,255), 1 - img / 100));

Our main question from this assignment (apart from many other I have) is: how can we merge both of the pictures using the knowledge we have from p5 and not with the reference found online?