Tic Tac Toe in p5.js (Coding Challenge 149)

[@Kaka-zs4cp]

I just wanna day this, I got rejected today on a job interview and was a little down , every time I’m feeling lost i watch your videos for inspiration, to know where I wanna be, I do appreciate the way you code and how much knowledge you can show in your videos on those simple challenges and that always makes me take out the dust and keep working on freelancer projects and studying more, thank you

[@TheCodingTrain]

Keep going, I believe in you!

[@halitbasbug84]

"Its 3×3×3 😂😂😂" Next level tic-tac-toe

[@chromosoze]

3D tic tax toe

[@dandanthedandan7558]

I actually made an improved version of Tic Tac Toe during highschool. Grid is 5x5; There are 3 "blocks" where you can't play, just choose randomly for this; Each player plays two per turn; The goal of the game is to complete a 5 in a row first. This elevates the game's difficulty because now you need to complete more to make a row, avoid the enemy's block as well as the natural blocks, as well as having to use actually complex strategies to trick the opponents and win. The trick is to allow yourself to gain three openings in a single move to effectively win. The opponent has two plays per turn so if you only have one opening, the game is almost guaranteed to lead to a draw since there isn't much place to play. Alike the original Tic Tac Toe where you have to provide two openings in a single move to win, this improved version made the mind-numbing experience fun and challenging. Ngl this was when I peaked in high school lol. I'm proud to say that I invented this game, or at least I'm the first to my knowledge. Try to play this version, it's incredibly fun. P.s. There is actually four different iterations of the same "map" where if you're experienced enough and the blocks are placed in a very specific position, you will 99% of the time defeat all newbies because this map makes it very easy to trick the opponent. But using this map in a match between two experienced players, the first player always wins unless they make a silly mistake. When I play this with my friends, there was an unspoken agreement between us to never play this map since it's essentially a guaranteed win to the first player. If you decide to play this version for yourself, I challenge you to find out what this map is! We found it during the first few weeks of gameplay.

[@-zero-]

rubiks cube tictachoe

[@KeksnussSC]

I think I saw something like this somewhere on KZbin, the goal is to not get 3 in a row.

[@shaunshuster7234]

Halit Başbuğ very beginners friendly

[@milanakik1539]

This will be short and easy. 5 minutes in "HEEEEEEEEEEELP".

[@zaid4708]

the only coding channel where you can learn and smile at the same time thanks man

[@raffaelenicolapiazzolla3927]

You can easily detect the "mouse-tile-position" and turn the game into a real playable game like this: let x and y be the coordinates of the mouse. You just have to reduce the "resolution" of the mouse position from 0 to width, to 0 to 2 (same for the height). So let i and j be the indices of the tile matrix. We can now calculate these indices like this: i = map(x, 0, width, 0, 2); i = Math.floor(i); j = map(y, 0, height, 0, 2); j = Math.floor(i); So now you just have to update the matrix referencing these indices and then draw it to the screen. Hope I helped!

[@TheCodingTrain]

Great tips!

[@RitobanRoyChowdhury]

Fun Fact: Python actually supports the 3 equals signs! This leads to a lot of confusion, because the following mean entirely different things: a == b == c a == b && b ==c && a == c (a == b) == c a == (b == c)

[@TheJerseyNinja]

Tic tac toe is dummy easy as a game. If you learn and follow the VERY easy strategy, you can literally never lose regardless of going first or second. Whenever I play someone they always don’t get how I’m “so good” at it and that I never lose. Silly people don’t realize there’s literally a super simple strategy to learn to literally NEVER lose

[@andrewnunes9148]

And you are so good in a super tic tac toe ? Where you have a 3x3 board of tic tac toes and you need to Win 3 of tem and where you play inside is where your opponent next move need to be in the outside game.

[@lffb8803]

He is doing that more as like an easy example. I bet he is even going to do something like a simple neural network or something.

[@DrUrlf]

You actually showed me how fun coding can be and also how fun it can be to watch someone else code! :D

[@1...........123-t9b]

yes he did

[@omartaha7105]

One of the best coding videos I have seen. This is so real coding.

[@GeodesicBruh]

