« first day (1907 days earlier)      last day (3266 days later) » 

21:00
Well, the canvas can get very slow on firefox, but it's actually decent on IE and Chrome.
@AlexMitan they can if you aren't careful
fuck
JS's math is especially slow
when did codepen stop allowing cors images?
da fuck?
I've had problems with it before, doing image math :(
21:00
@rlemon very very recently. I think it's a bug
Not sure where this falls into the mix, but so fuckin' cool, madebyevan.com/webgl-water
Failed to load resource: the server responded with a status of 403 (Forbidden)
@Loktar you suck at programming, lol
you're almost better off using a WebGL context if you can and still projecting it into 2D
@KendallFrey I know
21:01
@ssube 2d webgl is crazy fast
@Waxi caustics are sweet
@AlexMitan you can coax it into doing stuff jsfiddle.net/loktar/63QZz
Also, while we're at it, here's what I presented to my class for a canvas demo: jsfiddle.net/thePivottt/dbjxd4xx/embedded/result (careful, may be noisy)
that's drawing 10k objects
I wish there was a way to tell JS to have less accuracy on trig and sqrt, I mean come on, I don't care beyond 2 decimals
21:01
@rlemon use crossorigin.me
@rlemon yeah it is. When you have hardware tuned to draw a few million verts/sec and you give it a dozen squares, you're gonna have nooooo problems.
@AlexMitan there is int math in some of the recent engines
@towc the issue isn't the headers
but having a real integer type would be great
Loktar that's crazy!
I love it!
@Loktar dude very nice answer
@ssube can't you somehow hack the typed arrays to help with that?
user1596138
@Loktar lol how noticeable is the difference from 60 to 144
@SterlingArcher thanks, I took it as a challenge
21:02
!!youtube all that remains victory lap
@FlorianMargaine all the math functions deal with Numbers, though
@Jhawins in what respect? For my game it was a huge difference haha
@Loktar btw ^
user1596138
I've never had anything more than 60. We had a TV with 120, but consoles run like 20fps anyway haha
21:03
ooh in general. Well if you run at 144fps the difference is amazing
user1596138
@Loktar Like if I play CoD at 30fps it feels terrible. 60 it feels like buttery smooth.
movement is so much smoother. Reminds me of the CRT days
@Loktar not in general
And this, just because amazingggggg
21:03
yeah imagine EVEN SMOOTHER
I'm a ways off from my game, horse racing one, still working on the algorithm and doing so is making me depressed. Bit off way more than I could chew, but what better way to learn!
and that face
@KendallFrey eh to be fair even running below 144fps on a 144hz is smoother than running on a 60hz
user1596138
CRTs were 100hz right?
@Loktar funny how I can see the GC pauses
21:04
@Jhawins depends, anywhere from 75-120 or so
@Loktar the fuck do that even mean
user1596138
Or like 70. Something like that
they ran at 60 as well, but looked terrible
Guys, in raw JS games, what would you say eats most processing speed?
rendering
21:04
there was a noticeable flicker
the code
or causes most lag?
user1596138
Flashy lines lol yeah
@AlexMitan rendering
user1596138
Even worse once you've put the magnet up to it
21:04
rendering is slow af
@AlexMitan memory allocation/access
is it worth to have structures like
if(this and this and this)
{do code}
else don't do code
@SterlingArcher that should have been awesome but it was boring
make sure you use consistent classes (with ES6, actual classes) and let the memory engine build real structs
@Loktar Hey what does it look like if you have black frames alternating with rendered frames?
21:05
don't new if you don't have to, use memory arenas and reuse objects
like my drone's "stop calculating angles if you're heading for it"? I'm super proud of that but I don't know if it matters
@KendallFrey i MEAN OVERALL YOU HAVE LESS INPUT LAG AND MOTION BLUR... fuck caps I dont want to fix
but yeah 144hz can still benefit you even if you don't hit 144fps in games
math won't be your bottleneck until you're running image transforms in software
make sure you don't open erroneous paths, make sure you don't render off screen elements, make sure you don't fuck too much with global states.
user1596138
@AlexMitan Not sure I understand the question... But there's no reason to have the else if it's empty
21:06
So I should get into the habit of using images, right
seriously, rendering should be like 70% of the workload if your code is good.
have everything prepared ahead of time and only use it when you need to
@Jhawins Right, but you get what I mean
@AlexMitan a canvas is an image
don't be afraid to make multiple canvases
combining two canvases is cheaper than redrawing both
21:06
image objects, like Loktar's crazy demo thing
I use mult canvases in that
image objects are your sprites, which you draw onto the canvas
contextB.drawImage(canvasA, 0, 0, foo, bar, ...);
user1596138
@Loktar I'll just run my games at 144fps on my 60hz monitor. It'll like upscale to HDMI 2.4
21:07
!!oh
@Jhawins haha
user1596138
I sound like a Best Buy salesman
yeah like needing 4k for your xbox one or PS4 :p
user1596138
Hahahahahaha
21:07
Can I just use the first 3 params in drawimage?
yes
user1596138
My brother wouldn't believe me on that over christmas
but learning them all is neat
@AlexMitan yep, it won't scale
you can do so much more with drawImage
21:08
sweet
user1596138
I was like dude, fine, go get your 4K TV haha.
drawImage is almost all you need
oh, by the way
^ truth
user1596138
"Upscaling bro anything on this TV is 4K automatically" is basically what everyone says
21:08
drawImage is a lot cheaper than .arc/.lineTo a bunch of times
heh yea
user1596138
Netflix in 4K lol
user1596138
After I get a fiber line
XML Parsing Error: unexpected parser state Location: jar:file:///D:/software/Mozilla%20Firefox/browser/omni.ja!/chrome/browser/content/browser/aboutNetError.xhtml Line Number 395, Column 68:
@Jhawins it is 4K. It just so happens that every box of 4 pixels is the same.
21:09
tss, that site
22
A: HTML5 Canvas: better to re-draw objects or use bitmaps?

