ASMR Pong Programming in the Park
HTML-код
- Опубликовано: 2 июн 2024
- 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 RUclipsrs rather than producing, mainly because... well, its a lot easier to watch than build. One RUclipsr 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!
when i saw the video format i thought of Takuya immediately. I am glad that you gave credit in the video.
👍Dev as life .
👍Chris courses .
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!
devaslife is amazing and I love his style of videos, honestly wouldn't mind seeing more people pick up on it!
Love his style, very peaceful and fun to make, can't wait to see more from him
@@ChrisCourses os night
Pode night
Pode night
I really enjoy this format. 😊👍
Great tutorial Chris, kuddos++
Thank you!)) Great tutorials!))
nice homage to @devaslife
How did u make ur code window be transpalent to the bg video?
Hi, can you tell which editor it is and how did you achieve transparent background?
Wow, you are also a fan of "devaslife". I love your videos too. Thanks for making these.
Big fan, thanks for watching!
Need more these brother, it motivates me to not quit what I have been doing.
Really nice !! How did you do the video editing with you code editor?
man the scenery and the typing sounds make this an absolute banger of an ASMR video + u get to learn too!
but no socks with them sandals -100 points!
What a fresh idea, great tutorial overall. Salute!
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.
How did you record this? its beautiful
quality content 👌
So glad to see you with this tutorial. Thanks so much, bro.
Nice style, I see you’re a fan of devaslife programming videos
Big fan, love his work 🙌
Would you mind sharing how you managed to modify the opacity of the Sublime Text background? Looks awesome :)
I love the concept !! keep up the great work !
I'm not sure what tutorial you plan on doing next but what about rogue like or dungeon crawler?
What is the code editor you use
this is so cool. hope you have more of these
This is awesome. What type of laptop do you use for development?
Probably a MacBook with MacOS...
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.
This would be a dope series, great ASMR btw!
good idea
Nice content
Hello Chris, your video looks great!!! Can you do a video tutorial on how to apply the chroma key?
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!
Hey Chris, just a quick and real question... How did you kept ur laptop charged?
The newest MacBooks have great battery life, think mine can go about 6-8 hours of basic use without a charge
damn@@ChrisCourses
This video is familiar with Takuya's video! Its great
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!
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 🙏
@@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!
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';
}
}
@devaslife fan here ;)
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.
This literally helps. I started to understand some parts that I cant understand before
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.
This is true, noticed after the fact and was like: welp, too late now 😅
Fixed in the source and for the end screen preview
congrats on 100k subs man!
*Programming Elden Ring in the Park* when?
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.
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
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
Cool♥️
Didn't even look up as the girls walked by. True programmer. 😂
🤣🤣🤣
Miss you!
nice
This is hot shit! Love it 😍
Where you have been!
i'm a c# programmer and somehow i just realize that c# and js are really really similar ... bruh
Good good good good
I woke up and i saw this
How to install unity
14:50 NOOOOOOO
I thaought takya dropped a new vidéo hahahha
Central Park!
Nailed it 👍
Nice but needs more Neovim
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 :)
how long have u been coding?
@@comoyun 3 years, mainly full stack(front end and nodejs with express and react). I also recently learned basics of java in a bootcamp
@@Alb0z32 oh, that's awesome!
I’m on the train to 100k subs!!!
So so so so so so so so so so so so
When i go on pension after being a corporate dev most of my life, this is the type of stuff i want to do 😂
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
🤣
Do you know the Movie "Pong". Thriller! 8 Oskars.
不错不错!!!我也很喜欢 @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.)