Project-03-Dynamic-Drawing

dynamicdrawing

function setup() {
    createCanvas(600, 450,);
    background(220);
}
function draw() {
    var x = mouseX
    var y = mouseY
    var g = 0
    var b = 0
    //background
    background(0)

    push();
    translate(mouseX-750,0)
    stroke(255,)
    strokeWeight(2)
    scale(3,1)
    line(0,20,50,20)
    line(120,40,130,40)
    line(60,50,130,50)
    line(300,80,350,80)
    line(300,90,380,90)
    line(100,100,170,100)
    line(230,130,280,130)
    line(200,160,210,160)
    line(40,170,90,170)
    line(400,200,420,200)
    line(340,220,370,220)
    line(220,230,310,230)
    line(420,270,440,270)
    line(80,280,180,280)
    line(160,290,150,290)
    line(370,320,420,320)
    line(10,330,90,330)
    line(140,350,170,350)
    line(40,370,60,370)
    line(320,390,330,390)
    line(80,400,120,400)
    line(210,430,260,430)
    line(400,440,450,440)
    pop();
    // spinning arcs
    strokeWeight(1+y/50);
    noFill();
    //transformations
    translate(300,225);
    rotate(radians(x/2));
    cony = max(y,.5);
    scale(cony/200);
    
    noStroke();
    fill(0);
    circle(0,0,270);
    g = g + x/3
    b = b + x/8
    //arcs (smallest to largest)
    noFill();
    stroke(255,0+g,0+b);
      arc(0,0,140,140,-PI/4,4*PI/5);
    rotate(radians(x/2));
      arc(0,0,180,180,PI/2,4*PI/3);
    rotate(radians(x/5));
      arc(0,0,200,200,PI,9*PI/4);
    rotate(radians(x/7));
      arc(0,0,270,270,11*PI/6,5*PI/6);
}

I incorporated two animated ideas into one which creates a different dynamic on motion, one moving horizontally and the other moving within itself while changing size position and color.

Leave a Reply