I was coding my own version of this game prior to seeing this video, and i wondered if he too would experience the immense "bruh" of finding out that indeed, the code you wrote is fine, but if the squares are all blank they're still equal lol. kinda cool seeing how the code we wrote is similar

[@kevnar]

Word Squares: start with an n x n grid (3 for starters). Get a list of n-letter words (3, for starters). Fill in the grid such that every row and column spells one of the n-letter words, but no words are repeated. For example: T O O U R N B E E Can you make a program that creates these automatically? Then make them with larger grids, or even rectangles?

[@ThyDoctoh]

I have 0 idea what's going on here but I'm gonna freaking learn it.

[@markusmulholland]

I made this in a C# WPF project. It's interesting how different languages can achieve the same outcome in such different ways.

[@TheVideogamemaster9]

I did my own tic tac toe game in the p5 web editor 6 months ago, where you get to choose your piece, play against ai, have a line drawn through any winning rows/columns/diagonals, and it even has a built-in restart button, so you don't need to reload the page

[@TheCodingTrain]

Amazing, please share!

[@TheVideogamemaster9]

@@TheCodingTrain editor.p5js.org/PuppyProgramming/sketches/-cGEQdOhr

[@raresmacovei8382]

This started really concise and then went to math and even if I sort of got the reference points of X,Y target zero and that one unit of X,Y = "1 unit", he lost me completely, with the functions, the X-XR, Y-XR etc.

[@lffb8803]

Is it just me that realized that on the checkWinner function he returns either "tie", "X" or "O" but then on the loop he checks if the result is equal to null? but it worked just fine because as its never equals to null, it logs what was returned which was one of those 3 and those are valid outputs

[@xsufu]

Какой же он экспрессивный, как много эмоций. Когда я пишу код, мне хочется убивать всех в радиусе 1-го футбольного поля (kappa) до тех пор, пока код не начнёт работать так, как я хочу. Спасибо за видео, подняло настроение. (Но вообще ничего не понятно)) )

[@TechnoDB]

*This is what I was searching for* Thanks dude :)

[@SimonTiger]

Of course when you splice out it comes in an array, because you can splice multiple things from the array!

[@NocturnalCoder]

What are the odds, we were assigned to some projects JUST yesterday and one of them was AI playing tic-tac-toe! xD

[@siddharthdyavanapalli4617]

It's good in C++ since it's user based and here we have to choose the random winner. Soory to say this sucks but I appreciate him for the way he codes

[@learningrabbit8265]

I love how you explain stuff. All this makes me enjoy all this more than I already do. Thank you !

[@learningrabbit8265]

Also, can you describe how did you setup the editor in your background with you in the foreground ?

[@ALX3rdS]

I'm starting coding with JS, I don't understand a single thing but dang I'm enjoying it.

[@rubenlarochelle1881]

It's so weird to watch the best programmer I know having trouble with Tic Tac Toe ahahah

[@raghavkamath]

*Objective: Create a 3x3 tictoe* *_Instead proceeds to create weird shapes in console XD for the first few minutes_*

[@eualexslim]

Hi, I'm from Brazil, I love your videos ... Congratulations !!

[@AleksanderFimreite]

Quick coding challenge with Shiifman? I've got to see this!

[@amit-mishra]

Beginning python understood very little but still enjoyed your process 😀🎉

[@vinceguemat3751]

with a friend we have made an harder version of tic tac toe called Ten were you play in 9 tic tac toe in the same time and thoses 9 create a biger tic tac toe (the 10th)

[@KakoriGames]

What a train wreck, but I love it 😂😂😂. I have to say, I've coded in Python for some time and even coded in Processing and P5 for a while, but after switching to C# I just can't go back. P5 code looks like a jumbled mess in comparison to my organized Visual Studio C# 😂😂😂. Love your videos, keep the good work.

[@mukyu1148]

The fact that im a 0% coder is making this video awesome. all i understand are numbers value of something lmao

[@TheUKNutter]

Tic tac toe? Don’t you mean Naughts and Crosses?

[@kdmq]

Who else got super OCD angry when Daniel didn't put the stokewidth command in the setup function, meaning that the strokes thicken at the first move?

[@dilute6980]

also: if you find a winner, you can just call return, so you dont need to check again.

[@NavyBlueMan]

