ASMR Pong Programming in the Park

  Рет қаралды 93,026

Chris Courses

Chris Courses

Күн бұрын

Follow @devaslife for more code-in-nature content, and check out www.inkdrop.app/ for the ultimate markdown note taking experience.
Get the code: github.com/chriscourses/progr...
0:00 Intro and background
1:12 Canvas setup
2:07 Draw paddles
4:22 Respond to user input
7:31 Restrict paddle to boundaries
9:31 Create a ball
12:04 Randomized ball movement
13:02 Ball and paddle collision
20:11 The finished product
20:52 End screen
I was feeling pretty unmotivated the past three months, especially after the large success of my fighting game tutorial. Many people would think that such a successful video would provide tons of motivation, and rightfully so, but for me, I felt as if I were just coasting, rather than putting in consistent effort that makes impact. Although there are rewards to be reaped from passively owning a successful video, it just doesn't feel good as consistently working towards a goal.
During this period, I've been watching a ton of different tech KZfaqrs rather than producing, mainly because... well, its a lot easier to watch than build. One KZfaqr who stuck out to me was @devaslife and for obvious reasons-he essentially pioneered a style of coding videos where the code takes place in aesthetic sceneries, and without any voiceover (all you hear are the sounds of nature and coding keystrokes).
If there are a few things that I've consistently been passionate about, it's getting outdoors, video production, and coding of course. @devaslife was able to merge all of those into one, and his style seemed like the perfect gateway to start producing more videos again, so here is my attempt.
Anyways, I'm glad to be back using my actual camera gear, and have some super helpful content coming out regarding career advice, code cleanliness, Three.js, and canvas.
I don't plan on doing this exact style in the future anytime soon, but thank you @devaslife for getting people out and being an inspiration to many!

