# How to create a function out of a shape

**URL:** <https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911>\
**Category:** Coding Questions\
**Created:** [September 17, 2020, 4:48am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911 "2020-09-17T04:48:09Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 17, 2020, 4:48am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/1 "2020-09-17T04:48:09Z")

</div>

Hi  
I would like to move the ‘shuttle’ over and under the ellipses with a mouse command at first.  
Where could I find a tutorial video for that please?

I was wondering if the 'shuttle could become a ‘shuttleShape’, as a function.

Would it help me later on if I decide to just make the shuttle move by itself?

I also would like to create a “tail” attached to the shuttle. the design isn’t finished.

Thanks  
Paula

 ![Shuttleshape.code.4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c0e1d059a61cee03cd659ce42ff5bcf1c95374bb.png)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 17, 2020, 10:50am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/2 "2020-09-17T10:50:59Z")

</div>

Hi @eco.pm2  
To make a function of the shuttle just take the beginShape to endShape out of the draw() loop and place it in a function like void shuttle(){}  
You can also include some line-yarns there.  
You need to use a [PShape](https://processing.org/reference/createShape_.html)  
Then you use [translate ()](https://processing.org/reference/translate_.html) to move it with mouseX mouseY with shape() in draw().  
To draw it under or above the ellipses depends on the order you write the objects in draw()

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 17, 2020, 11:45am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/3 "2020-09-17T11:45:56Z")

</div>

> [@eco.pm2](#):
>
> move the ‘shuttle’ over and under the ellipses with a mouse command

Do you mean that the shuttle covers the dot when flying over it

OR it makes slalom around the dots?

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 18, 2020, 12:01am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/4 "2020-09-18T00:01:29Z")

</div>

Thank you for your reply 🙂

Your question was already informative  
Yes I would like the shuttle to slalom over the circles(obstacles).

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 18, 2020, 12:03am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/5 "2020-09-18T00:03:00Z")

</div>

Oh great, this was very helpful.  
Thank ou so much.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 19, 2020, 4:40pm UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/6 "2020-09-19T16:40:30Z")

</div>

Look at the function lerp() in the reference

You could let the shuffle move to the mouse Position with the lerp() command

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 22, 2020, 2:19am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/7 "2020-09-22T02:19:16Z")

</div>

Thanks Chrisir  
With a friend, I managed to get to use the mouse(HAND), noCursor(). That was great because you wouldn’t see the cursor and you are able to move the shuttle over and under the elipse, or even on it, but it was ok.  
However, I tried to copy the project from an email he sent to me and when I paste, it tells me that there is a mistake.  
But there wasn’t.  
We used a different path than using transition, suggested by Noel. For some reason I also couldn’t work out transition properly… But here it is.

function setup() {

createCanvas(600, 600);

noCursor();

noStroke();

}

function draw() {

background (255); // erase the window to the background colour

fill (0, 255, 255);

ellipse (150, 100, 20, 20);

ellipse (200, 260, 20, 20);

ellipse (270, 100, 20, 20);

ellipse (350, 260, 20, 20);

ellipse (390, 100, 20, 20);

fill (255, 0, 255);

drawShuttle (mouseX, mouseY); // draw the shuttle at the mouse x,y position

}

function drawShuttle( x, y) { // function to draw my shape

beginShape();

```
vertex(-20 + x, 10 + y);

vertex(10 + x, -20 + y);

vertex(10 + x, -10 + y);

vertex(20 + x, -10 + y);

vertex(-10 + x, 20 + y);

vertex(-10 + x, 10 + y);

```

endShape(CLOSE);

}

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 22, 2020, 2:37am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/8 "2020-09-22T02:37:22Z")

</div>

Hi Noel  
I can’t tell why is that the shuttle isn’t moving.

PShape s;

void setup()  
{  
size (500,400);  
background(167);

s = createShape();  
s.beginShape();

s.stroke(255,80,244);  
s.fill(203,68,99);  
s.strokeWeight(2);  
s.translate( mouseX, mouseY );

s.vertex(30,140);  
s.vertex(50,140);  
s.vertex(50,160);  
s.vertex(100,110);  
s.vertex(80,110);  
s.vertex(80,90);  
s.endShape(CLOSE);  
}

void draw()  
{  
shape(s, 10, 140);

stroke(139,75,97);  
fill(95,260,61);  
strokeWeight(2);  
ellipse(150,100,20,20);  
ellipse(200,260,20,20);  
ellipse(270,100,20,20);  
ellipse(350,260,20,20);  
ellipse(390,100,20,20);  
}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 22, 2020, 5:14am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/9 "2020-09-22T05:14:10Z")

</div>

> [@eco.pm2](#):
>
> s.translate( mouseX, mouseY );

That won’t work in setup ()

Instead say translate… in draw() before shape

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 22, 2020, 8:46am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/10 "2020-09-22T08:46:56Z")

</div>

Thank you.

I should have noticed that.  
Also, if I want to post that somewhere, so a student can use it, should I use p5.js? or anything else?  
I am hoping to take the 'exercise" to a digital show soon.  
(… and will be paid from entry fee… 🙂 )

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 23, 2020, 9:59am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/11 "2020-09-23T09:59:53Z")

</div>

You can also check out [openprocessing.org](http://openprocessing.org)

There is also a class page

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 24, 2020, 2:56am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/12 "2020-09-24T02:56:09Z")