I'm trying to make a program that simulates traffic and develops an algorithm for red and green lights that first stops crashes and secondly optimises traffic flow. There's a double T intersection near my house (almost a 4 way intersection but 2 of the roads are offset, so instead of + it's --"--,,-- if you imagine the quotation marks as a downwards road and the commas as an upwards road - this is hard to visualise on a youtube comment). I feel like this might be something too advanced for me so I figured it might be a nice idea to share with you as an idea for a future coding challenge

[@timtech9361]

tic tac toe is by no means a beginner project. It is very hard to build even for advanced programmers.

[@TheCodingTrain]

Agreed!

[@Vyap2702]

I don’t even know p of programming but I am watching this because it is my dream to become a computer programmer and I am so eager to go to college for that and make my own projects in my own time. I am sooo eager ahh how long do I have to wait.

[@BlackJohnOP]

Just start, there's no need to wait.

[@user-sc3oh1bw4z]

im not programmer but i love coding.. and this is definitely me when im playing with script... the FUN 😂😂😂

[@spoo5521]

Its funny cause im new to p5 but I knew some of the code not because of tutorials or anythng but because I know tic tac toe keep up the good work

[@samuelsimon4087]

My first "game " I made was tictactoe in bluej using only console. I managed to make 3 different ai versions,

[@anandvijayan710]

You are a crazy programmer

[@aidabenabdallah5186]

very good keep going i love the matter wich you present thnak youu

[@pedroduran8927]

I love your energy, i wish that i had people like you as my teacher in programming at university haha, keep up doing great things man! cheers!

[@DavisTibbz]

haha this was super entertaining! 😜

[@TheCodingTrain]

Thank you!! 😁

[@epiepe8190]

Hey, i really like your videos and i hope you can help me. You know the julia sets have all different not integer dimensions. I think it would be very interesting to have a map of the mandelbrot set that shows the magnitude of the dimension of the julia set for that parameter c. So a higher dimension creates a darker point. So the program needs to create the julia set, then to calculate it's dimension (i think box-counting) and then to give the point a magnitude. I am a beginner at programming and i do not get it. But maybe you think it's interesting too and you take the challenge :)

[@VIGNESHGOPAL]

I have a doubt. I don't see any purpose of the 'depth' variable passing to the minimax function. Is that variable has real purpose ??

[@ionicafardefrica]

i think i'm missing something. I'm at 3:30 and I see 2 functions, but they are not actually called anywhere. Also there's "createCanvas" that's not declared, also the variableswidth and height (gonna assume the backgroud function is part of the library?). How is this actually working? Is there another video before this one? Also, the naming of those variables... make it a little more verbose? xr would be better named xRadius for instance, don't you think?

[@CharleswoodSpudzyofficial]

I'm very impressed

[@jenish2727]

I didnt understand anything you said but I watched full video

[@mitogaming101]

Nice that help me a lot and also my code is working

[@oleksandrnemesh]

if a==b and b==c we shouldn't check a==c because it will return true anyways.

[@digiton7]

I'm just looking while blinking my eyes, what's going on 😶👀

[@acebishbi]

i like this one, interesting

[@djkujek2748]

good, mister

[@jostein6581]

"The only winning move is not to play"

[@kawtarhmd2238]

Ohhh very well 🥳

[@erickoavenada969]

Bro made this without html

[@yanivyshaayahu3995]

I'm hoping that you make one with no p5

[@yadavg520]

22:32 it's triple X 🤣🤣🤣

[@janvimyadventures1310]

What software are you using

[@aymen4591]

i will comeback againe and i will be able to undrstand every thibg you did i promise ✋

[@ggeorgieva4718]

Hey what programming language is this?

[@aarvinoth9452]

What is the app or website your using

[@culiynl]

Someone please help my whole board is rotated and doesn’t line up

[@kacperozieblowski3809]

9:10 agggrrrhhhh, use the ternary operator, please. that angering me brains

[@justarandomlol]

Wouldn't be a == b && a == c be enough instead of a==b && b==c && a ==c?

[@kingcold7984]

Sorry if this is a dumb question, but can one code all the things Dan has coded in by using another language? Say C++?

[@Shenanigans07]

Absolutely! I use C++ and C# for most of his videos.

[@SpeckyYT]

