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

Tieofdoom

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?

Tieofdoom

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.

Tieofdoom

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

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.

GoToLoop

http://forum.processing.org/two/discussion/8291/rollover-for-animation

asimes

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

Chrisir

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

Chrisir

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

upon touching the circle

zumba29

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);


};

kfrajer

@zumba29

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

Kf

kfrajer

@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;
}

koogs

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

kfrajer

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

Kf