LoktarCache cache cache! Check out this article by Simon Sarris, and my own findings. Basically you make a canvas in memory copy the contents there and you can reuse them. You will see huge performance increases doing this. Rotating sprites without caching Rotating sprites WITH caching (walk upwards ...

Answer on caching
cash cash cash
user1596138
I downloaded a 9min video in 4K and it was like 2gb the other day
shows how much better caching and drawimage are
class Particle {
  constructor() {
    this.image = document.createElement('canvas');
    // draw your particle to the context attached to this.image canvas
  }
}

// later on
context.drawImage(particle.image, ...);
user1596138
21:09
@ssube lol so standard 1080
can I have for example, in a function f(a,b,c,d,e), saying it supports optional params
user1596138
Cause that's what 1080 does too consolidates groups of 4 into nearby values
@Loktar so, one of my housemates and I have been working on a game concept recently, and we're planning on using vectors for the graphics
can I have it use a,b and e as my params, and c and d default
gonna see how that works out
21:10
jsfiddle cached, jsfiddle.net/loktar/tHMhU/5, jsfiddle not cached jsfiddle.net/loktar/DF7hK/7
@AlexMitan not tmk
@Jhawins no no, it's 4k, it's just AABBCCDD on each row :D
@ssube hah nice, like line art?
like I mean a vector look
or just drawing normal stuff using vectors like Flash
user1596138
21:10
I know :P Jst making fun of our shit standards for graphics
@ssube So 1080p upscaled with NN interpolation
@Loktar we're thinking about using actual vectors, svg in the browser. One of the game mechanics is that items (it's a little xcom type deal with soldiers/inventory) can be corrupted, so we can mark certain paths as corrupt-able and add noise to them.
if you want your movies to look like Minecraft, NN is great
ahh nice, sounds interesting and different since you're using vectors
user1596138
NN is standard.
21:11
NN is ugly
user1596138
It's on your TV
heh I immediately thought of the Vectrex which uses a vector monitor
I've never used a screen with NN
in person the graphics look so beautiful
@Loktar we shall see. I have the general concepts finished, working on UI mockups this week.
21:12
at least not that I know of
user1596138
Err, not the screen but the files itself
user1596138
It';s how we encode videos by default
OOOH WOW. So you're using invisible temporary small canvases as sprites, @Loktar?
We encode videos by the pixel
interpolation doesn't apply
21:12
@AlexMitan yup
drawImage is pretty fast
@Loktar God damn brilliant
usually more than enough for what you end up doing
@KendallFrey ehhhhh
heh I remember when @rlemon and I came up witht he same conclusion for metaballs
So can I use one such canvas for every single image that changes?
user1596138
21:13
@KendallFrey I'm just dicking around
at the same time pretty much
@ssube Well, yeah
codepen.io/rlemon/pen/myyjem @AlexMitan each cloud is a canvas, and each circle that makes up each cloud is a canvas.
@AlexMitan yeah
crl
crl
canvas layers
21:13
For my bot, for example, one for his body and eye, and then three more objects for each indicator bulb?
@AlexMitan so, you've got a sprite of some dude running around, right? traditional spritesheet, let's say
user1596138
It;s vaguely similar to the thing with chroma subsampling
@AlexMitan you use drawImage to copy one frame of the running from the dude's sprite sheet onto your game screen
^ exactly
next second, you copy the next frame, etc
21:15
oh okay, can I see an example?
what it means in memory is that you have two images and are copying rectangles between them: the best possible case for performance
crl
crl
would be easier if all pictures were inline
very broadly, it's the exact same principle a typewriter or printing press uses
you have everything prepped, stamp out the part you want, move to a different place and stamp a different part, etc
You can probably write an easy slicer function, right?
that should probably be my next project
21:18
@AlexMitan you'll want helpers, sure. SpriteSheet.getFrame, f.ex.
@AlexMitan look at what I just posted
wrap the math up into a function and it becomes even simpler
there is a Sprite class in there
for example, a function that could run slice(runningDude, 12, 6)
var Sprite = function (img, width, height, positions) {
    this.img = img;
    this.width = width;
    this.height = height;
    this.positions = positions;
};
Sprite.prototype = {
    constructor: Sprite,
    render: function (context, position, x, y) {
        var pos = this.positions[position];
        context.drawImage(this.img, pos[0], pos[1], this.width, this.height, x, y, this.width, this.height);
    }
};
21:19
Grasping for straws: is there a service that lets you design an ERD, and then generates the SQL create script for you?
That would be a sweet program
crl
crl
didn't you say use class earlier?
UML -> C# -> EF -> SQL
idk
@crl that wasn't me, and this is old code I just nipped from my jsfiddle
crl
crl
ok <3
@crl I did
21:20
happy weed o'clock
crl
crl
hehe
classes are good because they help the engine optimize the memory layout
but they didn't exist until like last week
I used the
var sprite = { stuff:stuff,stuff:stuff}
-like representation
Which one should I use?
crl
crl
also @chrome move your butt (maybe chrome >47 have classes)
this is called an object
@AlexMitan they're largely the same, but if you can use classes, they'll make your code easier to read
21:22
also if you plan on having more than one Sprite instance (think multiple sprite sheets) ...
so the one rlemon put up is better?
the {foo: bar} form will force you to use helpers like renderSprite(sprite, context) instead of OO like sprite.render(context)
well I'd make it a class
not a class like object
WOAH what's up with the compiled version having 1k lines?
21:24
class Sprite {
	constructor(img, width, height, positions) {
	    this.img = img;
	    this.width = width;
	    this.height = height;
	    this.positions = positions;
	}
	render(context, position, x, y) {
        let pos = this.positions[position];
        context.drawImage(this.img, pos[0], pos[1], this.width, this.height, x, y, this.width, this.height);
	}
}
@AlexMitan probably includes a babel-runtime or something
What's that?
crl
crl
you can at least test it on Firefox/aurora for the moment
@AlexMitan babel converts new code to run on older browsers
or don't worry about the compiled output for now
especially the good stuff like classes
21:25
@AlexMitan for the link I posted? Because it also includes the engine code that has code for things other than the player moving around
I lost the engine's source code, though lol
I'm not convinced I like the idea of class notation in JS. It hides even more the fact that there aren't really classes in JS.
But I guess it also makes it less of a pain to pretend it does, like everyone is doing :)
but we can OOP in JS
so we need a class like object
having a class keyword (and minimal optimizations with it) is a great thing
@ssube Why would that be? I'm using testDrone.render(ctx) in my thing and it's fine
!!afk freezing my nips off
IMO, Object.create is not obvious nor adequate for what people try to do with OOP in JS, so classes are still the better-ish option.
21:28
Okay, okay.. should I convert my thing to that notation or...?
@AlexMitan it saves you typing in exchange for running babel before you run your app
up to you really. Under the hood it's the same thing.
class Foo { methodBar() { ... } } instead of function Foo() { ... }; Foo.prototype.bar = function () { ... }
@KevinB not 100%, but close
@ssube Okay... I'm sorry for being so new, the differences are not super obvious to me
21:31
@AlexMitan lemon posted good example, take a look at the (subtle) differences
omg @ndugger ... just noticed your avatar
hahaha
the new class syntax tends to be more concise
class also allow us to do prototypical inheritance nicer
class Foo extends Bar {
  constructor() { super() }
  ....
}
instead of that old .prototype crap
Okay, but we have classes, objects and prototype... I'm a bit confused
21:35
classes are syntactical sugar over prototypical inheritance
they may come with optimizations in the future
TBD
As in, for me, there's three tribes that seem the same and I feel like I have to swear allegiance to one
@ndugger You are now my friend, user of the smilenapple >:D
@AlexMitan use the class keyword, it isn't going anywhere
it is the 'new' hottness
classes describe objects, you create an instance (object) of the class.
@AlexMitan objects have prototype. Classes are a short way of making them.
you can manually write out the prototype and all its properties, or use the class shorthand
the big "but" is that class MAY in the future come with further optimizations and not just a syntax change
that is still TBD at this time
so why not use them and maybe in the future take a free win
21:38
Okay, okay
i don't like changes!
Decent way to get better at OOP anyway
@KevinB so listen for onblur?
:D
I don't mind changes, uni forces us into C++ anyway, similarities help I guess
I GUESS
in PHP, 3 mins ago, by Charles
This year, April 1 is on a Friday. Just puttin' that out there.
21:40
I like most of what has come with es6 and the future es7, but the class notation is an exception. It's not that i don't like it, I just don't see much use for it. I used to use object prototypes a lot a few years ago, but now days my goto is revealing pattern.
so nobody uses objects?
everyone uses objects
well... everything is an object, so everyone uses objects.
as classes
you mean object literals?
crl
crl
21:40
!!> var x=function(){}; x instanceof Object
user1596138
Are any of our regulars job hunting for modern UI in the midwest?
@crl "function"
@AlexMitan traditionally, we used "class like objects" or "class like functions as constructors" in conjunction with 'new' to create a new 'class instance'
now we have the class keyword, it is all the same shit internally.
just nicer to read/write
21:41
@crl "true"
ok, good, thank you
@CapricaSix ugh
one of my commits today was this (at work)
- foo = 'true';
+ foo = true;
lol
@FlorianMargaine good lord
I can't remember where, but I recently saw something like if( input.checked == 'true' )
luled
@SterlingArcher did he really install a pullup bar on drop ceiling
??
21:44
He deserved everything that happened
for sure
i.imgur.com/EXUIBLL.gif this is a HUGE trainer fail
LOL
like, 1/10 on the spot there bro
you had one fucking job.
Well it's easier for him to ignore the face pain I imagine
haha at the end man, looks like he just gives up, or has passed out can't tell
I think the ugliest code I've seen today was this.
this.foo = (typeof foo == 'boolean') ? foo : true;
21:47
He literally couldn't have dropped them in worse places
return foo == false ? false : true;
When you have a class, using super in a function is bound to the parent class's function, right?
I love when I see this kinda shit
@corvid super calls the inherited constructor on the given object scope
in my best description of it :D
@rlemon happens from time to time. believe me ....
@rlemon Well, with a == this is dumb indeed, but the right thing to do would have been...
21:48
So if I am overriding a function, I would use super.[method name](...arguments)?
@JacqueGoupil return !!foo if you NEED a boolean and don't know if foo resolves to one.
I love it
crl
crl
!!!!foo
@crl That didn't make much sense. Use the !!/help command to learn more.
21:49
Nan, the typeof check was there to make sure null defaults to true.
!!youtube hard core parkour
@SterlingArcher ^
this.foo = foo === false ? false : true;
But still, this looks ugly.
crl
crl
indeed just !!it
21:50
@SterlingArcher The one with the kid in the red shirt that took the table to the spine? Yeah, he looks crippled now
@ndugger back story on that was he did get seriously injured
iirc from the last reddit post it was in
user1596138
Oh shit
Yeah, it looks really bad
Guys, jsfiddle vs js.do vs codepen.io
user1596138
21:51
Depends what you wanna do
crl
crl
jsbin or ^
user1596138
Jsfiddle is annoying to actually debug inside of
regexr
He arrived at the hospital emergency, in critical condition but lucky for him, it was only a tiny chance which separated him from having a fractured spine.
@Jhawins and want to work with @loktar and @Jhawins :p
21:52
@SterlingArcher yes noticed it too. was going to link that. I'm curious about the height. MAybe 1+ floor
gotta let them know what they are potentially getting into I guess
user1596138
@loktar yea I left it vague if they ask I'll tell em what's up
At minimum that's a 2 story drop with a head injury
always had issues using jsbin and codepen.io due to my slow as hell computer
no, if I want to just plop code in, since I code JS in Brackets
user1596138
21:53
Then they're all the same
@Jhawins Nebraska is the MidWest? Geez, everyone wishes they were Minnesota
user1596138
I like codepens UI
this is my fav
user1596138
@ndugger you're like 4 hours from us
21:53
lol
Well, god day people, I'm off.
user1596138
Or the state capital of MN is haha
@ndugger what's funny is MN and MI shouldn't even be called Midwest lol
Which is 15 minutes away from me
I never understood that naming..
21:54
!!afk @Loktar move back to MI you bastard.
user1596138
Oh you're by Minneapolis?
@Loktar True; Minnesota wanted to start a petition to create a new region called the North
@rlemon re-listing the house super soon bruh
@Jhawins aye
@rlemon This guy's spine is still probably healthier than mine </3
21:54
Minneapolis is an amazing city on the days that the BLM turds aren't blocking highways
user1596138
Yeah you're like 4.5 hours from us. Some kid was trying to get me to go pick something up for him with my truck in MN lmao I was like are you retarded
user1596138
You should just move now and rent me the garage until its sold
user1596138
Aww but then you'd be gone
I gotta go for now, guys, thanks for all the help!
Everyone just move to MN; it's the happy medium of where all the cool kids are
Its the Canada of the US, it's in the midwest, it's the North star state, the land of 10000 lakes, the land of many micro breweries, and there's a lot of hipsters here too
user1596138
21:59
Sounds like Nebraska
user1596138
Except no lakes here
it's like nebraska but there are actual things
haha and minus trees :p
user1596138
But we are full of micro brweing hipster folk too

« first day (1907 days earlier)      last day (3266 days later) »