September 2018 – Page 34 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Curran Zhang-Project03-Dynamic Drawing

/*Curran Zhang 
Section A
curranz@andrew.cmu.edu
project_03/
*/

var R = 0;
var G = 170;
var B = 225;
var leftwall = (75);
var rightwall = (525);
var angle = 0;

function setup() {
createCanvas(600,600);
var r = 1
var spinx = cos(angle)*r
var spiny = sin(angle)*r
var con = constrain(mouseX,leftwall,rightwall);
var skycolor = mouseX/(600/225);
}



function draw()
{
  background(R,G,B);
   if (mouseX > 0 & mouseX < width)
      { R = 0 - mouseX/20;
        G = 150 - mouseX/4;
        B = 225 - mouseX/4;
      }
    
  //Stars
      if (mouseX > width/3){
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(50,50,1.5,1.5);
        angle = angle + 1;
        pop();
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(100,100,3,3);
        angle = angle + 1;
        pop();
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(100,200,3,3);
        angle = angle + 1;
        pop();
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(300,30,3,3);
        angle = angle;

        pop();
        fill(255); 
        push();
          translate(250, 75);
          rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 2, 2);
          pop();
          push();
          translate(400, 200);
        rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 3, 3);
          pop();
          push();
        translate(100, 150);
          rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 4, 4);
        pop();
        push();
        translate(175, 225);
        rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 5, 5);
        pop();
        push();
        translate(500, 180);
        rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 5, 5);
        pop();
        angle = angle + 2;
      }
  //Sun and Moon
     fill('yellow');
     var con = constrain(mouseX,leftwall,rightwall);
     ellipse(con, 90, 70, 70);
     if(mouseX > width/2)
      {var x2 = map(mouseX, 0, width,120, 0, true);
       fill(0,150 - mouseX/4,225 - mouseX/4);
       strokeWeight(0);
       ellipse(mouseX - x2, 90, 70, 70);
      }
  //Mountain
      fill(178,71,154);
      beginShape();
      vertex(0,254);
      vertex(2,252);
      vertex(60,262);
      vertex(148,246);
      vertex(259,254);
      vertex(460,195);
      vertex(600,244);
      vertex(600,600);
      vertex(0,600);
      endShape(CLOSE);

      fill(129,61,151);
        beginShape();
        vertex(0,327);
        vertex(10,324);
        vertex(31,310);
        vertex(40,310);
        vertex(57,308);
        vertex(93,315);
        vertex(133,327);
        vertex(182,318);
        vertex(231,314);
        vertex(241,316);
        vertex(325,354);
        vertex(403,341);
        vertex(425,337);
        vertex(469,337);
        vertex(518,318);
        vertex(580,304);
        vertex(600,296);
        vertex(600,600);
        vertex(0,600);
        endShape(CLOSE);

      fill(77,40,119);
        beginShape();
        vertex(0,445);
        vertex(33,435);
        vertex(56,425);
        vertex(70,413);
        vertex(109,413);
        vertex(130,420);
        vertex(180,433);
        vertex(227,439);
        vertex(260,445);
        vertex(283,436);
        vertex(325,429);
        vertex(335,420);
        vertex(360,409);
        vertex(385,396);
        vertex(470,400);
        vertex(485,403);
        vertex(527,401);
        vertex(553,396);
        vertex(558,394);
        vertex(584,396);
        vertex(600,400);
        vertex(600,600);
        vertex(0,600);
        endShape(CLOSE);

      fill(205,121,178);
        beginShape();
        vertex(12,268);
        vertex(30,271);
        vertex(37,277);
        vertex(55,277);
        vertex(46,285);
        vertex(28,285);
        vertex(27,280);
        vertex(17,277);
        endShape(CLOSE);

      fill(205,121,178);
        beginShape();
        vertex(165,271);
        vertex(179,257);
        vertex(211,253);
        vertex(213,261);
        vertex(233,263);
        vertex(242,276);
        vertex(210,274);
        vertex(196,268);
        endShape(CLOSE);

      fill(205,121,178);
        beginShape();
        vertex(473,209);
        vertex(499,224);
        vertex(528,228);
        vertex(567,244);
        vertex(590,251);
        vertex(590,278);
        vertex(573,281);
        vertex(549,268);
        vertex(519,267);
        vertex(492,256);
        vertex(472,237);
        vertex(466,219);
        endShape(CLOSE);

      fill(54,31,86);
       rect(0,575,600,50);
  //Tree
      fill(54,31,86);
      rect(30,540,6,35);
      if (mouseX > 15 & mouseX < 45) {
          fill(54,31,86);
          ellipse(33,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(33,540,20,40);}
      rect(60,550,6,25);
      if (mouseX > 45 & mouseX < 75) {
          fill(54,31,86);
          ellipse(63,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(63,550,20,40);} 
      rect(120,545,6,30);
        if (mouseX > 105 & mouseX < 135) {
          fill(54,31,86);
          ellipse(123,535,20,40);
          } else{
            fill(54,31,86);
            ellipse(123,545,20,40);}
      rect(150,550,6,25);
          if (mouseX > 135 & mouseX < 165) {
          fill(54,31,86);
          ellipse(153,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(153,550,20,40);}
      rect(180,540,6,35);
          if (mouseX > 165 & mouseX < 195) {
          fill(54,31,86);
          ellipse(183,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(183,540,20,40);}
      rect(210,550,6,25);
          if (mouseX > 195 & mouseX < 225) {
          fill(54,31,86);
          ellipse(213,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(213,550,20,40);}
      rect(240,550,6,25);
          if (mouseX > 225 & mouseX < 255) {
          fill(54,31,86);
          ellipse(243,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(243,550,20,40);}
      rect(300,550,6,25);
          if (mouseX > 285 & mouseX < 315) {
          fill(54,31,86);
          ellipse(303,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(303,550,20,40);}
      rect(330,550,6,25);
          if (mouseX > 315 & mouseX < 345) {
          fill(54,31,86);
          ellipse(333,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(333,550,20,40);}
      rect(360,550,6,25);
          if (mouseX > 345 & mouseX < 375) {
          fill(54,31,86);
          ellipse(363,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(363,550,20,40);}
      rect(390,540,6,35);
          if (mouseX > 375 & mouseX < 405) {
          fill(54,31,86);
          ellipse(393,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(393,540,20,40);}
      rect(420,550,6,25);
          if (mouseX > 405 & mouseX < 435) {
          fill(54,31,86);
          ellipse(423,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(423,550,20,40);}
      rect(450,550,6,25);
          if (mouseX > 435 & mouseX < 465) {
          fill(54,31,86);
          ellipse(453,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(453,550,20,40);}
      rect(510,540,6,35);
          if (mouseX > 495 & mouseX < 525) {
          fill(54,31,86);
          ellipse(513,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(513,540,20,40);}
      rect(540,550,6,25);
          if (mouseX > 525 & mouseX < 555) {
          fill(54,31,86);
          ellipse(543,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(543,550,20,40);}
      rect(570,550,6,25);
          if (mouseX > 555 & mouseX < 585) {
          fill(54,31,86);
          ellipse(573,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(573,550,20,40);
            }
}

For this project, I tried to incorporate if statements into the code to create more motion. The most difficult part was getting the trees to move up and down, but the problem was solved with the help of if/else statements.

Austin Treu – Looking Outwards-03

Robots in architecture is a fascinating concept to me. People and robots working together to achieve the same goal portrays the potential for a great future for both humans and machines. The development of robots to improve human capabilities in art and life will continue to grow exponentially in number and quality, which is incredible to think about, considering all of the possibilities that machines present to us. If you take a look from the perspective of sci-fi fiction, there is a possibility for it to all come crashing down on us as AI becomes integrated into most designs, but I believe that that is unlikely because of projects like these where the people and robots function as partners.

Miranda Luong-Project-03-Dynamic Drawing

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-03-Dynamic Drawing
*/


function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(170, 190, 200);
    noStroke();

    // Translate the origin point to the center of the screen
	translate(width/2, height/2);

    // Size of circles 
    var size = 60
    //position of circles 
    var pos = 1
    //color of all shapes
    var color = 0
	

	// Restrict mouseX and mouse Y within a 400 x 400 square 
	// positioned at center of canvas
    var mX = max(min(mouseX, 520), 120);
    var mY = max(min(mouseY, 440),40);

    // Change attributes of circles according to distance
    // of mouse from center
	size = dist(320,240,mX,mY) * 60/200;
	pos = dist(320,240,mX,mY) / 250;
	color = dist(320,240,mX,mY);

    // North circle
	var northY= -150*pos;

    fill(color,100,100);
    ellipse(0,-150*pos,size,size);

    // Northeast circle
 
    var northeastX = 150/sqrt(2)*pos;
	var northeastY = -150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(northeastX,northeastY,size,size);

	// East circle

	var eastX = 150*pos;

	fill(color,100,100);
	ellipse(eastX,0,size,size);

	// Southeast circle
	var southeastX = 150/sqrt(2)*pos;
	var southeastY = 150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(southeastX,southeastY,size,size);

	// South circle

	var southY = 150*pos;

	fill(color,100,100);
	ellipse(0,southY,size,size);

	// Southwest circle

	var southwestX = -150/sqrt(2)*pos;
	var southwestY = 150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(southwestX,southwestY,size,size);

	// West circle

	var westX = -150*pos;

	fill(color,100,100);
	ellipse(westX,0,size,size);

	// Northwest circle

	var northwestX = -(150/sqrt(2))*pos;
	var northwestY = -(150/sqrt(2))*pos;

	fill(color,100,100);
	ellipse(northwestX,northwestY,size,size);

	// Center square

	// Change angle of square's rotation according to distance
    // of mouse from center
	angle = dist(320,240,mX,mY)*.01;
    
    // Use cosine to get a smooth CW and CCW motion
  	var c = cos(angle);

    fill(color,100,100);
    rectMode(CENTER);
    rotate(c);
    rect(0,0,60,60);
	
}

I tried to challenge myself but coding movements that radiated from the center. After changing the origin of the canvas to the center, I wonder if it’s possible to set the canvas to a normal cartesian grid. I also wonder as to why mouseX and mouseY do not follow my new grid system even after I changed the origin.

Miranda Luong-Looking Outwards-03

A frontal view of NABEKIESAV, from the artist’s own portfolio site.

NABEKIESAV (2013-2014) is a 3D print that belongs to a larger series of three “strawberry sculptures” including AELBWARTS and NABEKIARTS. Crafted by Nick Ervinck, this series is inspired by his exchange with Dr. A.P.M. Ton den Nijs, a scientist at the Plant Breeding Department of Wageningen University. NABEKIESAV carries Dr. Nijs’ rot-resistant strawberry hybridization process to the extreme. I admire the commanding presence of this utopian strawberry sculpture. From the shape of its vase to the blooming quality of its leaves, it looks as if it may come to life. Why I admire this aspect is because it goes to show the complexity of Ervinck’s thoughts on fruit hybridization. In addition to qualities that make NABEKIESAV seemingly come to life, are sculptural contradictions that make for an impactful experience. While there is something purely beautiful and poetic about the form and texture of his sculpture, Ervinck writes that his sculpture “resembles a horned demon emerging from its cave.” He has transformed the simple strawberry into something surreal and out of ordinary, a manifestation of his own thoughts on fruit hybridization. While I can’t really guess the algorithms utilized to 3d print his sculpture, Ervinck’s final form well depicts the artist’s thoughts on an important topic of today that is the manipulation of the purest forms of nature.

Alessandra Fleck – Looking Outwards – 03

For this entry I wanted to look at an architect that takes parametric design methodology into high detail in her architectural designs as well as interpretive work. The Parametric Space Exhibition brought together by Zaha Hadid Architects and motion designers, Wahlberg. These ceiling embedded mechanisms move both physically and with their illuminance patterns according to the movement of those entering the exhibit. The information of those moving through the exhibit are taken from two laser scanners in the room. This information is then translated into parabolic motion in large cylinders driving the motion of the ceiling membrane which also corresponds to the RGB light reaction to the different heights and movements of the cylinders. The light is emitted in particle form, implying a sort of mesh to point grid algorithm that transcribes a motion, project it onto a mesh grid, then maps points onto key intersecting regions.

(The image above shows how the different mechanisms in the ceiling react in light to the visitor.)

The software and algorithms utilized in the project are not entirely specified. However, I believe it is a combination of grasshopper script mapped onto a 3D parabolic generated model in Rhino.

(The RGB particle light show is mapped onto the membrane of the ceiling.)

For more information:

Parametric Space by Zaha Hadid Architects

https://www.archdaily.com/396923/parametric-space-zaha-hadid-architects-kollision-cavi-wahlberg

Jacky Tian’s Project 03

sketch

var unit = 50
var angle = 0
function setup() {
    createCanvas(640, 480);
    
}


function draw() {
    background(mouseX * 0.5, 70, 120);

    var len = 480 - mouseX
    var sta = 640 - mouseY 
    
    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;


}

For this project, the 4 dynamic aspects of image elements include size, position, angle and color. The lines changes its position and length based on the mouse’s position. Also, there is a square rotating around the mouse and it spins faster as it move towards the right side.

Han Yu Project 3 Dynamic Drawing

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-03


function setup() {
    createCanvas(640,480);  
}

function draw() {
	noStroke();
	var newx = 1000;
	var newy = 1000;

	background(0);
// changing colors of background
	fill(255,mouseX/3,mouseY/3)
	rect(0,0,1000,1000)
	
// spinning background
	push();
	translate(mouseX,mouseY);
	fill(255,255,255,70)
	rotate(mouseX);
	triangle(0,0,newx-350,newy,newy,newx-350);
	triangle(0,0,-newx+350,-newy,-newy,-newx+350);
	triangle(0,0,-newx/2,newy,newy,newx+90000000);
	triangle(0,0,-newx,newy-150,-150000000,-newx);
	triangle(0,0,newx/2,-newy,-newy,-newx-90000000);
	triangle(0,0,newx,-newy+150,150000000,newx);
	pop();

// the moving pin
	distance=int(dist(width/2,height/2,mouseX,mouseY))
	push();
	translate(mouseX,mouseY)
	rotate((mouseX+mouseY)/50)
	fill(150+distance*2,254,220+distance,90);
	rectMode(CENTER);
	ellipse(0,0,350-distance,350-distance,30);
	rect(0,0,100-distance*2,250-distance*2);
	rect(0,0,250-distance*2,100-distance*2);
	pop();

}

I started out this project trying to make something hypnotizing. I also want my project to be more interactive so I added another element to make the whole picture following the mouse. The pin that follows the mouse was inspired by the kaleidoscope. Overall I think this project is very challenging but I learned a lot from working on it.

Alexandra Kaplan -Project 3

/* Alexandra Kaplan
Section C
aekaplan@andrew.cmu.edu
Project 03 */


var bigCircleR = 150; //gold part of pocket watch radius
var smallCircleR = 140; // face part of pocket watch radius
var centerCircleR = 7; //center of hands radius
var topEllipseW = 20; //width of top ellipse
var topEllipseH = 15; //height of top ellipse
var minuteHand = smallCircleR / 4; // starting location of minute hand


function setup(){
	createCanvas(640, 480);
}

function draw(){
	background(30, 20, 80);
	
	//text
    var boundedTextSize = min(mouseX / 5, width);
    fill(mouseX / 3, mouseX / 2, mouseX + 150);
    textSize(boundedTextSize);
    textAlign(CENTER);
    text('you are getting sleepy', width / 2, height / 2 + 100);


	var circleX = 0; //x starting position of pocket watch
    var circleY = height / 1.3; // y starting position of pocket watch
    var swing = mouseX; // when mouse x is positive, swings left, when mouseX is negative, swings right

    if (mouseX > 90){
        swing = -swing - 180; //watch changes direction so it doesn't go off the canvas
    }
    if (mouseX > 270){
        swing = mouseX + 360; //watch changes direction so it doesn't go off the canvas
    }
    if (mouseX > 450){
        swing = -mouseX - 540; //watch changes direction so it doesn't go off the canvas
    }
    if (mouseX > 630){
        swing = mouseX + 720; //watch changes direction so it doesn't go off the canvas
    }
    
    print(mouseX); //to help me debug
    
	push();

    translate(width / 2, 0); //translates origin to center of width

	rotate(radians(-swing)); //rotates everything around translated origin (0,0)

	strokeWeight(5);
    stroke(200, 150, 30);
	line(0, 0, circleX, circleY);//line connecting watch to origin

	strokeWeight(0);

	fill(200, 150, 30);
	ellipse(circleX, circleY, bigCircleR, bigCircleR); //draws outside of watch
    
  
	fill(200, 150, 30);
	ellipse(circleX , circleY - bigCircleR / 2, topEllipseW, topEllipseH);//draws top nubbin of watch
	
	
	fill(255);
	ellipse(circleX, circleY, smallCircleR, smallCircleR); //draws face of watch
	
	fill(0);
	ellipse(circleX, circleY, centerCircleR, centerCircleR); // draws center of watch

    strokeWeight(4);
    stroke(0);
	line(circleX, circleY, 30, circleY - 30); //hour hand

	push();
	translate(circleX, circleY); //translates origin to center of watch
	line(0, 0, minuteHand, minuteHand); //draws minute hand
	pop();

  
    pop();


}

This project has definitely been the most challenging for me so far. I enjoyed the premise of it, things just got really difficult when I ran into the problem of how to make the pendulum stop spinning and change directions to swing the other way. Thank you so much to the TA’s who helped me on how I could think through the problem!

Project 03- Dynamic Drawing

sketch

I had a good time coding these drawings and loved the creative freedom.

Julie Choi – Project 03 – Dynamic Drawing

installation drawing

/*Julie Choi
15-104 Section C
jjchoi@andrew.cmu.edu
Project-03
*/

// declare necessary variables
var ballSizeB = 10
var ballX = 320;
var ballY = 240;
var x = 50
var angle = 0;
var angle2 = 0;
var starColor = 255;



function setup() {
	// setup canvas
    createCanvas(640, 480);
    // draw background in setup so that stars leave marks
    background(0);
}

function draw() {
	//background(0);
    var ballSizeA = 80;
    ballSizeA = constrain(ballSizeA, 1, 400);
    
    //cover the background of the inside of the planets black
    fill(0);
    noStroke();
    ellipse(width / 2, height / 2, 300, 300);
    
    //drawing yellow installation
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle2));
    noStroke();
    fill(starColor);
    ellipse(x, x, 5, 5);
    pop();
    angle2 = angle2 + 5; 
    x = mouseY - 120;

    strokeWeight(3);
    stroke(255);
    fill(253, 255, 55);
    ellipse(ballX, ballY, ballSizeA, ballSizeA);

 	// draw colored planets
    push();
    noStroke();
    translate(width/2, height/2);
    rotate(radians(angle));
    fill(55, 255, 210);
    ellipse(0, -150, ballSizeB, ballSizeB);
    fill(55, 130, 255);
    ellipse(-150, 0, ballSizeB, ballSizeB);
    fill(255, 182, 55);
    ellipse(150, 0, ballSizeB, ballSizeB);
    fill(255, 55, 79);
    ellipse(0, 150, ballSizeB, ballSizeB);
    pop();
    angle = angle + 1.5;
    
    //text in the moon
    fill(0);
    noStroke();
	textSize(25);
	textFont('didot');
	text('moon', width / 2.22, height / 1.95);
}

My third project is an installation drawing that users can interact with. When you move the mouse, the rotating stars change radius and starting point to draw stars in space. Although I experienced some obstacles while using the rotation function, I enjoyed doing this project because I also learned a lot.