In Processing: How to make a custom function move? -
i trying make 3 hot air balloons move bottom top, , have 3 clouds move right left.
i have ellipse on balloons change colors when click them mouse.
my code:
void setup() { size(500, 500); //define colors gradient background b1 = color(139, 211, 242); b2 = color(212, 221, 198); noloop(); } int y_axis = 1; int x_axis = 2; color b1, b2; void draw() { //gradient background setgradient(0, 0, 500, 500, b1, b2, y_axis); setgradient(0, 500, 540, 500, b2, b1, x_axis); balloon(); cloud(); } //cloud shape void cloud() { beginshape(); nostroke(); fill(204, 206, 207); triangle(180, 50, 195, 50, 188, 35); triangle(195, 50, 188, 65, 202, 65); fill(189, 192, 193); triangle(188, 35, 195, 50, 202, 35); triangle(180, 50, 195, 50, 188, 65); triangle(202, 65, 195, 50, 209, 50); fill(255); triangle(195, 50, 209, 50, 202, 35); triangle(215, 35, 209, 50, 222, 50); triangle(215, 65, 202, 65, 209, 50); fill(224, 231, 234); triangle(209, 50, 202, 35, 215, 35); triangle(209, 50, 215, 65, 222, 50); endshape(); } // hot air balloon shape void balloon() { fill(217, 105, 95); nostroke(); ellipse(95, 100, 90, 90); stroke(242, 191, 128); line(59, 127, 130, 127); line(59, 127, 80, 170); line(130, 127, 109, 170); beginshape(); nostroke(); fill(242, 191, 128); triangle(80, 170, 95, 170, 88, 183); fill(203, 140, 103); triangle(88, 183, 103, 183, 95, 170); fill(191, 131, 96); triangle(95, 170, 103, 183, 110, 170); fill(140, 55, 70); triangle(59, 127, 77, 127, 69, 143); triangle(85, 127, 95, 143, 105, 127); triangle(113, 127, 121, 143, 130, 127); endshape(); } //gradient background void setgradient(int x, int y, float w, float h, color b1, color b2, int axis ) { nofill(); if (axis == y_axis) { // top bottom gradient (int = y; <= y+h; i++) { float inter = map(i, y, y+h, 0, 1); color b = lerpcolor(b1, b2, inter); stroke(b); line(x, i, x+w, i); } } }
hi , welcome stackoverflow. question has multiple questions in it:
what trying make 3 hot air balloons (at different positions), move bottom top , 3 clouds (at different positions) move right left.
i ellipse on balloons change colors when click them mouse.
in future please stick 1 question @ time (so it's easier other people search in future). it's easier code when break down steps:
- 3 hot air balloons @ different positions
- move bottom top (and 3 clouds (at different positions) move right left.)
- when click ballons mouse...
- ... balloons change colors
1. different positions let's start different positions: once works one, should work more. there multiple ways write this, however, since mentioned you're new programming let's keep basic possible (although code won't elegant)
looking @ setgradient() function, must familiar defining , calling function arguments. can apply same logic balloon() function: add x,y arguments can draw balloon @ given position. calling same function different coordinates should result in multiple balloons drawing independent position. means need x,y position variables each balloon, more on later. 1 important note hard coding coordinates each shape of balloon. move on screen, need translate it, means adding or subtracting value it's current position. this:
void balloon(int x,int y) { fill(217, 105, 95); nostroke(); ellipse(x+95, y+100, 90, 90); stroke(242, 191, 128); line(x+59, y+127, x+130, y+127); line(x+59, y+127, x+80, y+170); line(x+130, y+127, x+109, y+170); beginshape(); nostroke(); fill(x+242, y+191, 128); triangle(x+80, y+170, x+95, y+170, x+88, y+183); fill(203, 140, 103); triangle(x+88, y+183, x+103, y+183, x+95, y+170); fill(191, 131, 96); triangle(x+95, y+170, x+103, y+183, x+110, y+170); fill(140, 55, 70); triangle(x+59, y+127, x+77, y+127, x+69, y+143); triangle(x+85, y+127, x+95, y+143, x+105, y+127); triangle(x+113, y+127, x+121, y+143, x+130, y+127); endshape(); } then calling balloon(mousex,mousey); in draw() make balloon follow mouse.
that's 1 way it, gets pretty tedious pretty fast. if move being drawn in 1 call ? can, using translate(), there's catch: move everything else draw after calling it. means second balloon's position relative 1st balloon's position , on. make independent, translate() 1st ballon's position 0,0, translate() again 2nd ballon's position, again, tedious. again, there's in processing that: pushmatrix()/popmatrix(). these functions allow nest coordinate system inside processing's main one. transformation (translation,rotation,scale) within pushmatrix()/popmatrix() calls independent of rest of program. imagine nesting/grouping shapes in editor illustrator/photoshop can manipulate them independently or together. loose definition. sure check out 2d transformations processing tutorial. covers in detail, including nesting shapes , making robots :)
here's how same functionality above achieved using pushmatrix()/popmatrix() , translate():
// hot air balloon shape void balloon(int x,int y) { //isolate coordinate system pushmatrix(); //translate baloon translate(x,y); fill(217, 105, 95); nostroke(); ellipse(95, 100, 90, 90); stroke(242, 191, 128); line(59, 127, 130, 127); line(59, 127, 80, 170); line(130, 127, 109, 170); beginshape(); nostroke(); fill(242, 191, 128); triangle(80, 170, 95, 170, 88, 183); fill(203, 140, 103); triangle(88, 183, 103, 183, 95, 170); fill(191, 131, 96); triangle(95, 170, 103, 183, 110, 170); fill(140, 55, 70); triangle(59, 127, 77, 127, 69, 143); triangle(85, 127, 95, 143, 105, 127); triangle(113, 127, 121, 143, 130, 127); endshape(); popmatrix(); //pop processing's original coordinate system } notice there's offset between cursor , balloon. because shapes drawn right , lower (larger x,y values). imagine cursor balloon's "anchor point". coordinates of drawn shapes need offset towards different position. given want click balloon's circle, use circle's center ballon's "anchor"/origin:
void balloon(float x,float y) { //isolate coordinate system pushmatrix(); //translate baloon translate(x,y); fill(217, 105, 95); nostroke(); ellipse(0, 0, 90, 90); stroke(242, 191, 128); line(59-95, 27, 130-95, 27); line(59-95, 27, 80-95, 70); line(130-95, 27, 109-95, 70); beginshape(); nostroke(); fill(242, 191, 128); triangle(80-95, 70, 0, 70, 88-95, 83); fill(203, 140, 103); triangle(88-95, 83, 103-95, 83, 0, 70); fill(191, 131, 96); triangle(0, 70, 103-95, 83, 110-95, 70); fill(140, 55, 70); triangle(59-95, 27, 77-95, 27, 69-95, 43); triangle(85-95, 27, 0, 43, 105-95, 27); triangle(113-95, 27, 121-95, 43, 130-95, 27); endshape(); popmatrix(); //pop processing's original coordinate system } notice how x,y coordinates have values subtracted (based on old ellipse's location).
now should able draw 3 balloons @ 3 different positions. have setup variables different coordinates(for each balloon) , call balloon function 3 times:
float ballon1x; float ballon1y; float ballon2x; float ballon2y; float ballon3x; float ballon3y; void setup() { size(500, 500); //define colors gradient background b1 = color(139, 211, 242); b2 = color(212, 221, 198); // noloop(); //randomize x positions ballon1x = random(100,width-100); ballon2x = random(100,width-100); ballon3x = random(100,width-100); //randomize y positions, keeping in mind rise bottom ballon1y = random(height/2); ballon2y = random(height/2); ballon3y = random(height/2); } int y_axis = 1; int x_axis = 2; color b1, b2; void draw() { //gradient background setgradient(0, 0, 500, 500, b1, b2, y_axis); setgradient(0, 500, 540, 500, b2, b1, x_axis); balloon(ballon1x,ballon1y); balloon(ballon2x,ballon2y); balloon(ballon3x,ballon3y); cloud(); } //cloud shape void cloud() { beginshape(); nostroke(); fill(204, 206, 207); triangle(180, 50, 195, 50, 188, 35); triangle(195, 50, 188, 65, 202, 65); fill(189, 192, 193); triangle(188, 35, 195, 50, 202, 35); triangle(180, 50, 195, 50, 188, 65); triangle(202, 65, 195, 50, 209, 50); fill(255); triangle(195, 50, 209, 50, 202, 35); triangle(215, 35, 209, 50, 222, 50); triangle(215, 65, 202, 65, 209, 50); fill(224, 231, 234); triangle(209, 50, 202, 35, 215, 35); triangle(209, 50, 215, 65, 222, 50); endshape(); } // hot air balloon shape void balloon(float x,float y) { //isolate coordinate system pushmatrix(); //translate baloon translate(x,y); fill(217, 105, 95); nostroke(); ellipse(0, 0, 90, 90); stroke(242, 191, 128); line(59-95, 27, 130-95, 27); line(59-95, 27, 80-95, 70); line(130-95, 27, 109-95, 70); beginshape(); nostroke(); fill(242, 191, 128); triangle(80-95, 70, 0, 70, 88-95, 83); fill(203, 140, 103); triangle(88-95, 83, 103-95, 83, 0, 70); fill(191, 131, 96); triangle(0, 70, 103-95, 83, 110-95, 70); fill(140, 55, 70); triangle(59-95, 27, 77-95, 27, 69-95, 43); triangle(85-95, 27, 0, 43, 105-95, 27); triangle(113-95, 27, 121-95, 43, 130-95, 27); endshape(); popmatrix(); //pop processing's original coordinate system } //gradient background void setgradient(int x, int y, float w, float h, color b1, color b2, int axis ) { nofill(); if (axis == y_axis) { // top bottom gradient (int = y; <= y+h; i++) { float inter = map(i, y, y+h, 0, 1); color b = lerpcolor(b1, b2, inter); stroke(b); line(x, i, x+w, i); } } } 2. moving bottom top
in terms of moving bottom you, since there position variables available, it's matter or updating y coordinates on time. moving bottom top mean decreasing y position:
void draw() { //decrease ballons y position -> bottom top ballon1y -= 0.25; ballon2y -= 0.75; ballon3y -= 1.15; //gradient background setgradient(0, 0, 500, 500, b1, b2, y_axis); setgradient(0, 500, 540, 500, b2, b1, x_axis); balloon(ballon1x,ballon1y); balloon(ballon2x,ballon2y); balloon(ballon3x,ballon3y); cloud(); } 3. when click balloons mouse...
you can use mousepressed() click. figure out if balloon clicked use bit of trigonometry (pythagoras theorem) determine distance between mouse position , balloon position , processing's got yet again dist() function. takes 4 arguments (2 pairs of x,y coordinates (from-to)) , returns 1 number: distance. if distance mouse ballon smaller ballon's radius, mouse inside balloon. similar how balloon1x,balloon1y variables added, ballonsize variable can added can re-used both balloon drawing , clicking calculations. here's simple example randomizing 1st balloon's coordinates if it's clicked:
void mousereleased(){ //check if distance between mouse cursor , balloon smaller ballon radius (size / 2) if(dist(mousex,mousey,balloon1x,balloon1y) < balloonsize / 2){ balloon1x = random(100,width-100); balloon1y = random(height/2); } } 4. ... balloons change colors last step should trivial since balloon() modified use x,y,size arguments/parameters. it's matter of adding color variable can updated if balloon clicked.
here sketch covering 4 questions:
float balloon1x; float balloon1y; float balloon2x; float balloon2y; float balloon3x; float balloon3y; float balloonsize = 90; color balloon1color = color(217, 105, 95); color balloon2color = color(217, 105, 95); color balloon3color = color(217, 105, 95); void setup() { size(500, 500); //define colors gradient background b1 = color(139, 211, 242); b2 = color(212, 221, 198); // noloop(); //randomize x positions balloon1x = random(100,width-100); balloon2x = random(100,width-100); balloon3x = random(100,width-100); //randomize y positions, keeping in mind rise bottom balloon1y = random(height/2); balloon2y = random(height/2); balloon3y = random(height/2); } int y_axis = 1; int x_axis = 2; color b1, b2; void draw() { //decrease ballons y position -> bottom top balloon1y -= 0.25; balloon2y -= 0.75; balloon3y -= 1.15; //gradient background setgradient(0, 0, 500, 500, b1, b2, y_axis); setgradient(0, 500, 540, 500, b2, b1, x_axis); balloon(balloon1x,balloon1y,balloonsize,balloon1color); balloon(balloon2x,balloon2y,balloonsize,balloon2color); balloon(balloon3x,balloon3y,balloonsize,balloon3color); cloud(); } //cloud shape void cloud() { beginshape(); nostroke(); fill(204, 206, 207); triangle(180, 50, 195, 50, 188, 35); triangle(195, 50, 188, 65, 202, 65); fill(189, 192, 193); triangle(188, 35, 195, 50, 202, 35); triangle(180, 50, 195, 50, 188, 65); triangle(202, 65, 195, 50, 209, 50); fill(255); triangle(195, 50, 209, 50, 202, 35); triangle(215, 35, 209, 50, 222, 50); triangle(215, 65, 202, 65, 209, 50); fill(224, 231, 234); triangle(209, 50, 202, 35, 215, 35); triangle(209, 50, 215, 65, 222, 50); endshape(); } // hot air balloon shape void balloon(float x,float y,float size,color fillcolor) { //isolate coordinate system pushmatrix(); //translate baloon translate(x,y); fill(fillcolor); nostroke(); ellipse(0, 0, size, size); stroke(242, 191, 128); line(59-95, 27, 130-95, 27); line(59-95, 27, 80-95, 70); line(130-95, 27, 109-95, 70); beginshape(); nostroke(); fill(242, 191, 128); triangle(80-95, 70, 0, 70, 88-95, 83); fill(203, 140, 103); triangle(88-95, 83, 103-95, 83, 0, 70); fill(191, 131, 96); triangle(0, 70, 103-95, 83, 110-95, 70); fill(140, 55, 70); triangle(59-95, 27, 77-95, 27, 69-95, 43); triangle(85-95, 27, 0, 43, 105-95, 27); triangle(113-95, 27, 121-95, 43, 130-95, 27); endshape(); popmatrix(); //pop processing's original coordinate system } void mousereleased(){ //check if distance between mouse cursor , balloon smaller ballon radius (size / 2) if(dist(mousex,mousey,balloon1x,balloon1y) < balloonsize / 2){ //randomize balloon 1 color balloon1color = color(random(127,255),random(127,255),random(127,255)); } } //gradient background void setgradient(int x, int y, float w, float h, color b1, color b2, int axis ) { nofill(); if (axis == y_axis) { // top bottom gradient (int = y; <= y+h; i++) { float inter = map(i, y, y+h, 0, 1); color b = lerpcolor(b1, b2, inter); stroke(b); line(x, i, x+w, i); } } } 
you can run demo here using p5.js, how nice ?! (click slowest balloon)
var balloon1x; var balloon1y; var balloon2x; var balloon2y; var balloon3x; var balloon3y; var balloonsize = 90; var balloon1color; var balloon2color; var balloon3color; function setup() { createcanvas(500, 500); //define colors gradient background b1 = color(139, 211, 242); b2 = color(212, 221, 198); // noloop(); //randomize x positions balloon1x = random(100,width-100); balloon2x = random(100,width-100); balloon3x = random(100,width-100); //randomize y positions, keeping in mind rise bottom balloon1y = random(height); balloon2y = random(height); balloon3y = random(height); balloon1color = color(217, 105, 95); balloon2color = color(217, 105, 95); balloon3color = color(217, 105, 95); } var y_axis = 1; var x_axis = 2; var b1, b2; function draw() { //decrease ballons y position -> bottom top balloon1y -= 0.25; balloon2y -= 0.75; balloon3y -= 1.15; //gradient background setgradient(0, 0, 500, 500, b1, b2, y_axis); setgradient(0, 500, 540, 500, b2, b1, x_axis); balloon(balloon1x,balloon1y,balloonsize,balloon1color); balloon(balloon2x,balloon2y,balloonsize,balloon2color); balloon(balloon3x,balloon3y,balloonsize,balloon3color); cloud(); } //cloud shape function cloud() { beginshape(); nostroke(); fill(204, 206, 207); triangle(180, 50, 195, 50, 188, 35); triangle(195, 50, 188, 65, 202, 65); fill(189, 192, 193); triangle(188, 35, 195, 50, 202, 35); triangle(180, 50, 195, 50, 188, 65); triangle(202, 65, 195, 50, 209, 50); fill(255); triangle(195, 50, 209, 50, 202, 35); triangle(215, 35, 209, 50, 222, 50); triangle(215, 65, 202, 65, 209, 50); fill(224, 231, 234); triangle(209, 50, 202, 35, 215, 35); triangle(209, 50, 215, 65, 222, 50); endshape(); } // hot air balloon shape function balloon(x,y,size,fillcolor) { //isolate coordinate system push(); //translate baloon translate(x,y); fill(fillcolor); nostroke(); ellipse(0, 0, size, size); stroke(242, 191, 128); line(59-95, 27, 130-95, 27); line(59-95, 27, 80-95, 70); line(130-95, 27, 109-95, 70); beginshape(); nostroke(); fill(242, 191, 128); triangle(80-95, 70, 0, 70, 88-95, 83); fill(203, 140, 103); triangle(88-95, 83, 103-95, 83, 0, 70); fill(191, 131, 96); triangle(0, 70, 103-95, 83, 110-95, 70); fill(140, 55, 70); triangle(59-95, 27, 77-95, 27, 69-95, 43); triangle(85-95, 27, 0, 43, 105-95, 27); triangle(113-95, 27, 121-95, 43, 130-95, 27); endshape(); pop(); //pop processing's original coordinate system } function mousereleased(){ //check if distance between mouse cursor , balloon smaller ballon radius (size / 2) if(dist(mousex,mousey,balloon1x,balloon1y) < balloonsize / 2){ //randomize balloon 1 color balloon1color = color(random(127,255),random(127,255),random(127,255)); } } //gradient background function setgradient(x, y, w, h, b1, b2, axis ) { nofill(); if (axis == y_axis) { // top bottom gradient (var = y; <= y+h; i++) { var inter = map(i, y, y+h, 0, 1); var b = lerpcolor(b1, b2, inter); stroke(b); line(x, i, x+w, i); } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>now should understand how animate coordinate variable on time independent drawing, means can apply same principles draw clouds @ independent coordinates , move them right left. also, can add remaining 2 if conditions in mousereleased() event change colours other 2 balloons.
depending on processing course, might want consider these next steps:
- using pvector store positions (one variable per balloon instead of two)
- using loops multiple balloons/clouds (instead of copy/pasted function calls).
- encapsulating code balloon , separate cloud class(drawing, coordinates, colour, position, etc.). check out daniel shiffman's objects tutorials more details.
with above should able put nice, easy manage program can animate pretty balloons , clouds smoothly , make parallax effect more obvious. have fun!
Comments
Post a Comment