Project: Dynamic Drawing

A little house on a hill! Move left to right to see clouds, the sun, and the sky change. Move up and down to see the chimney puff smoke and some (abstract flowers).

sketchI tried using map() and it was pretty helpful!
The Illustrator sketch I originally did! Decided to take the door out.
var R= 0;
var G= 100;
var smokey = 0;
var Xcloud = 0;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    let R = map(mouseX, 0, width/2, 0, 150)
    background(R,150,130); //background color changes based on mouseX
  
    noStroke();
    //sky
    fill('#FFC773');
    circle(R,R,R); //sun moving
    //clouds moving based on mouseX
    fill('#EAF0FF');
    ellipse(442 + Xcloud, 83, 77, 59);
    ellipse(472 + Xcloud, 117, 77, 59);
    ellipse(416 + Xcloud, 115,84,64);
    ellipse(374 + Xcloud, 115,52,34);
    ellipse(319 + Xcloud,183,66,23);
    ellipse(265 + Xcloud,183,107,44);
    ellipse(206 + Xcloud,161,133,56);
    ellipse(172 + Xcloud,183,137,40);
    ellipse(76 + Xcloud,78,47,27);
    ellipse(4 + Xcloud,65,84,65);
    ellipse(45 + Xcloud, 79, 49,46);
  
    //smoke
    G = height-mouseY
    fill(234,210,194,G)
    circle(369, 210 + smokey, 28)
    fill(217,185,137,G)
    circle(386,170 + smokey,34)
    fill(217,206,191,G)
    circle(349,133 + smokey,42)
    fill(153,129,92,G)
    circle(390, 84 + smokey, 53)
   
    //grass
    fill('#BDFF9F');
    circle(82,446,412);
    fill('#507C41');
    circle(518,629,543);
  
    //house
    fill('#C39156')
    rect(184, 297, 231, 200,18);
    fill('#754C24')
    rect(348,205,42,99)
    fill('#876946')
    triangle(300,224,457,319,143,319);
    //grass again
    fill('#7EBA70');
    circle(94,689,539);
  
    //flowers and fill based on opacity with mouseY
    fill(258,118,109,G)
    circle(16,257,41)
    fill(238,174,243,G)
    circle(103,245,37)
    fill(255,205,108,G)
    circle(163,260,22)
    fill(145,137,227,G)
    circle(137,294,35)
    fill(258,118,109,G)
    circle(68,297,22)
    fill(238,174,243,G)
    circle(48,285,19)
    fill(258,118,109,G)
    circle(3,314,24)
    fill(145,137,227,G)
    circle(31,313,11)
    fill(255,205,108,G)
    circle(64,329,12)
    fill(238,174,243,G)
    circle(35,348,25)
    fill(145,137,227,G)
    circle(110,342,25)
    fill(255,205,108,G)
    circle(144,352,22)
    fill(258,118,109,G)
    circle(143,388,31)
    fill(255,205,108,G)
    circle(110,379,19)
    fill(255,205,108,G)
    circle(68,388,44)
    fill(258,118,109,G)
    circle(10,384,30)
    fill(255,205,108,G)
    circle(18,431,47)
    fill(145,137,227,G)
    circle(50,423,12)
    fill(238,174,243,G)
    circle(83,441,17)
    fill(145,137,227,G)
    circle(122,457,27,)
    fill(145,137,227,G)
    circle(157,422,27)
    fill(238,174,243,G)
    circle(192,438,42)
    fill(255,205,108,G)
    circle(18,486,12)
    fill(145,137,227,G)
    circle(53,510,57)
    fill(258,118,109,G)
    circle(106,504,12)
    fill(255,205,108,G)
    circle(153,498,38)
    fill(238,174,243,G)
    circle(118,527,19)
    fill(255,205,108,G)
    circle(230,502,41)
    fill(145,137,227,G)
    circle(200,539,32)
    fill(255,205,108,G)
    circle(92,561,19)
    fill(258,118,109,G)
    circle(296,520,37)
    fill(258,118,109,G)
    circle(260,541,12)
    fill(238,174,243,G)
    circle(143,575,65)
    fill(258,118,109,G)
    circle(25,593,65)
    fill(255,205,108,G)
    circle(265,541,12)
    fill(258,118,109,G)
    circle(310,571,27)
    fill(145,137,227,G)
    circle(462,367,65)
    fill(238,174,243,G)
    circle(518,385,30)
    fill(255,205,108,G)
    circle(589,353,97)
    fill(258,118,109,G)
    circle(611,439,58)
    fill(238,174,243,G)
    circle(550,426,19)
    fill(145,137,227,G)
    circle(485,429,39)
    fill(258,118,109,G)
    circle(445,414,16)
    fill(145,137,227,G)
    circle(589,506,58)
    fill(255,205,108,G)
    circle(533,479,22)
    fill(258,118,109,G)
    circle(451,488,56)
    fill(255,205,108,G)
    circle(515,510,44)
    fill(145,137,227,G)
    circle(533,554,29)
    fill(238,174,243,G)
    circle(599,588,81)
    fill(255,205,108,G)
    circle(500,600,38)
    fill(238,174,243,G)
    circle(410,585,105)
    fill(258,118,109,G)
    
   
   //some interaction stuff 
    smokey = mouseY
    Xcloud = mouseX //clouds moving

}

  

Leave a Reply