Ok, the reason why the isometric view is off is because you did the rotates wrongly. Replace: RotateX(-QUARTER_PI) RotateY(ma) With: RotateX(ma) RotateY(-QUATER_PI)
I did the same thing on an Apple ][ and I thoroughly agree. Dan has helped me try to restore some fun to my coding. To approach it with the same sense of wonder and excitement that motivated me to push through the incredibly difficult thing I was trying to do back then.
I salute you both. I don’t know what I would do without today’s IDEs and their auto-completion. Probably a whole lot of single syntax typing then testing immediately after to see if did something spectacular.
Father Mark I guess you are from Ireland. Gee, how well I remember Father Mark's repetitive quotes: "Drink, drink drink!"..."Girls, girls, girls!" ...."Feck, feck, feck!"
wow, i enjoyed this so much, i watched it and coded along, only took me 2 hours (yes, i know about the source code being available but wanted to code it)
Holy cow. you can program so fast! I made the same thing in C++ and OpenGL, and it took me nearly a day. Most of the time I'm just thinking what to do next in my code, and you just keep going somehow. How do you do that?
Instead of working on each block individually, you could have create and animated f(x) = (sinx, sinx, constant), then use the method used for Riemann Integral (creating blocks under the curve of each sinus function). Edit: Then mirror it on one axis.
I really enjoy these videos but I dislike that you use P5 in everyone of them. It's hard to tell if something is a P5 function or something that's regular JS/Canvas/WebGL and if it isn't, it's difficult to know how you'd do the same thing without libraries. I don't think P5 is something I could use a lot in production.
Why couldn't you use P5 in production? If you go to the Processing web site they have an entire archive of projects currently in production! I myself have used it for when producing online games!
You can make all the functions he uses in whatever language you prefer if it doesn't have it already. I know I already want to steal that map function to use it in java, as I'm not aware of a class or anything that does it.
When I used to follow his videos (now I just watch them, I already pretty much finished making stuff I wanted to) in pure javascript (no frameworks, libraries at all, just pure, built-in browser javascript), it took some work to setup some things but it wasn't really that hard... It's not hard at all to tell if something is P5 or not, you're just not experienced enough to know what JavaScript has or doesn't have... I don't even like this language, I just enjoy HTML5 Canvas, since they just work, and you can probably even build 2D games with them, nor I use it that much and I had no problems following his videos, maybe you should just learn more instead of complaining?
They create a "block" of instructions that all get sent together to the Graphics Layer, thus reducing the number of "housekeeping" operations it has to perform. It's also commonly used to "temporarily" apply transforms/rotates, and have them all "revert" with a pop.
when i had this script: let angle = 0; let w = 24; function setup() { createCanvas(400, 400, WEBGL); } function draw() { background(100); noStroke(); ortho(); //translate(width / 2, height / 2); rectMode(CENTER); rotateX(angle); translate(0, 50, -50);
//rotateX(angle * 0.25); let offset = 0; for (let y = 0; y < height; y += w) { for (let x = 0; x < width; x += w) { push(); let a = angle + offset; let h = map(sin(a), -1, 1, 0, 100); //fill(255); translate(x - width / 2, y - height / 2, 0); normalMaterial(); box(w - 2, h, w - 2); //rect(x - width / 2 + w / 2, 0, w - 2, h); offset += 0.1; pop(); } } angle += 0.1; } it didn't stop
It took me so long to figure out how to make it spherical vs the shape of a sine wave. You see a lot of people saying to "just square the offset" but that didn't immediately click for me. The solution was to simply square both the distance and the max distance, doh. Update your offset to this and it looks just like the original: let offset = map(d * d, 0, maxD * maxD, -PI, PI)
you don't need to use a 3d engine, you could just draw a ton of rectangles from that back corner, sweeping from "left" to "right", back to front, to avoid some rectangles going over some that shouldn't be covered
I think the offset of the corner parts needs to be te same as the offset on the middle part, also the max offset should be the width of the whole thing minus the base height...
First thing ever in codingtrain I dont understand. Pop and Push should be on something. But here they are used inside the sketch and not on an object??? On what are they used
Great job sir. But yo gotta tell us that for how long have you been in this coding thing coz you just calculate stuff so quickly. You are the "Coding Flash"!
Its an orthographic projection but a isometric view. Isometric view is that the lines going in the back are 1:1 in length and 30 degrees angle going to the back
So I'm up to 9:22 when switching from 2D to WEBGL and the boxes borders/lines aren't showing. This is my first time doing anything with WEBGL lol help!! var angle = 0; var w = 24 ; function setup(){ createCanvas(1700,400, WEBGL); } function draw (){ background(175); //translate(width/2,height/2); rectMode(CENTER); //rotateX(angle*0.4);
let offset = 0; for (let x = 0; x < width; x+= w){ push(); let a = angle + offset; let h = map(sin(a),-1,1,0,100); fill(255); translate(x-width/2,0,0); box(w); //rect(x-width/2+w/2,0,w-2,h); offset += 0.1; pop(); } angle += 0.1; }
Gid. I love watching him code. Even though I haven't started learning JavaScript yet and a lot of what he does confuses me a bit, his code looks so AMAZING. Mine is all jumbled and stuff and I only put space between my code when I'm done with a concept completely, he does when he's done with a thought, and that doesn't usually look good, but this guy pulls it off and it looks amazing! Lmao
rightnow my other computer is calculating the 10000031th prime number. It was an accident! (kinda) What app you using? Do you have a tutorial on p5? Sorry for the questions.
Today I post videos about basic voxels then daniel went and posted this today.... now I feel compelled to try to implement this sort of effect with voxels. Guess I'll be up late tonight... :P
Hey Dan I have been following you for awhile and I must be an idiot for not figuring this out by now. But how are you building this on a local server? I've looked at the github repos and still can't figure out how you run these projects off your local server.
I believe this one is using processing.org which is a standalone desktop app (written in Java), but for my web / local server workflow you can check this out: ua-cam.com/video/HZ4D3wDRaec/v-deo.html
it can be done witout javascript ! .... just make a cube with css ( 6 planes that has transform: rotate3D and translate3D ) ... and then asign an 3d animation to the container ... at last , set the animation-dlay property for each item .... so everything ( 3d stuff , animation , etc ) just performs by browser itself
I stop programing a long time ago. But look at you doing this UA-cam . Make me remember my past and the exitment when i finish a program :). THANK YOU.
Can someone help me? The boxes that have been drawes have no black-colored edges. They have the same color as the box. And when I try my program on the Website of P5 everything works how it should. what can I do?
Tweak the amplitude and quantization (reduce the # of cubes over the same area, increase the amplitude), perform rotations mentioned below and done ...
Honestly you could have eased your life with just implementing a radial wave function (ripple-effect) and just height of that as it progresses over time. Then you would have been able to get rid of this handselected offset, and would have gotten a sinus shaped flow.
you can do it in a simpler way such as making all the boxes (4*4) and one in the middle who have all the script it will detect how mush far is the other boxes and their high will be angle*(offsent+distance)
I was thinking of a completely different approach. I learnt programming in Fortran, so the first thing for me is almost always going for arrays. Like you could make an array that stores a position for every little box and then assign a dynamic value of height to each value of that array? I know pretty much anything about p5 and processing, but I do want to learn!
Just started a coding camp and found your channel. You're brilliant friend. Absolutely brilliant, thank you for sharing your knowledge and your thought process while breaking down the code!
Try either of these playlists to start from scratch! ua-cam.com/users/shiffmanplaylists?view=50&shelf_id=14&sort=dd ua-cam.com/users/shiffmanplaylists?view=50&shelf_id=2&sort=dd
Au début le bitcoin était révolutionnaire il apportait notamment la technologie blockhain. Maintenant il y a d'autre altoins bien plus intéréssante tel que Ripple,Ethereum, Monero, IOTA, DAHS etc basé ou non sur la blockchain. Sinon bonne vidéo .
You should have rotated about x by quarter pi not minus quarter pi that way you wouldn't have had to throw those negatuve2 numbers into the ortho function
Ok, the reason why the isometric view is off is because you did the rotates wrongly.
Replace:
RotateX(-QUARTER_PI)
RotateY(ma)
With:
RotateX(ma)
RotateY(-QUATER_PI)
Thank you!!! (Actually I think I it should be. . . )
rotateX(-ma);
rotateY(-QUARTER_PI)
YES
The wiki for iso view refers to plane rotation while the p5 function rotates around the said axis
Thought it was abit wacky when he called x vertical
Yeah, so painful for me to watch this back!
Glad to help ^_^
15:24 lmao every programmer 30 min after enthusiastically starting a new project;
This dude can literally create anything with his mind
he can
This is what I think people call "god-like powers"
kenan 238 English?
And his laptop
Most of us would have to use a computer to do stuff like this.
Nobody: ...
This guy: Translate();
So happy that you've gotten back to graphical coding challenges
Thanks!
As some one who taught himself assembly language on a commodore 64, may I say you are exactly what aspiring young programmers need. Good work sir.
I did the same thing on an Apple ][ and I thoroughly agree. Dan has helped me try to restore some fun to my coding. To approach it with the same sense of wonder and excitement that motivated me to push through the incredibly difficult thing I was trying to do back then.
I salute you both. I don’t know what I would do without today’s IDEs and their auto-completion. Probably a whole lot of single syntax typing then testing immediately after to see if did something spectacular.
where ddi you guys learn to code by yourselfs?
I did all of the above and built 3d render engines from scratch. Im talking from scratch meaning no libraries, not even a graphics api.
Father Mark I guess you are from Ireland. Gee, how well I remember Father Mark's repetitive quotes: "Drink, drink drink!"..."Girls, girls, girls!" ...."Feck, feck, feck!"
WebGL: can't handle 2d, runs 3d perfectly.
"My powers are massive, not catered to your lowly tasks... "
Webgl can, p5js can't
the rect() function in webgl p5.js actually draws so many triangles that webgl starts lagging when the triangles move to each other
Lmao "Rotate 45 degrees..." PI/8
That was funny
it was 22.5 instead of 45 lmao
Please, please do more from Bees and Bombs. Some of those are really mind-boggling and I have no clue how he does them in processing.
wow, i enjoyed this so much, i watched it and coded along, only took me 2 hours (yes, i know about the source code being available but wanted to code it)
Holy cow. you can program so fast! I made the same thing in C++ and OpenGL, and it took me nearly a day. Most of the time I'm just thinking what to do next in my code, and you just keep going somehow. How do you do that?
Using distance to do the offset is genius. I'm adding that to my toolbox.
2:11 "so if we just let h equal 100..." and there you go. all done.
SHIFFMAN IS THE NEW BOB ROSS
If Bob Ross drank a lot more coffee luv u Dan
12:37 ah, the Unity forum, one of my most frequently visited websites xD
26:20 Larry David reference xD
13:56 It looks like a very low resolution 3D Game (The ones from scratch)
Late but the push()/pop() resets the matrix (the translate()) after each iteration of the for loop. - Joel
I have made orthographic projection in scratch. (I made it without knowing it)
You should have made it in a rainbow color in order to honour your old channel name! Keep up the good work!
orthographic projection: flashes back to all my TD (Technical Drawing) classes in secondary school
I actually tried to improve the version.
editor.p5js.org/lavagod/present/M2tExTqYd
Instead of working on each block individually, you could have create and animated f(x) = (sinx, sinx, constant), then use the method used for Riemann Integral (creating blocks under the curve of each sinus function).
Edit: Then mirror it on one axis.
Super exciting to see you doing these real time coding, I learn a lot from you and, specially important, I get a lot of inspiration
Seriously right? Sometimes I think I can't move forward. Then I see a video like this knowing I NEED to move forward because this looks HELLA fun.
I really enjoy these videos but I dislike that you use P5 in everyone of them. It's hard to tell if something is a P5 function or something that's regular JS/Canvas/WebGL and if it isn't, it's difficult to know how you'd do the same thing without libraries. I don't think P5 is something I could use a lot in production.
David Karlsson Exactly
Why couldn't you use P5 in production? If you go to the Processing web site they have an entire archive of projects currently in production! I myself have used it for when producing online games!
Yes, he should be using the modern pipeline of opengl in c++. Would be much easier to follow
You can make all the functions he uses in whatever language you prefer if it doesn't have it already. I know I already want to steal that map function to use it in java, as I'm not aware of a class or anything that does it.
When I used to follow his videos (now I just watch them, I already pretty much finished making stuff I wanted to) in pure javascript (no frameworks, libraries at all, just pure, built-in browser javascript), it took some work to setup some things but it wasn't really that hard...
It's not hard at all to tell if something is P5 or not, you're just not experienced enough to know what JavaScript has or doesn't have...
I don't even like this language, I just enjoy HTML5 Canvas, since they just work, and you can probably even build 2D games with them, nor I use it that much and I had no problems following his videos, maybe you should just learn more instead of complaining?
29:19 !!!!! XD
Your laughing style is amazing ... I like it ..
idk why you keep changing the well-named variables to single letters lmao
Yea, Processing devs need to stop using too many abbreviations in their variables
Okay, I admit.. you nailed it.
...as usual. :)
No he didn't...but close!
Is there a youtube channel like this but with other programming languages? Python for example? This channel is so cool.
No there isn't
8:55 What purpose does the push() and pop() fill?
They create a "block" of instructions that all get sent together to the Graphics Layer, thus reducing the number of "housekeeping" operations it has to perform.
It's also commonly used to "temporarily" apply transforms/rotates, and have them all "revert" with a pop.
you made me want to try this out myself, but in c++ XD
I really get the urge to make a hacky 2d css transition version of this
I cant believe how few lines of code it takes to make that first ocelating movement
oscillating
Greetings from Laponia
when i had this script:
let angle = 0;
let w = 24;
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(100);
noStroke();
ortho();
//translate(width / 2, height / 2);
rectMode(CENTER);
rotateX(angle);
translate(0, 50, -50);
//rotateX(angle * 0.25);
let offset = 0;
for (let y = 0; y < height; y += w) {
for (let x = 0; x < width; x += w) {
push();
let a = angle + offset;
let h = map(sin(a), -1, 1, 0, 100);
//fill(255);
translate(x - width / 2, y - height / 2, 0);
normalMaterial();
box(w - 2, h, w - 2);
//rect(x - width / 2 + w / 2, 0, w - 2, h);
offset += 0.1;
pop();
}
}
angle += 0.1;
}
it didn't stop
It took me so long to figure out how to make it spherical vs the shape of a sine wave. You see a lot of people saying to "just square the offset" but that didn't immediately click for me. The solution was to simply square both the distance and the max distance, doh. Update your offset to this and it looks just like the original: let offset = map(d * d, 0, maxD * maxD, -PI, PI)
Increase frequency and amplitude of the waves, while decreasing the time step... IE larger and more frequent waves, but with a slower change
Fun tip!
1/sqrt(2) = cos(45)
hmm...this looks difficult
you don't need to use a 3d engine, you could just draw a ton of rectangles from that back corner, sweeping from "left" to "right", back to front, to avoid some rectangles going over some that shouldn't be covered
I think the offset of the corner parts needs to be te same as the offset on the middle part, also the max offset should be the width of the whole thing minus the base height...
Please please please make minecraft like game in p5.js
In 30 minutes 👍
Which IDE does he use? I still use p5.js web editor but I want to use an IDE. Can someone recommend please?
Do you realise that the movement is backwards compared to the gif? It’s almost completed!
it would be so easy to just rotate it by 45° and it would be isometric
First thing ever in codingtrain I dont understand. Pop and Push should be on something. But here they are used inside the sketch and not on an object??? On what are they used
You just explained a sine wave to me better than anyone ever did, in like 30 seconds!
*ORTHOGRAPHIC PERSPECTIVE*
OMG! You are amazing
Philippe Henrique "you is" 😂😂😂😂😂😂
I just realized now the mistake
The proper grammar for that is "I just now realized my mistake."
ophello thanks for the correction
actually i know 0% of p5.js and anything you are doing in p5 and 3d but i enjoy watching you anyway..
I sat here for 30 minutes hopping to learn something well i did and that is that I’m rly bad at coding compared to him
Best part: 30:00
Great job sir. But yo gotta tell us that for how long have you been in this coding thing coz you just calculate stuff so quickly.
You are the "Coding Flash"!
Its an orthographic projection but a isometric view. Isometric view is that the lines going in the back are 1:1 in length and 30 degrees angle going to the back
Thank you for this clarification!
So I'm up to 9:22 when switching from 2D to WEBGL and the boxes borders/lines aren't showing. This is my first time doing anything with WEBGL lol help!!
var angle = 0;
var w = 24 ;
function setup(){
createCanvas(1700,400, WEBGL);
}
function draw (){
background(175);
//translate(width/2,height/2);
rectMode(CENTER);
//rotateX(angle*0.4);
let offset = 0;
for (let x = 0; x < width; x+= w){
push();
let a = angle + offset;
let h = map(sin(a),-1,1,0,100);
fill(255);
translate(x-width/2,0,0);
box(w);
//rect(x-width/2+w/2,0,w-2,h);
offset += 0.1;
pop();
}
angle += 0.1;
}
Can you ask this at forum.processing.org? It's easier for me and others to help that way (you can share code there easily!).
Gid. I love watching him code. Even though I haven't started learning JavaScript yet and a lot of what he does confuses me a bit, his code looks so AMAZING. Mine is all jumbled and stuff and I only put space between my code when I'm done with a concept completely, he does when he's done with a thought, and that doesn't usually look good, but this guy pulls it off and it looks amazing! Lmao
Please do more audio stuff!
You could use only 1/8 of the sin operations by mirroring.
Nice tip!
Yeah! I was thinking similar.
Good point.
For an ofset centered around zero, you could square the numbers so they eminate from the origin
Is it possible to learn and get a job as a software engineer without college?
Whats the difference between void setup() size(x, y); and setup() {
createCanvas(x, y);}?
One is Processing, one is p5.js, see: ua-cam.com/video/AmlAiKsiy0o/v-deo.html
thx a lot!
rightnow my other computer is calculating the 10000031th prime number. It was an accident! (kinda)
What app you using? Do you have a tutorial on p5? Sorry for the questions.
it was taking too long!
Today I post videos about basic voxels then daniel went and posted this today.... now I feel compelled to try to implement this sort of effect with voxels. Guess I'll be up late tonight... :P
Isometric was right. I always think of "orthographic" as from the front/back, sides, top/bottom...
What's the command you're doing to re-format the code?
That’s a pretty good LD impression!
Hey Dan I have been following you for awhile and I must be an idiot for not figuring this out by now. But how are you building this on a local server? I've looked at the github repos and still can't figure out how you run these projects off your local server.
I believe this one is using processing.org which is a standalone desktop app (written in Java), but for my web / local server workflow you can check this out:
ua-cam.com/video/HZ4D3wDRaec/v-deo.html
This guy is fantastic,kudos to him!
You know someone is a real programmer when you type the same word over and over doing mistakes because your mind is going faster than your hands
my god, thhis is free tutorial... damn love it
It's amazing ! You are the amazing programmer !!! :O
Daniel you should check out the subreddit www.reddit.com/r/dailyprogrammer/ and do some challenges from there, too, and submit them :D
Oh great idea, thank you!
That looked like a jellyfish at the end
directionalLight(255, 255, 255, 0, 1, 0); This is for top down light.
directionalLight(255, 255, 255, 0, -1, 0); is for bottom up
What programing language is that ? Can someone help me, please ? It looks so familiar. It's like C++
It's using a javaScript library called p5.js, look it up.
it can be done witout javascript ! .... just make a cube with css ( 6 planes that has transform: rotate3D and translate3D ) ... and then asign an 3d animation to the container ... at last , set the animation-dlay property for each item ....
so everything ( 3d stuff , animation , etc ) just performs by browser itself
I stop programing a long time ago. But look at you doing this UA-cam . Make me remember my past and the exitment when i finish a program :). THANK YOU.
Awesome video...you are the best
I have no idea what he's doing but it looks cool.
Can someone help me?
The boxes that have been drawes have no black-colored edges. They have the same color as the box. And when I try my program on the Website of P5 everything works how it should. what can I do?
Thx for using dark backgrounds..
Can you upgrade, simplify or convert my version of KAREL 3D in WebGL with Three.js to p5.js?
My slightly modified version of this challenge, working code: github.com/Steve0929/WaveCube
Tweak the amplitude and quantization (reduce the # of cubes over the same area, increase the amplitude), perform rotations mentioned below and done ...
Honestly you could have eased your life with just implementing a radial wave function (ripple-effect) and just height of that as it progresses over time. Then you would have been able to get rid of this handselected offset, and would have gotten a sinus shaped flow.
can someone help me i cant get the rectangle to show ??
you can do it in a simpler way such as
making all the boxes (4*4) and one in the middle who have all the script
it will detect how mush far is the other boxes and their high will be angle*(offsent+distance)
I was thinking of a completely different approach. I learnt programming in Fortran, so the first thing for me is almost always going for arrays. Like you could make an array that stores a position for every little box and then assign a dynamic value of height to each value of that array? I know pretty much anything about p5 and processing, but I do want to learn!
Just started a coding camp and found your channel. You're brilliant friend. Absolutely brilliant, thank you for sharing your knowledge and your thought process while breaking down the code!
sheesh. ur honestly mad. i want to code when im older but i have no idea how i could ever learn half as much as you know
Try either of these playlists to start from scratch!
ua-cam.com/users/shiffmanplaylists?view=50&shelf_id=14&sort=dd
ua-cam.com/users/shiffmanplaylists?view=50&shelf_id=2&sort=dd
In my first look in the thumbnail i thought it was Rubik's cube
OMG!!!! I GOT HEART IN CODING TRAIN FOR THE FIRST TIME!!!!
How did you set up atom with the browser and how to do it on windows . Because i love using atom plz help
This workflow video might help! ua-cam.com/video/gJa6wri8YNQ/v-deo.html
(Full playlist: ua-cam.com/play/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X.html)
Au début le bitcoin était révolutionnaire il apportait notamment la technologie blockhain. Maintenant il y a d'autre altoins bien plus intéréssante tel que Ripple,Ethereum, Monero, IOTA, DAHS etc basé ou non sur la blockchain. Sinon bonne vidéo .
You should have rotated about x by quarter pi not minus quarter pi that way you wouldn't have had to throw those negatuve2 numbers into the ortho function
cool.......this is the type of thing I dig most........& they should almost always all use WEBGL
Coding along, I add ortho() and and my boxes disappear, comment it out and they reappear. Why?
The magic angle variables equals 60. It'd be exactly the same as in bees n bombs. That will fix the perspective
Omg just set your z clip planes to posetive and negative infinity
this is great, I'm trying to do the same you did but in Unity and with c#. good practice
My sugesstion is to make a kind of a splix.io game) This would be funny)(using p5.js)