Looks like a lead into a Guitar Hero singing game thing. With your other videos about frequency and amplitude you could have the "bird" follow the pitch and check if it maps to notes in a song. Then we can find out how well you sing.
you could take what hes done here and how he gets frequency (havent watched his vids of frequency) and map the frequency to the birds x coordinate to control it with pitch then you can hardcode the notes of the song or read them from somewhere and change his bar code by instead drawing circles with an x coordinate that maps from the next note, same mapping thats used for the bird if you watch his 'spaceinvader' challenge he shows how to check if two circles overlap so could copy that for the collision to see if the bird (their frequency) hits the note
I think an interesting idea to generate the pipes would be to use perlin noise to determine where the gaps should be. That way the game will have a bit of a flow to it instead of random gaps!
you could make it even better by measuring the increase in sound, a clap is instantaneous loud, but if you're talking, the volume increases more slowly
What i did in my example for building pipes is , have always fixed empty space (example 200) , then for top pipe , select random Y from 100 to height-(100+emptySpace), and then generate bottom pipe , from height to top+emptySpace, The 100+emptySpace, is so i will have emptySpace, and have at least 100px of bottom pipe. I could also have this emptySpace to be random from like 100 to 300 , so it will make game a bit more challenging
Isn't it way easier to just take a random height for the top pipe, and for the bottom you can do var spacing = random(20, 100); this.bottom = height - (this.top + spacing); Idk, seems easier to me
In the actual game, the gap between the top and bottom tubes, never actually changes. So creating a varying top tube and then making the bottom tube be the height minus the top tube plus the gap is pretty easy.
I think it'd be interesting to try making the upward force on the bird increase with the loudness of the clapping. I got the impression that this is what you were intuitively trying to do when playing. (Still having a threshold below which no force is applied, of course).
I understand this is pretty old but I would have personally did the pipes like this: -Pick a random number between the height minus spacing and 0. -This number is the top pipe. -The bottom pipe is the top pipe number plus spacing, down to the height of the canvas. EG: Random number is 200 pixels, space is 50 pixels. This makes the top bar 150 pixels tall, then a 50 pixel space, and the bottom bar from 200 pixels to the bottom of the canvas. (:
The first thing i thoght for the pillars, was making one a random height from 0 to height - (min open space)(like, the size of the bird mabe), and then have the second pillar height - ( other pillar + min open space).
The low threshold idea could easily be improved. Instead it should look at when volume is no longer increasing. In other words the clap has ended rather than having to wait and causing yourself more problems if you clap again too early.
did you include some kind of time.deltaTime to calculate time between 2 frames? It is really important. If I play this game on a fasr computer and get 60 fps and on a slow computer with 30 fps my game will run slower and vice versa. ?
Hey shiffman ! I watch your gaming videos, It's pretty nice. So i also want learn this gaming Javascript programing. I am a bignner of this. How can i start in js gaming programing. i know JS. pleas help me.
hey! I have a challenge, could you please do a coding challenge with C because I feel like it would be a fairly challenging project. maybe program a simple game?
How can i code a START game and an GAMEOVER page Before it loads the gamecanvas I want a starter page where you can pick play, and when you are playing the game I want a gameover page
is you take all his code in the draw function and put it in a if statement saying if playing then do this, in the else create a separate canvas with something like text saying 'clap to begin' and using the same audio code just change bird.up to playing = true, when it hits instead of making the bars red change it to playing = false, hop that makes sense
its pretty cool. i turned on the music in my room, startet the game and then used the arrow keys to turn on and off the sound control for pushing the ball up and down - and it works pretty well :D
How do you have atom setup with p5.js? im opening the main file for p5.js in atom and programming on sketch.js but running the index file hasn't been working for me. Thx
the first video of yours that i saw was the flappy bird one, and after watching some of your tutorials(about 2 days after cause i got edicted) i made this alpha.editor.p5js.org/full/BkSbFuITZ thank you very much....i made cooler stuff since than....
woow your gale is really ell desighed and it is perfect please i don't understand how to code and on which program on mac please could you help he building something cool like you do Thanks very much
watch his tutorials and while watching make something of your for each couple of tutorials. the p5 environment is a very easy environment to think of a little thing you want to do in, for instance, after the first couple of videos I drew an iPhone, an alien, and stuff like that, after a few more I made a sketch with changing background(not flickery but smooth) with a flickery circle that leaves a nice path after it, think on those kind of stuff in the beginning and move forward to cooler stuff, using the new tools you have learned and generally you should just start, when you will start, you will find what you wanna do with it.
Thanks very much for your respond but i don't really know how to use p5. And could you just tell me what is p5 : is it a programe to code a game specificly or something else? And if you know some, could you tell me sor othe programs where we can code game please Thanks again
it is not specifically for games but it can be used for games, if you are into making games you should learn to use unity, it is one of the best environments for game developing, but it is not so much as a programming language and more like an app, like excel. genrally p5 or proccesing are great for begginers and none beginners as well for computed graphics, and if you don't know how to use p5, LEARN IT! this is the point, the beggining will always be akward, it took me about 10 hours to setup a working p5 sketch, it takes time, but it takes me 10 min to make random drawing based on the web camera that makes your portrait. just learn, dont tell yourself you can't or don't have the time. I'm at my second year at college right now and I'm also 17 and at my last year at high school and I found the time, everyone has the time.
You can try some of these workflow videos: sublime text: th-cam.com/video/UCHzlUiDD10/w-d-xo.html atom editor: th-cam.com/video/d3OcFexe9Ik/w-d-xo.html brackets: th-cam.com/video/nmZbhManVcY/w-d-xo.html codepen: th-cam.com/video/5gfUgNpS6kY/w-d-xo.html
hi Coding Train i am your subscriber since 2015 i watch your videos too. You can do this in pillar spacing: var pipeRandomHeight = Math.floor(Math.random() * 250 //the middle of the canvas ) + 50 // the top of the canvas; ctx.fillStyle = "#00ff00"; var topPillar = ctx.fillRect(250,0,50,pipeRandomHeight); ctx.fillStyle = "#00ff00"; var botttomPillar = ctx.fillRect(250,pipeRandomHeight+200,50,500);
Coding Challenge: Guitar Tuner
where the hell has this guy been all my life?!!?
.
.
.
your gonna be big one day m8
Electric Manectric He is already a big man 😀😁
Electric Manectric he now has almost 430k subs!
@@anthonyd9043 He is much bigger now
@@anthonyd9043
He is 1.2 mil now!
Looks like a lead into a Guitar Hero singing game thing. With your other videos about frequency and amplitude you could have the "bird" follow the pitch and check if it maps to notes in a song. Then we can find out how well you sing.
you could take what hes done here and how he gets frequency (havent watched his vids of frequency) and map the frequency to the birds x coordinate to control it with pitch
then you can hardcode the notes of the song or read them from somewhere and change his bar code by instead drawing circles with an x coordinate that maps from the next note, same mapping thats used for the bird
if you watch his 'spaceinvader' challenge he shows how to check if two circles overlap so could copy that for the collision to see if the bird (their frequency) hits the note
I think an interesting idea to generate the pipes would be to use perlin noise to determine where the gaps should be. That way the game will have a bit of a flow to it instead of random gaps!
you could make it even better by measuring the increase in sound, a clap is instantaneous loud, but if you're talking, the volume increases more slowly
Can you make the Google dinosaur game
Wait on my channel in near time, but now you can find these games:
1. Snake
2. Pong
3. 2048
4. Arkanoid
5. Conway's Game of Life
Fun challenge. Was always a fan of this channel. Now that we are all in lock-down, what a perfect time to watch more of these videos.
this will be a great addition to my flappy clone as an assignment in school.
ty
What i did in my example for building pipes is , have always fixed empty space (example 200) , then for top pipe , select random Y from 100 to height-(100+emptySpace), and then generate bottom pipe , from height to top+emptySpace,
The 100+emptySpace, is so i will have emptySpace, and have at least 100px of bottom pipe.
I could also have this emptySpace to be random from like 100 to 300 , so it will make game a bit more challenging
OMG, this is so funny, programming is so cool xD
Thanks for your videos, really enjoy the way you do those coding challenges. Keep doing that!
Love your videos Daniel, thank you!
This guy is on a different level. Love the mans art. A true inspiration to young software developer
This is awesome
Can't stop watching your videos! Videos are awesome!! You are awesome!!!!
Thanks for the nice feedback!
Isn't it way easier to just take a random height for the top pipe, and for the bottom you can do
var spacing = random(20, 100);
this.bottom = height - (this.top + spacing);
Idk, seems easier to me
In the actual game, the gap between the top and bottom tubes, never actually changes. So creating a varying top tube and then making the bottom tube be the height minus the top tube plus the gap is pretty easy.
Chris Jantzen Oh so you don't even need to randomize it then, just pick a gap and that's it
the frequency of the clap is different of the frequency of the talking voice!
can you calibrate with the frequency of de audio you capturing?
Double treshold is called a debounce in electronic
I think it'd be interesting to try making the upward force on the bird increase with the loudness of the clapping. I got the impression that this is what you were intuitively trying to do when playing. (Still having a threshold below which no force is applied, of course).
I appreciate you naming this coding challenge after me :P
Of course! Anytime!
I understand this is pretty old but I would have personally did the pipes like this:
-Pick a random number between the height minus spacing and 0.
-This number is the top pipe.
-The bottom pipe is the top pipe number plus spacing, down to the height of the canvas.
EG:
Random number is 200 pixels, space is 50 pixels. This makes the top bar 150 pixels tall, then a 50 pixel space, and the bottom bar from 200 pixels to the bottom of the canvas. (:
so touching for an excellent video
The first thing i thoght for the pillars, was making one a random height from 0 to height - (min open space)(like, the size of the bird mabe), and then have the second pillar height - ( other pillar + min open space).
11:57
p5.js
p5.dom.js
p5.sound.js
All together
The low threshold idea could easily be improved. Instead it should look at when volume is no longer increasing. In other words the clap has ended rather than having to wait and causing yourself more problems if you clap again too early.
that is actually a very good idea
can you post a video about how to get a reference p5 sound
hey, nice challenge!
what about using lowpass filter to make it trigger only when you clap(produce high-freq sound)? does it make sense?
Lool 16:33 bug bug😂😂
good work man, can you teach us how to make c++ games, because the only ones I could find are in console.
agreed
TV Shomy #bringbackmlg do you know how similar C++ is to Java?? I'm learning C++ for arduino and I'm curious to try out Java
+MC Donald Well. C++ for Arduino is pretty easy. But 'real' C++ can be confusion and complicated. Especially when working with Harware or Memory.
Droggelbecher Okay thanks - I'm obviously not good then
MC Donald well... JavaScript is. Java is not that similar
can you show how to add a scoring system?
love your videos, subscibed
subscribed, hope get lot of useful things from your videos.
hahahah that was intense you can talk while your speaker clap sound was jump by itself and or you just say jump
Can you teach me how to calculate the scoring in this game?
Daniel, how did you make the background of the IDE black? Mine is white and I think black looks much better. Btw, I'm using windows.
C Liviu it's because ur using windows
He just use Atom.io not the P5js IDE
did you include some kind of time.deltaTime to calculate time between 2 frames? It is really important. If I play this game on a fasr computer and get 60 fps and on a slow computer with 30 fps my game will run slower and vice versa. ?
Hey shiffman !
I watch your gaming videos, It's pretty nice. So i also want learn this gaming Javascript programing.
I am a bignner of this. How can i start in js gaming programing. i know JS. pleas help me.
Check out Phaser! th-cam.com/video/T9kOFSFvgKc/w-d-xo.html
hey! I have a challenge, could you please do a coding challenge with C because I feel like it would be a fairly challenging project. maybe program a simple game?
where does he stream? youtube or twitch and what is his streamer name?
Is there a link to the code so I can maybe make some improvements?
With this level I think you can talk and command computer to do what you want!
wut the use your hand and clap to control the clappy bird instead of using your mouse. THAT WAS COOOOOOL!!!!!!!!
How can i code a START game and an GAMEOVER page
Before it loads the gamecanvas I want a starter page where you can pick play, and when you are playing the game I want a gameover page
is you take all his code in the draw function and put it in a if statement saying if playing then do this, in the else create a separate canvas with something like text saying 'clap to begin' and using the same audio code just change bird.up to playing = true, when it hits instead of making the bars red change it to playing = false, hop that makes sense
Hey! I've already built this! www.wirelesstaco.com/dev/p5/screamchopper/
I'm planning on building a version for a live performance.
And I'm pretty sure I modified one of your examples to help me with the terrain.
its pretty cool. i turned on the music in my room, startet the game and then used the arrow keys to turn on and off the sound control for pushing the ball up and down - and it works pretty well :D
Awesome, Glad to hear you are enjoying it.
nice job!
this is awesome
Could you send me the complete code and files for clappy bird? Thanks!
How do you have atom setup with p5.js? im opening the main file for p5.js in atom and programming on sketch.js but running the index file hasn't been working for me. Thx
That is so fucking cool!
Super duper genius !!
So cool!
there might be an easy way to do this, but here is the code for making the bird;
this.show = function() {
noStroke ();
// Black pixels:
fill (0);
rect (this.x +12, this.y + 0, 12, 2);
rect (this.x +8, this.y + 2, 4, 2);
rect (this.x +18, this.y + 2, 2, 2);
rect (this.x +24, this.y + 2, 2, 2);
rect (this.x +6, this.y + 4, 2, 2);
rect (this.x +16, this.y + 4, 2, 6);
rect (this.x +26, this.y + 4, 2, 2);
rect (this.x +2, this.y + 6, 8, 2);
rect (this.x +24, this.y + 6, 2, 4);
rect (this.x +28, this.y + 6, 2, 6);
rect (this.x +0, this.y + 8, 2, 6);
rect (this.x +10, this.y + 8, 2, 2);
rect (this.x +12, this.y + 10, 2, 4);
rect (this.x +18, this.y + 10, 2, 2);
rect (this.x +20, this.y + 12, 12, 2);
rect (this.x +2, this.y + 14, 2, 2);
rect (this.x +10, this.y + 14, 2, 2);
rect (this.x +18, this.y + 14, 2, 2);
rect (this.x +32, this.y + 14, 2, 2);
rect (this.x +4, this.y + 16, 6, 2);
rect (this.x +16, this.y + 16, 2, 2);
rect (this.x +20, this.y + 16, 12, 2);
rect (this.x +4, this.y + 18, 2, 2);
rect (this.x +18, this.y + 18, 2, 2);
rect (this.x +30, this.y + 18, 2, 2);
rect (this.x +6, this.y + 20, 4, 2);
rect (this.x +20, this.y + 20, 10, 2);
rect (this.x +10, this.y + 22, 10, 2);
// Yellow pixels:
fill (255, 255, 0);
rect (this.x +12, this.y + 4, 4, 2);
rect (this.x +10, this.y + 6, 6, 2);
rect (this.x +12, this.y + 8, 4, 2);
rect (this.x +14, this.y + 10, 4, 2);
rect (this.x +2, this.y + 12, 2, 2);
rect (this.x +10, this.y + 12, 2, 2);
rect (this.x +14, this.y + 12, 6, 2);
rect (this.x +4, this.y + 14, 6, 2);
rect (this.x +12, this.y + 14, 6, 2);
// Orange pixels:
fill (255, 102, 0);
rect (this.x +10, this.y + 16, 6, 2);
rect (this.x +6, this.y + 18, 12, 2);
rect (this.x +10, this.y + 20, 10, 2);
// Red pixels:
fill (204, 0, 51);
rect (this.x +20, this.y + 14, 12, 2);
rect (this.x +18, this.y + 16, 2, 2);
rect (this.x +20, this.y + 18, 10, 2);
// White pixels:
fill (255);
rect (this.x + 12, this.y + 2, 6, 2);
rect (this.x + 20, this.y + 2, 4, 2);
rect (this.x + 8, this.y + 4, 4, 2);
rect (this.x + 18, this.y + 4, 6, 6);
rect (this.x + 24, this.y + 4, 2, 2);
rect (this.x + 26, this.y + 6, 2, 6);
rect (this.x + 2, this.y + 8, 2, 4);
rect (this.x + 4, this.y + 8, 6, 6);
rect (this.x + 10, this.y + 10, 2, 2);
rect (this.x + 20, this.y + 10, 6, 2);
}
Best. True is like
the first video of yours that i saw was the flappy bird one, and after watching some of your tutorials(about 2 days after cause i got edicted) i made this
alpha.editor.p5js.org/full/BkSbFuITZ
thank you very much....i made cooler stuff since than....
woow your gale is really ell desighed and it is perfect
please i don't understand how to code and on which program on mac please could you help he building something cool like you do
Thanks very much
watch his tutorials and while watching make something of your for each couple of tutorials. the p5 environment is a very easy environment to think of a little thing you want to do in, for instance, after the first couple of videos I drew an iPhone, an alien, and stuff like that, after a few more I made a sketch with changing background(not flickery but smooth) with a flickery circle that leaves a nice path after it, think on those kind of stuff in the beginning and move forward to cooler stuff, using the new tools you have learned and generally you should just start, when you will start, you will find what you wanna do with it.
Thanks very much for your respond but i don't really know how to use p5.
And could you just tell me what is p5 : is it a programe to code a game specificly or something else?
And if you know some, could you tell me sor othe programs where we can code game please
Thanks again
it is not specifically for games but it can be used for games, if you are into making games you should learn to use unity, it is one of the best environments for game developing, but it is not so much as a programming language and more like an app, like excel. genrally p5 or proccesing are great for begginers and none beginners as well for computed graphics, and if you don't know how to use p5, LEARN IT! this is the point, the beggining will always be akward, it took me about 10 hours to setup a working p5 sketch, it takes time, but it takes me 10 min to make random drawing based on the web camera that makes your portrait. just learn, dont tell yourself you can't or don't have the time. I'm at my second year at college right now and I'm also 17 and at my last year at high school and I found the time, everyone has the time.
could u share your code url
i want to learn this but these videos are advanced
You can start with these videos for beginners: th-cam.com/play/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA.html
hi, how can i use atom with P5.js?
You can try some of these workflow videos:
sublime text: th-cam.com/video/UCHzlUiDD10/w-d-xo.html
atom editor: th-cam.com/video/d3OcFexe9Ik/w-d-xo.html
brackets: th-cam.com/video/nmZbhManVcY/w-d-xo.html
codepen: th-cam.com/video/5gfUgNpS6kY/w-d-xo.html
Thanks! :)
You are Amaaaaziiiiing :)
u r awesome!!!!
hi Coding Train i am your subscriber since 2015 i watch your videos too.
You can do this in pillar spacing:
var pipeRandomHeight = Math.floor(Math.random() * 250 //the middle of the canvas ) + 50 // the top of the canvas;
ctx.fillStyle = "#00ff00";
var topPillar = ctx.fillRect(250,0,50,pipeRandomHeight);
ctx.fillStyle = "#00ff00";
var botttomPillar = ctx.fillRect(250,pipeRandomHeight+200,50,500);
Thank you!
I tried coding this
clappy bird more like crappy bird OMEGRANTEDLUL
way cool
You're over thinking things too much. Just choose a random height and a random spacing
lol :)
Its flappy bird not clappy bird lel
watch the video
Clappy bird? More like CRAPPY bird, am i right guys?
Haha so funny. Such clever - said no one ever! I'd really love to see the awesome program you made that's sooo muuchh better than this one.
No