Пікірлер: 88
@semirsinani1342
@semirsinani1342 Жыл бұрын
when i saw the video format i thought of Takuya immediately. I am glad that you gave credit in the video.
@TinyMaths
@TinyMaths Жыл бұрын
This definitely works; I'm actually watching this while doing my first refactor of the first apps that I've built over the past few months. Very therapeutic scenery and natural sounds (and the typing too). Great film making by the way!
@MudassirKhan-sx9jy
@MudassirKhan-sx9jy Жыл бұрын
👍Dev as life . 👍Chris courses .
@jonathanzhu6917
@jonathanzhu6917 Жыл бұрын
devaslife is amazing and I love his style of videos, honestly wouldn't mind seeing more people pick up on it!
@ChrisCourses
@ChrisCourses Жыл бұрын
Love his style, very peaceful and fun to make, can't wait to see more from him
@KaueO.Castro
@KaueO.Castro 7 ай бұрын
@@ChrisCourses os night
@KaueO.Castro
@KaueO.Castro 7 ай бұрын
Pode night
@KaueO.Castro
@KaueO.Castro 7 ай бұрын
Pode night
@fullcourseyellow5940
@fullcourseyellow5940 Жыл бұрын
How did u make ur code window be transpalent to the bg video?
@Coding_Asmr_PraDev
@Coding_Asmr_PraDev Жыл бұрын
Need more these brother, it motivates me to not quit what I have been doing.
@apartbrain
@apartbrain Жыл бұрын
Hi, can you tell which editor it is and how did you achieve transparent background?
@neunmalelf
@neunmalelf 11 ай бұрын
I really enjoy this format. 😊👍
@martinthomas8955
@martinthomas8955 Жыл бұрын
How did you record this? its beautiful
@armandsalle8447
@armandsalle8447 Жыл бұрын
Really nice !! How did you do the video editing with you code editor?
@theJYC
@theJYC 5 ай бұрын
Would you mind sharing how you managed to modify the opacity of the Sublime Text background? Looks awesome :)
@trashinGame
@trashinGame Жыл бұрын
man the scenery and the typing sounds make this an absolute banger of an ASMR video + u get to learn too!
@Nodsaibot
@Nodsaibot Жыл бұрын
but no socks with them sandals -100 points!
@rupertodiaz8673
@rupertodiaz8673 Жыл бұрын
Great tutorial Chris, kuddos++
@gaganrastogi9624
@gaganrastogi9624 Жыл бұрын
Wow, you are also a fan of "devaslife". I love your videos too. Thanks for making these.
@ChrisCourses
@ChrisCourses Жыл бұрын
Big fan, thanks for watching!
@peterweyland117
@peterweyland117 Жыл бұрын
Thank you!)) Great tutorials!))
@notSoAnonyymus
@notSoAnonyymus Жыл бұрын
I'm not sure what tutorial you plan on doing next but what about rogue like or dungeon crawler?
@mounir101
@mounir101 Жыл бұрын
So glad to see you with this tutorial. Thanks so much, bro.
@comoyun
@comoyun Жыл бұрын
quality content 👌
@emanuelvidalrm
@emanuelvidalrm Жыл бұрын
nice homage to @devaslife
@DwikiIkhwan
@DwikiIkhwan Жыл бұрын
What a fresh idea, great tutorial overall. Salute!
@sylens_
@sylens_ Жыл бұрын
Nice style, I see you’re a fan of devaslife programming videos
@ChrisCourses
@ChrisCourses Жыл бұрын
Big fan, love his work 🙌
@rummanmiazi3022
@rummanmiazi3022 Жыл бұрын
What is the code editor you use
@sora1099
@sora1099 Жыл бұрын
This would be a dope series, great ASMR btw!
@yugimaniaca8043
@yugimaniaca8043 Жыл бұрын
Hello Chris, your video looks great!!! Can you do a video tutorial on how to apply the chroma key?
@ChrisCourses
@ChrisCourses Жыл бұрын
I could, but probably shouldn't since I know devaslife mentioned in one of his videos that he isn't ready to reveal that info just yet. Wouldn't want to disrespect him by revealing his channel's special ingredient, but to give you some direction, I did it all in post, meaning that there was no special setting I added to sublime to change the background or anything like that. Used Davinci Resolve and was able to get something going after 3ish hours of learning their color panel and chroma key tool. Hope that helps a bit!
@simon-hb7wf
@simon-hb7wf Жыл бұрын
I love the concept !! keep up the great work !
@dustintrombly
@dustintrombly Жыл бұрын
I assume this is an Apple silicon MacBook? Looks like one. The battery life, screen quality + brightness, and ability to actually use it on your lap without heating your legs is such a treat. I did something similar to this recently and was blown away at the realization that up until owning my M1, I wasn’t able to truly have an enjoyable extended experience taking my laptop outdoors.
@Turbo_Waitress
@Turbo_Waitress Жыл бұрын
This is awesome. What type of laptop do you use for development?
@grivelator
@grivelator 11 ай бұрын
Probably a MacBook with MacOS...
@tojuju
@tojuju Жыл бұрын
this is so cool. hope you have more of these
@marcelo.victor
@marcelo.victor Жыл бұрын
Chris, hi, your subscriber from Brazil! Amazing simple Pong tutorial! Can you make a javascript tutorial on how to display a div on a button click, the div being always attached to the button by the ID (inserted dinamically via JS with "after" and show above/bottom or left/right of the button when this button is positioned at top, bottom, left, right of the window? Without this div created by JS being cut off screen? I have tried a lot but I'm bangging my head against the wall trying to do this!
@ChrisCourses
@ChrisCourses Жыл бұрын
Hey Marcelo, if you have a CodePen of your current work, shoot it over through this comment. I can make some quick edits w comments to point you in the right direction, should be relatively quick I believe 🙏
@marcelo.victor
@marcelo.victor Жыл бұрын
@@ChrisCourses thank you so much for being able to help me! I tried more, studied more and finally i did it! Please continue the AWESOME work on this channel!
@user-dd1ht1zz9l
@user-dd1ht1zz9l 6 ай бұрын
Hey @marcelo.victor, i looked into the comment and i think i found a way to do it: Dynamic Div #dynamicDiv { display: none; position: absolute; border: 1px solid #ccc; padding: 10px; background-color: #fff; z-index: 1; } Click me document.getElementById('myButton').addEventListener('click', function() { // Create a dynamic div var dynamicDiv = document.createElement('div'); dynamicDiv.id = 'dynamicDiv'; dynamicDiv.innerHTML = 'This is the dynamically created div!'; // Attach the dynamic div after the button this.after(dynamicDiv); // Position the dynamic div relative to the button positionDynamicDiv(dynamicDiv, this); // Display the dynamic div dynamicDiv.style.display = 'block'; // Remove the dynamic div after a certain time (for demo purposes) setTimeout(function() { dynamicDiv.remove(); }, 5000); }); // Function to position the dynamic div based on the button's position function positionDynamicDiv(div, button) { var rect = button.getBoundingClientRect(); var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight; // Check the position of the button relative to the viewport if (rect.top < viewportHeight / 2) { // Button is in the top half of the viewport div.style.top = rect.bottom + 'px'; } else { // Button is in the bottom half of the viewport div.style.bottom = (viewportHeight - rect.top) + 'px'; } if (rect.left < viewportWidth / 2) { // Button is in the left half of the viewport div.style.left = rect.right + 'px'; } else { // Button is in the right half of the viewport div.style.right = (viewportWidth - rect.left) + 'px'; } }
@biirdman89
@biirdman89 Жыл бұрын
really damn cool. as someone who has been self-taught for a while now, I'm happy I was able to keep up and understand what you were doing.
@ChrisCourses
@ChrisCourses Жыл бұрын
Awesome, glad you have the hang of it, takes some time for sure, but eventually you'll be able to code all of this stuff from your head as the knowledge continues to build
@trashinGame
@trashinGame Жыл бұрын
congrats on 100k subs man! *Programming Elden Ring in the Park* when?
@senseiAree
@senseiAree 11 ай бұрын
Hey Chris, just a quick and real question... How did you kept ur laptop charged?
@ChrisCourses
@ChrisCourses 11 ай бұрын
The newest MacBooks have great battery life, think mine can go about 6-8 hours of basic use without a charge
@QkysenQ
@QkysenQ Ай бұрын
damn@@ChrisCourses
@vaaaaaaaaan8678
@vaaaaaaaaan8678 Жыл бұрын
This literally helps. I started to understand some parts that I cant understand before
@Geloooooooooo
@Geloooooooooo Жыл бұрын
Nice content
@gnet888
@gnet888 Жыл бұрын
good idea
@souvikbiswas9169
@souvikbiswas9169 Жыл бұрын
Miss you!
@Skylla54
@Skylla54 Жыл бұрын
coded along with you, that was fun 😄👍 To keep up with you and doesnt loose track to often, i used `vi{zf` to fold the folders.
@xcliber
@xcliber Жыл бұрын
May wanna mute the part of the video where you can hear Free Fallin' in the background. This style of video is pretty cool and I wouldn't want to see it taken down.
@rummanmiazi3022
@rummanmiazi3022 Жыл бұрын
How to install unity
@bohardw1884
@bohardw1884 Жыл бұрын
This video is familiar with Takuya's video! Its great
@MudassirKhan-sx9jy
@MudassirKhan-sx9jy Жыл бұрын
Cool♥️
@briankgarland
@briankgarland Жыл бұрын
Didn't even look up as the girls walked by. True programmer. 😂
@ChrisCourses
@ChrisCourses Жыл бұрын
🤣🤣🤣
@xcliber
@xcliber Жыл бұрын
Forgot to swap one of the 'width' to 'height' when you copy/pasted the ball physics for bouncing off the bottom. That's why the ball's not going all the way down. I need to get back into programming.
@ChrisCourses
@ChrisCourses Жыл бұрын
This is true, noticed after the fact and was like: welp, too late now 😅 Fixed in the source and for the end screen preview
@souvikbiswas9169
@souvikbiswas9169 Жыл бұрын
Where you have been!
@Nodsaibot
@Nodsaibot Жыл бұрын
You should declare or include a mini lib with shorthand names for common operations and methods? like OneLoneCoder does for example const select = el => document.querySelector(el); so you just do on the next line and ALL future DOM selects const canvas = select('canvas'); then include the lib in the comments? :D
@brafesta
@brafesta 6 ай бұрын
i'm a c# programmer and somehow i just realize that c# and js are really really similar ... bruh
@calcio437
@calcio437 Жыл бұрын
nice
@Alb0z32
@Alb0z32 Жыл бұрын
These javascript game tutorials are very helpful man, they helped me learn more about OOP in javascript and the game logic. Keep up the good work man :)
@comoyun
@comoyun Жыл бұрын
how long have u been coding?
@Alb0z32
@Alb0z32 Жыл бұрын
@@comoyun 3 years, mainly full stack(front end and nodejs with express and react). I also recently learned basics of java in a bootcamp
@comoyun
@comoyun Жыл бұрын
@@Alb0z32 oh, that's awesome!
@omenworks
@omenworks Жыл бұрын
@devaslife fan here ;)
@05.aishiqmishra4
@05.aishiqmishra4 Ай бұрын
I woke up and i saw this
@rakasin
@rakasin Жыл бұрын
This is hot shit! Love it 😍
@rummanmiazi3022
@rummanmiazi3022 Жыл бұрын
Good good good good
@cecece775
@cecece775 Жыл бұрын
I thaought takya dropped a new vidéo hahahha
@andreaspetersen2662
@andreaspetersen2662 2 ай бұрын
When i go on pension after being a corporate dev most of my life, this is the type of stuff i want to do 😂
@Vim_Tim
@Vim_Tim Жыл бұрын
Nice but needs more Neovim
@sidekick3rida
@sidekick3rida Жыл бұрын
Central Park!
@ChrisCourses
@ChrisCourses Жыл бұрын
Nailed it 👍
@lakehighland
@lakehighland Жыл бұрын
I’m on the train to 100k subs!!!
@blakevollbrecht9026
@blakevollbrecht9026 Жыл бұрын
14:50 NOOOOOOO
@7aidas7
@7aidas7 Жыл бұрын
PLEASE can you make object fall game with images changing with score? I searched in youtube and didn't find anything like that. Can you make that game? Pls like this comment guys
@rummanmiazi3022
@rummanmiazi3022 Жыл бұрын
So so so so so so so so so so so so
@TheMonkeyworkshop
@TheMonkeyworkshop Жыл бұрын
🤣
@K1TTy1386
@K1TTy1386 3 күн бұрын
b cUñ'ñ
@Paranoiarts
@Paranoiarts Жыл бұрын
Do you know the Movie "Pong". Thriller! 8 Oskars.
@shuaidong7995
@shuaidong7995 Жыл бұрын
不错不错!!!我也很喜欢 @devaslife 视频风格, 从此我也开始关注你. 希望你的视频越来越好 (Great, great!!! I also really like @devaslife's video style, and now I'm following you too. I hope your videos will get better and better.)
Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas
3:03:24
6 Must-Have Security Gadgets That Fit in Your Pocket
9:03
All Things Secured
Рет қаралды 1,7 МЛН
The Worlds Most Powerfull Batteries !
00:48
Woody & Kleiny
Рет қаралды 26 МЛН
When someone reclines their seat ✈️
00:21
Adam W
Рет қаралды 20 МЛН
КАРМАНЧИК 2 СЕЗОН 6 СЕРИЯ
21:57
Inter Production
Рет қаралды 506 М.
$10,000 Every Day You Survive In The Wilderness
26:44
MrBeast
Рет қаралды 102 МЛН
ASMR Programming - Spinning Cube - No Talking
20:45
Servet Gulnaroglu
Рет қаралды 3,6 МЛН
When Did Raspberry Pi become the villain?
21:54
Jeff Geerling
Рет қаралды 1,4 МЛН
15 Years Writing C++ - Advice for new programmers
4:04
SyncMain
Рет қаралды 1,1 МЛН
ASMR Programming - Mini Music Player - No Talking
22:47
AsmrProg
Рет қаралды 31 М.
I Tried Making a 3D MMORPG Game in JavaScript
16:48
SimonDev
Рет қаралды 599 М.
God-Tier Developer Roadmap
16:42
Fireship
Рет қаралды 6 МЛН
Coding Challenge #67: Pong!
1:08:19
The Coding Train
Рет қаралды 292 М.
What NO ONE told me about FOUNTAIN PENS--a Beginner's Guide.
11:54
BeastMade Reviews
Рет қаралды 520 М.
ASMR Programming - Coding a Snake Game - No Talking
24:06
Servet Gulnaroglu
Рет қаралды 620 М.
Entropy in Compression - Computerphile
12:12
Computerphile
Рет қаралды 390 М.
The Worlds Most Powerfull Batteries !
00:48
Woody & Kleiny
Рет қаралды 26 МЛН