How can I display a circular portion of an image in a specific place only?

edited May 2016 in How To...

I wrote something that would display planets in motion. I wanted the earth to show rotation, my first idea was to have a rectangular map of earth move across it, but I don't know how to do this without it covering the sun and stars also.

This is a simple version without the map, there will be objects behind and in front of the image I want to display. image alt text

My next idea would be to use an actual rotating 3d model, or to use an animated sprite. Is there an easy way to achieve this without using those options?

Tagged:

Answers

  • Easy way, not really... If you are not aiming at realism, you can try to mask the image of the Earth with a circular shape, on a separate PGraphic.

  • In 2D the only way to achieve what you want is simply to change the order you draw the ellipses e.g.

    float angleRoundSun = 0;
    float orbY = 20;
    float orbX = 180;
    
    void setup() {
      size(400, 400);
      noStroke();
    }
    
    void draw() {
      background(16);
      // Increment the angle round sun
      angleRoundSun += 0.01;
      // Keep it in range 0-2Pi radians (0-360 degrees)
      if (angleRoundSun > TWO_PI)
        angleRoundSun -= TWO_PI;
      float px = 200 + orbX * cos(angleRoundSun);
      float py = 200 + orbY * sin(angleRoundSun);
      if (angleRoundSun < PI) {
        // Draw sun first
        fill(200, 200, 0);
        ellipse(200, 200, 140, 140);
        fill(0, 0, 200);
        ellipse(px, py, 30, 30);
      } else {
        // Draw earth first
        fill(0, 0, 200);
        ellipse(px, py, 30, 30);
        fill(200, 200, 0);
        ellipse(200, 200, 140, 140);
      }
    }
    

    My next idea would be to use an actual rotating 3d model, or to use an animated sprite. Is there an easy way to achieve this without using those options?

    It is actually easier in 3D if you use the Shapes3D library (install through the Tools | Add tool option). Have a look at the Earth example that comes with the library.

  • edited September 2014

    Animated 3D:

    int w=600, h=300;
    float sunSize = 30;
    PVector sun;
    Orbiting earth;
    Orbiting moon;
    PVector[] stars;
    
    void setup() {
        size(w, h, P3D);
    
        sun = new PVector(w/2, h/2);
        earth = new Orbiting(sun, w/5, 0.02, sunSize/2);
        moon = new Orbiting(earth.pos, earth.dist/4, 0.05, sunSize/5);
    
        stars = new PVector[100];
        for (int i=0; i < stars.length; i++)
            stars[i] = new PVector(random(w), random(h), random(-h,h*2));
    }
    
    void draw() {
        background(50);
        pushMatrix();
        rotateX(map(mouseY, 0, h, 0, HALF_PI));
        translate(0,-50,-100);
            stroke(255);
            for (PVector star : stars)
                point(star.x, star.y, star.z);
            noFill();
            stroke(100);
            circleAt(sun, earth.dist);
            circleAt(earth.pos, moon.dist);
            noStroke();
            fill(#EEEE00);
            sphereAt(sun, sunSize);
            pointLight(150,150,150, w/2, h/2, 0);
            fill(#5555FF);
            earth.update();
            fill(#EEEEEE);
            moon.update();
        popMatrix();
    }
    
    void circleAt(PVector pos, float r) {
        ellipse(pos.x, pos.y, r+r, r+r);
    }
    
    void sphereAt(PVector pos, float size) {
        pushMatrix();
        translate(pos.x, pos.y);
        sphere(size);
        popMatrix();
    }
    
    class Orbiting {
    
        PVector anchor, pos;
        float t, vel, dist, size;
    
        Orbiting(PVector anchor, float dist, float vel, float size) {
            this.anchor = anchor;
            this.size = size;
            this.dist = dist;
            this.vel = vel;
            pos = new PVector();
            t = 0;
        }
    
        void update() {
            t += vel;
            pos.x = anchor.x + dist * cos(t);
            pos.y = anchor.y + dist * sin(t);
            sphereAt(pos, size);
        }
    }
    
Sign In or Register to comment.