Create an object that is repeatedly growing and shrinking in size on the spot

edited May 2015 in How To...

Been tasked with a small job of creating a circle that grows in size to a certain size, and then shrinks back into a dot.

Along with this, another object in the program, upon touching the circle, will make the circle disappear and reappear in another random area of the screen, and the circle would still be looping its shrinking and growing. Each time the circle disappears, a tally keeps track of how many times it happens.

At first I thought loops would help design the circle, but I can only get the circle to grow to the required size, but not shrink back down to diameter 1. Can anyone help me?

Tagged:

Answers

  • Addendum: I have the other object in the program animating just fine, but I have no idea how to make the object and the circle interact with each other.

  • I am not looking for code by the way, but I would like directions to understanding the logic of how to design the code. I feel like loops are the right answer, but so far I only know how to make the circle grow, or shrink, but not continuously loop between growing and shrinking.

  • _vk_vk
    edited May 2015 Answer ✓

    Have a look here for the "pulsing" effect.

    You describe a triangular wave, but maybe another kind of wave can be used also.

    http://forum.processing.org/two/discussion/7147/some-simple-pulse-equations-using-trig#latest

    or a cleaner triangle wave:

    http://forum.processing.org/two/discussion/comment/40035/#Comment_40035

    For the others questions code would be great for getting help. Generally speaking:

    • It looks like a job for classes (OOP).

    • The interaction seems to be a collision detection between the two objects.

  • edited May 2015 Answer ✓

    You have a few requirements, maybe work on just the growing / shrinking before tackling the other ones

    If you are drawing an ellipse() (lets say its position is fixed) where its size is controlled with a variable like this:

    ellipse(100, 200, unitSize, unitSize);

    then it sounds like you understand that making unitSize's value larger will make the ellipse() grow. The problem is that in order to know whether or not you should make unitSize's value larger or smaller requires state information. Add a boolean variable which represents the state, I'm going to call that shouldGrow

    When the sketch starts shouldGrow should be true. Every frame check if shouldGrow is true or false. If it is true then make unitSize's value larger and if it is false then make unitSize's value smaller. When unitSize's value is large enough then make shouldGrow false. When shrinking is occurring (because shouldGrow is false) and unitSize's value becomes small enough make shoudGrow true

    Post some code when you have that working (or an attempt if it is confusing) and then it will be easier for people to guide you through the other requirements

  • Answer ✓

    yeah, or when you add something to the size make that what you add (the Addendum as you said) be once positve and once negative

  • Answer ✓

    also the pos of the ellipse are two vars that get changed

    upon touching the circle

  • edited November 2016

    How about this? I want to make it grow fast and then shrink slowly back and then repeat. here is my code.

    draw = function() {
    
    background(255, 255, 255);
    noStroke();
    var x = mouseX;
    var y = mouseY;
    var faceSize = 120;
    var eyeSize = faceSize/8;
    
    // ears
    var earSize=faceSize*1/2;
    fill(89, 52, 17);
    ellipse(x-faceSize*2/5, y-faceSize*2/5, earSize, earSize);
    ellipse(x+faceSize*2/5, y-faceSize*2/5, earSize, earSize);
    
    // face
    fill(163, 113, 5);
    ellipse(x, y, faceSize, faceSize);
    
    
    
    //eyes 
    fill(0, 0, 0);
    ellipse(x-faceSize/4, y-faceSize/8, eyeSize, eyeSize);
    ellipse(x+faceSize/4, y-faceSize/8, eyeSize, eyeSize);
    
    
    
    //nose
    fill(89, 52, 20);
    ellipse(x, y+faceSize/20, faceSize*4/15, faceSize/5);
    //mouth
    fill(0, 0, 0);
    ellipse(x, y+faceSize/4, faceSize*1/1.5, faceSize/5);
    fill(255, 255, 255);
    triangle(x-faceSize/4,y+faceSize/6,x-faceSize/8,y+faceSize/2.5,x,y+faceSize/6.75);
    triangle(x+faceSize/4,y+faceSize/6,x+faceSize/8,y+faceSize/2.5,x,y+faceSize/6.75);
    
    
    };
    
  • @zumba29

    Format your code. Edit your post, select your code and hit ctrl+o.

    Kf

  • @zumba29

    Have a look at this reference and then check the sample code below. I hope this helps,

    Kf

    http://p5js.org/reference/#/p5/createGraphics

    * 
      Pressing Control-R will render this p5.js sketch.
      p5.js, p5.dom.js, and p5.sound.js libraries are already loaded.
      To load more libraries/resources, use the "HTML" menu.
      To upload resources (including scripts), use the "Files" menu. 
    */
    
      var i = 0; 
      var pg;
      var pgwidth=400;
      var pgheight=400;
      var currZm=1.0;   //Current zoom
    
      // this is run once.   
      function setup() {  
    
        // set the size of the canvas inside the window.
        createCanvas(700,600);
    
        // set the background color
        background(255);
    
        // smooth edges
        smooth();
    
        // limit the number of frames per second
        frameRate(30);
    
        // set the width of the line. 
        strokeWeight(12);
        pg = createGraphics(pgwidth,pgheight);
      } 
    
    
    draw = function() {
    
    background(255, 255, 255);
    
    var x = 100;//mouseX;
    var y = 100;//mouseY;
    var faceSize = 120;
    var eyeSize = faceSize/8;
    
    pg.background(255, 255, 255);
    pg.stroke(0);
    
    // ears
    var earSize=faceSize*1/2;
    pg.fill(89, 52, 17);
    pg.ellipse(x-faceSize*2/5, y-faceSize*2/5, earSize, earSize);
    pg.ellipse(x+faceSize*2/5, y-faceSize*2/5, earSize, earSize);
    
    // face
    pg.fill(163, 113, 5);
    pg.ellipse(x, y, faceSize, faceSize);
    
    
    
    //eyes 
    fill(0, 0, 0);
    pg.ellipse(x-faceSize/4, y-faceSize/8, eyeSize, eyeSize);
    pg.ellipse(x+faceSize/4, y-faceSize/8, eyeSize, eyeSize);
    
    
    
    //nose
    pg.fill(89, 52, 20);
    pg.ellipse(x, y+faceSize/20, faceSize*4/15, faceSize/5);
    //mouth
    pg.fill(0, 0, 0);
    pg.ellipse(x, y+faceSize/4, faceSize*1/1.5, faceSize/5);
    pg.fill(255, 255, 255);
    pg.triangle(x-faceSize/4,y+faceSize/6,x-faceSize/8,y+faceSize/2.5,x,y+faceSize/6.75);
    pg.triangle(x+faceSize/4,y+faceSize/6,x+faceSize/8,y+faceSize/2.5,x,y+faceSize/6.75);
    
    
    
     translate(-pgwidth*currZm/2.0,-pgheight*currZm/2.0);
     image(pg, mouseX,mouseY,pgwidth*currZm,pgheight*currZm);
    
    
    
     //Reset zoom if lower than 50%
     if(currZm<0.5)
       currZm=1.0;
    };
    
    function mouseClicked() {
      currZm=currZm*0.95;
    }
    
  • Three things:

    A) he specifically wasn't asking for code, just hints

    B) he probably didn't want JavaScript

    C) he probably solved the problem himself in the 18 months between him asking the question and you answering

  • @koogs I was answering zumba29's question. I only focus in recent posts BTW. No clue where you are coming from.

    Kf

Sign In or Register to comment.