</div>

Hi Chris,  
I’m in Australia.  
I’m just starting to study Scripting with SAE Byron Bay.  
I chose to use Processing as my main tool.

I am looking for a person who could help me a bit further, as I need to make questions constantly at this stage.

Is this Hub the best way to ask questions constantly?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2020, 4:58am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/13 "2020-09-24T04:58:50Z")

</div>

To ask questions use the forum - people are fantastic here.

For showing Sketches that are finished use the gallery section here or openprocessing

For Sketches with images and sounds you can also upload at github

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 26, 2020, 1:35pm UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/14 "2020-09-26T13:35:10Z")

</div>

> [@eco.pm2](#):
>
> I should have noticed that.

You can use ctrl-t in processing (not the forum) to get auto-indents. Use it prior to posting.

When using translate( mouseX, mouseY ); you want to place your shape at 0,0 because here is the mouse: shape(s, 0, 0); or even shape(s, -60, -100); to place the center of the shape over the mouse.

You can surround this section with pushMatrix and popMatrix to isolate it from the rest of the Sketch OR place the section at the end of draw(), because when draw() restarts 60 times per second, the Matrix gets resetted,

**New version 1 : Sketch with translate to move the shape**

```auto

PShape s;

void setup() {
  size (500, 400);
  background(167);

  s = createShape();
  s.beginShape();

  s.stroke(255, 80, 244);
  s.fill(203, 68, 99);
  s.strokeWeight(2);
  s.vertex(30, 140);
  s.vertex(50, 140);
  s.vertex(50, 160);
  s.vertex(100, 110);
  s.vertex(80, 110);
  s.vertex(80, 90);
  s.endShape(CLOSE);
}

void draw() {
  background(167);

  stroke(139, 75, 97);
  fill(95, 260, 61);
  strokeWeight(2);
  ellipse(150, 100, 20, 20);
  ellipse(200, 260, 20, 20);
  ellipse(270, 100, 20, 20);
  ellipse(350, 260, 20, 20);
  ellipse(390, 100, 20, 20);

  translate( mouseX, mouseY );
   shape(s, -60, -100);

}

```

**New version 2**

New version with an array for the points

```auto

PShape s;
PVector[] list = new PVector[5];

void setup() {
  size (500, 400);
  background(167);

  for (int i=0; i<3; i++) {
    list[i] = new PVector ( 150 + i*110, 100);
  }
  for (int i=3; i<list.length; i++) {
    list[i] = new PVector ( 150 + (i-3)*110, 260);
  }

  s = createShape();
  s.beginShape();

  s.stroke(255, 80, 244);
  s.fill(203, 68, 99);
  s.strokeWeight(2);
  s.vertex(30, 140);
  s.vertex(50, 140);
  s.vertex(50, 160);
  s.vertex(100, 110);
  s.vertex(80, 110);
  s.vertex(80, 90);
  s.endShape(CLOSE);
}

void draw() {
  background(167);

  stroke(139, 75, 97);
  fill(95, 260, 61);
  strokeWeight(2);
  for (PVector pv : list ) {
    ellipse(pv.x, pv.y, 20, 20);
  }

  translate( mouseX, mouseY );
  shape(s, -60, -100);
}

```

**Here is a new version 3**

where you have to click the mouse and the shape flies to this position

Also, you have a collision check between shape and first point (can you do the check for all points?)

```auto

PShape s;
PVector[] list = new PVector[5];
float x=-30; 
float y=-70; 

// for moving: 
float newX, newY; 
boolean move=false; 
float t=0; 

//---------------------------------------------------

void setup() {
  size (500, 400);
  background(167);

  // make point array 
  for (int i=0; i<3; i++) {
    list[i] = new PVector ( 150 + i*110, 100);
  }
  for (int i=3; i<list.length; i++) {
    list[i] = new PVector ( 150 + (i-3)*110, 260);
  }
  // make shape
  s = createShape();
  s.beginShape();

  s.stroke(255, 80, 244);
  s.fill(203, 68, 99);
  s.strokeWeight(2);
  s.vertex(30, 140);
  s.vertex(50, 140);
  s.vertex(50, 160);
  s.vertex(100, 110);
  s.vertex(80, 110);
  s.vertex(80, 90);
  s.endShape(CLOSE);
}

void draw() {
  background(167);

  stroke(139, 75, 97);
  fill(95, 260, 61);
  strokeWeight(2);
  for (PVector pv : list ) {
    ellipse(pv.x, pv.y, 20, 20);
  }

  if (move) {
    x=lerp(x, newX, t); 
    y=lerp(y, newY, t);
    t+=0.01;
    if (t>=0.99)move=false;
  }

  // translate( mouseX, mouseY );
  shape(s, x, y);

  if (dist(x+60, y+110, list[0].x, list[0].y) < 32) {
    println("hit");
  }
}

void mousePressed() {
  newX=mouseX-60;
  newY=mouseY-110;
  move=true;
  t=0;
}
//

```

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 27, 2020, 3:12am UTC](https://discourse.processing.org/t/how-to-create-a-function-out-of-a-shape/23911/15 "2020-09-27T03:12:20Z")

</div>

Chrisir!  
How exciting.  
Thank you for teaching me.  
Will be practicing this a lot now.