In Italian, it's called "Tris"

[@andreatebi3927]

Sei ita?

[@SuperDoggykong]

Why did I watch 24 minutes of some one suffering

[@blinzi69]

please please please do sudoku next :-)

[@rajtripathi8403]

why is it not happening ?? just telling unexpected end of input at last line

[@AndFatim]

can I do this on Sublime Text ?

[@Kela20rupskilo]

I am in 8th grade and I want to become a software engineer what should I do in this age plz tell

[@haterantfueacuisine7905]

Can I play it by myself or not

[@rtn24]

Where this code to be written

[@BuriBuster]

This is always the problem with the AI, where do you draw the line?

[@cozmo1520]

I made a different tic-tac-toe code for Cozmo in: kzbin.info/www/bejne/pKGYZpaIoLx1b80

[@HarshRajAlwaysfree]

"I will teach how to can make AI play it " :D "But not in this video" D:

[@alexandergornung]

Where does Daniel come from?

[@dhruvagrawal3856]

and it worked

[@cadfoot568]

Where I can download the Refactoring song? It is perfect to troll my coworkers

[@willemkossen]

cadfoot same request here!

[@pseudotaco]

kzbin.info/www/bejne/iXa3n35oo95kiJI -Just use a mp3 converter/downloader- Actually, for your convenience, here is a link: www.mediafire.com/file/4yqsz0qiye913g2/Refactor.m4a/file

[@360flipsAreAwesome]

It's "Refactor" by Espen Sande Larsen.

[@iliakipshidze4628]

can someone tell me where can I see written code?

[@vdmbeastgaming3033]

How can u play it then

[@enflie9518]

He' so happy while coding 😂😂

[@legenddahn1635]

This is literally me all the time when I'm coding

[@puppergump4117]

Actually he smiles and laughs in response to pain, we're just witnessing his torment

[@theangriestcrusader]

Everyone not coding in Java or C++ is

[@zer0python]

When you had if(a == b == c) I was like "I had no idea you could do that in Javascript, neat.", then you were like "Oh, I can't do that". My dreams have been shattered.

[@TheCodingTrain]

😭

[@TheStrangeStorm]

If only there was a language that could do this oh wait, there's python.

[@CaelVK]

Too bad python is trash

[@josuesuazo3635]

@@TheStrangeStorm yeah is trash javascript is more better to understand and for career to find jobs.

[@spiderjerusalem4009]

@@josuesuazo3635 fix your english so you'd be able to speak in order to find a job

[@k12moyo]

13:11 Daniel.exe stopped working.

[@HDuser100]

That's how my bsod sounds like lmao

[@ShaneDavisDFTBA]

@The Coding Train Permission to clip this audio and use as error alert in everything ever?

[@factbaba9593]

Its show some ERROR like "EORRRRRR" 🤣🤣

[@UserUnknown07]

He obviously did that for a while, and edited it out 😂

[@HaloWolf102]

This is the best video I've seen so far on KZbin for coding. You know why? Because he makes mistakes, and then corrects them, and that's the most human thing you can do. A good way to teach people coding, is by running them up on the basics, and then let them make a lot of mistakes, the more mistakes you solve, the more you will know down the road. I like to prioritize better problem solving, over memorization.

[@hofi56]

Mech I agree! I'm a real beginner and I find that I learn the most when I'm trying to correct my own mistakes.

[@gomo5628]

best part is, you can see he is thinking in code not in English...know his think, its just he talks/action faster then he thinks lol

[@ResanChea]

"this will be a simple game to make for the beginners" 5 minutes in *MATH EVERYWHERE*

[@ncik515]

Blue he means new programmers, not people that can’t do math lool

[@stillrabit73]

If you want to be a programmer and you think divisions and offsets are math everywhere, I got some bad news

[@nicolakozera3853]

When it comes to programming, I know only basics in C++, yet I've watched all that video with wide smile. You are amazing 😂😂

[@MustafaSaheb]

The god bless you 🌹 🇮🇶🇮🇶🇮🇶

[@d-o-n-u-t]

I’ve actually been getting into C++ too! C++ gang, RISE UP

[@harshvardhan3907]

he says its beginner stuff when people like us watching like " :O wow "

[@tamaghnadey3050]

