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
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
Then you use translate () 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()
Do you mean that the shuttle covers the dot when flying over it
OR it makes slalom around the dots?
Thank you for your reply 
Your question was already informative
Yes I would like the shuttle to slalom over the circles(obstacles).
Oh great, this was very helpful.
Thank ou so much.
Look at the function lerp() in the reference
You could let the shuffle move to the mouse Position with the lerp() command
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);
}
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);
}
That won’t work in setup ()
Instead say translate… in draw() before shape
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… )
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?
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
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
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
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?)
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;
}
//
Chrisir!
How exciting.
Thank you for teaching me.
Will be practicing this a lot now.