​

function preload() {

  // preload() runs once

  img = loadImage('mia_ferris.png');

  imgbat = loadImage('batgirl.png');

}

​

function setup() {

  createCanvas(400, 400);

}

​

let a = 0, sa = 0;

const FSZ = 130;

const SSW = 80;

const SSH = 30;

function draw() {

  sa += map(mouseY,0,height,-.1,.1);

  a += map(mouseX,0,width,-.1,.1);

  noStroke();

  fill(128,128,255);

  rect(0,0,width,height);

  fill(128,255,128);

  rect(0,300,width,100);  

  stroke(0);

  strokeWeight(3);

  noFill();

  push();

  translate(150,150);

  circle(0,0,FSZ*2);

​

  rect(-20,0,40,180);

  for(let i = 0; i < 8; i++){

     let aa = sa + (2 * PI*i/8);

     line(0,0,cos(aa)*FSZ,sin(aa)*FSZ); 

     push();

    translate(cos(aa)*FSZ,sin(aa)*FSZ);

    if(i == 0) {

     image(img, -15, -20, 30, 40); 

    }

      fill(255,255,0);

     rect(-10,10,20,20);

     pop();

  }

  pop();

  push();

  translate(300,350);

  ellipse(0,0,SSW*2,SSH*2);

​

  rect(-20,0,40,20);

  for(let i = 0; i < 8; i++){

     let aa = a + (2 * PI*i/8);

     line(0,0,cos(aa)*SSW,sin(aa)*SSH); 

     push();

    translate(cos(aa)*SSW,sin(aa)*SSH);

    if(i == 0) {

     image(imgbat, -25, -25, 30, 40); 

    }

      fill(200,128,200);

     ellipse(-10,10,20,20);

     pop();

  }

       push();

    translate(cos(a)*SSW,sin(a)*SSH);

     image(imgbat, -25, -20, 30, 40); 

​

  pop();

}