I know html css js py java and arduino but I really want to learn about c++...so hail c++!

[@gabrielbreeding6073]

Awesome! I'm in college right now for computer application development and learning c++! I've made minesweeper for an older version of python a few years ago and im planning on doing the same with c++ along with a classmate

[@anuraghazra4772]

"The Video Will Be Very Short" then i looked into the duration... and its 24mins. well, i was expecting 10 mins :D

[@TechnoDB]

:)

[@numero7mojeangering]

:)

[@doransring660]

:)

[@0Arman0]

:)

[@markodelic8675]

:)

[@sahilpohare]

Nobody: Computer: goes crazy because of silly error Dan : F-ing hysterical laughter Watch him slowly decend into insanity toward the end of video

[@puppergump4117]

He's not completely insane yet, he's not using plain java

[@ryank4087]

@@puppergump4117 hes not programming in c yet, thats when he will fully go insane

[@puppergump4117]

@@ryank4087 I'll have you know that anyone that learns C as their first language will have the best programming foundation. Complex behavior should come from simple rules.

[@dumbidiot1119]

@@puppergump4117 I just mean c has lots of little quirks that would cause him to go insane

[@Jiftoo]

"This video will be very short..." Famous last words

[@k1ngjulien_]

> Wants to make a beginner friendly version of Tic Tac Toe > Makes the most Complex Tic Tac Toe imaginable

[@hofi56]

LOL yeah programming in a nutshell (from my beginners point of view)

[@kenan2386]

@@hofi56 lol i made a 3d race game when i wanted a simple little game

[@skanderkrid1899]

@Lukas If he's not going to answer, I would recommand taking a look at unity, it's a game engine that is beginner friendly and free and you can find a lot of help and resources online. It's designed for both 2d and 3d games.

[@hritcanalexandru6503]

I challenge you to do a SUDOKU GAME ;))) I think it will be funny 😂💪

[@testtester1240]

Sudoku Game in a rush :D

[@YourSuizo]

You could have used numbers for X and O, for example -1 and 1, it is really easy to check if there is victory on that set of 3 by summing them: -3 = 3 X 3 = 3 O Anything else = no victory on that set Also by using 0 as empty, you can check if there is space still left on set by multiplying them, if product is 0, then there is still space. So in the end you would check if set product isn't 0 and sum is -3 or 3 for victories. But yeh might not be most intuitive approach to the problem. Just leaving this here if someone needs this tip. Edit: also turn change goes just by multiplying by -1, causing it to alternate between -1 and 1.

[@TheCodingTrain]

Oh, what a great suggestion!

[@justanothergirl__]

When I coded TTT in C# for one of my courses, I used this approach. Except I used 1 for "X" and 2 for "O". So I checked for 0 (game can continue), 1 (X won), 8 (O won), and a tie can only happen (officially) on turn 9, so as long as none of the products were 1 or 8, I could confidently declare a tie.

[@BrendanChewy]

this is one of the most elegant programming ideas I've ever heard of, nice!

[@arpita1shrivas]

dude

[@Le_Codex]

When I watch your videos I actually get a Bob Ross feeling, with all your positivity and showing and explaining how you make everything Yeah, Coding Bob Ross but a bit faster paced ^^

[@victormwaura3517]

I get that feeling too. Whenever I hit a snag I just come back here and get the excitement going again.

[@drakibble2199]

Hey! I love your videos and they are very informative, and I love how excited you are to solve these challeneges. Thank you for your videos!

[@herevancelightena9770]

The way you dance make my day. It's so stressful with learning 4 programming language by 3 professors. Thanks by the way tho I love it

[@jaredcortes366]

Ikr

[@YourNameHere1000]

Why is the first video not C++?

[@monocore]

I’m a 3d artist and a compositor. I work with a node based software. Even tho I know nothing about coding, there’s something really soothing about watching you plot your logic onto steps understandable to a computer. Also, the trick where you boil down a screen to a one dimensional array saved me a lot of trouble a couple times. Those tiny bits of super simple and elegantly put math are awesome.

[@SpencerTwiddy]

5:13 his "1" is literally a "2" I'm dead XD

[@thevirtuoso5428]

@SpencerTwiddy Nah look again it s a "1"

[@naimcool36]

RIP