Let's create a game set in space! For this, I have to render a nice looking galaxy. How do I do it? Do I create a pre-rendered image and place 100k stars manually (oh no!), or do I try to create something random procedurally that looks awesome? In this talk, I'll delve into the basic concepts of procedural generation - mostly around the basic mathematical tools at your disposal as a developer to create awesome procedural generated art. With every step in creating a realistic looking galaxy, I will provide code examples in JavaScript.

1. In a Galaxy Far, Far Away
Shay Davidson

2. - Shay Davidson
- @ShayHDavidson
- Developer at
- #hobby-game-dev

5. In a Galaxy Far, Far Away
A Procedural Generation Tale

6. Procedural Generation
???

7. "procedural generation is a method of creating data
algorithmically as opposed to manually."
wikipedia

8. 🙄 ‫יופי‬

9. "procedural generation is the process of
generating random data or graphics
using algorithms, heuristics and math."
me

10. const testUser1 = {
name: fantasyGenerator.name(), // Edwin Long-Shnekel
city: fantasyGenerator.place() // Glimmerwood
};
const testUser2 = {
name: fantasyGenerator.name(), // Minsc, Hamsterbane
city: fantasyGenerator.place() // Randomwood
};

12. Image from Minecraft

13. Images by Amit Patel, Red Blob Games
Voronoi Diagram

14. Images by Amit Patel, Red Blob Games

15. Images by Amit Patel, Red Blob Games

16. Images by Amit Patel, Red Blob Games

17. Images by Amit Patel, Red Blob Games

18. Animations by @TheRujiK

19. "it is used to automatically create large
amounts of content and randomness for a
less predictable result."
wikipedia again

20. Roguelikes

21. The Pinewheel Galaxy (M101)
# gamedev

22. The Pinewheel Galaxy (M101)
# gamedev
## TODO
- draw some stars in a spiral 🌀

23. The Pinewheel Galaxy (M101)
# gamedev
## TODO
- draw some stars in a spiral 🌀
- spread them around 💫

24. # gamedev
## TODO
- draw some stars in a spiral 🌀
- spread them around 💫
- make them glow, blurry and nice ✨
The Pinewheel Galaxy (M101)
%

25. The Tale

26. Math.random();

27. 0 1
t
Math.random();
// a random uniform float in [0..1)

28. 🎲
🎲
🎲
0 1
Math.random();
// a random uniform float in [0..1)

29. 🎲
🎲
🎲
0 1
Math.random();
// a random uniform float in [0..1)
100 100 100 100 100 100 100 100 100 100 100

30. 0 1
t
Math.random();
// a random uniform float in [0..1)
// what about other ranges?
// for example: [0..10)

31. Math.random();
// a random uniform float in [0..1)
0 10
// what about other ranges?
// for example: [0..10)
Math.random() * 10;
x10t

32. 0 20
x20t
// and negatives?
// for example: [-10..10)
Math.random() * 20
Math.random();
// a random uniform float in [0..1)
// what about other ranges?
// for example: [0..10)
Math.random() * 10;

33. 20
x20t
0
// and negatives?
// for example: [-10..10)
Math.random() * 20
Math.random();
// a random uniform float in [0..1)
// what about other ranges?
// for example: [0..10)
Math.random() * 10;

34. x20t- 10;
10-10
- 10
// and negatives?
// for example: [-10..10)
Math.random() * 20
Math.random();
// a random uniform float in [0..1)
// what about other ranges?
// for example: [0..10)
Math.random() * 10;

35. x20t
- 10;
10-10
- 10
// and other, more "complex" ranges?
// for example: uniform in [-14..6)
Math.random() * ??? - ?!? + !?!;
- 10;
// and negatives?
// for example: [-10..10)
Math.random() * 20
Math.random();
// a random uniform float in [0..1)
// what about other ranges?
// for example: [0..10)
Math.random() * 10;

36. x20t
10-10
- 10
// lerp = linear interpolation
// 0 < t <= 1
function lerp(min, max, t) {
return min + (max - min) * t;
}
- 10;
// and other, more "complex" ranges?
// for example: uniform in [-14..6)
Math.random() * ??? - ?!? + !?!;
- 10;
// and negatives?
// for example: [-10..10)
Math.random() * 20
Math.random();
// a random uniform float in [0..1)
// what about other ranges?
// for example: [0..10)
Math.random() * 10;

37. x20t
6-14
- 14
lerp(-14, 6, Math.random());
- 10;
// and other, more "complex" ranges?
// for example: uniform in [-14..6)
Math.random() * ??? - ?!? + !?!;
- 10;
// and negatives?
// for example: [-10..10)
Math.random() * 20
Math.random();
// a random uniform float in [0..1)
// what about other ranges?
// for example: [0..10)
Math.random() * 10;
// lerp = linear interpolation
// 0 < t <= 1
function lerp(min, max, t) {
return min + (max - min) * t;
}

38. ‫ָס‬‫ב‬ְ‫נ‬‫ָקא‬ ‫ָה‬‫י‬ָ‫ה‬ ‫ִית‬‫ׁש‬‫ְֵרא‬‫ּב‬

39. // so we got a random function!
// let's create some stars ⭐

40. // so we got a random function!
// let's create some stars ⭐
const starCount = 1000;

41. // so we got a random function!
// let's create some stars ⭐
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
}

42. // so we got a random function!
// let's create some stars ⭐
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, Math.random());
let y = lerp(0, size, Math.random());
drawStar(x, y);
}

43. // so we got a random function!
// let's create some stars ⭐
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, Math.random());
let y = lerp(0, size, Math.random());
drawStar(x, y);
}

44. // so we got a random function!
// let's create some stars ⭐
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, Math.random());
let y = lerp(0, size, Math.random());
drawStar(x, y);
}

45. // so we got a random function!
// let's create some stars ⭐
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, Math.random());
let y = lerp(0, size, Math.random());
drawStar(x, y);
}

46. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, Math.random());
let y = lerp(0, size, Math.random());
drawStar(x, y);
}
RNG

47. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
rng.random(); // 0.1
rng.random(); // 0.5
rng.random(); // 0.2
rng.random(); // 0.8
const rng2 = new RandomNumberGenerator(seed);
rng2.random(); // 0.1
rng2.random(); // 0.5
rng2.random(); // 0.2
rng2.random(); // 0.8 RNG

48. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, rng.random());
let y = lerp(0, size, rng.random());
drawStar(x, y);
}

49. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, rng.random());
let y = lerp(0, size, rng.random());
drawStar(x, y);
}
(0,0)

50. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, rng.random());
let y = lerp(0, size, rng.random());
drawStar(x, y);
}
(0,0)

51. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let x = lerp(0, size, Math.random());
let y = lerp(0, size, Math.random());
drawStar(x, y);
}
(0,0)

52. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let x = lerp(-radius, radius, rng.random());
let y = lerp(-radius, radius, rng.random());
drawStar(x + radius, y + radius);
}
(0,0)
y
x

53. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = canvasSize / 2;
for (let i = 0; i < starCount; i++) {
const x = lerp(-radius, radius, rng.random());
const y = lerp(-radius, radius, rng.random());
drawStar(x + radius, y + radius);
}
y
x
Cartesian Coordinates
(x, y)

54. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = canvasSize / 2;
for (let i = 0; i < starCount; i++) {
const x = lerp(-radius, radius, rng.random());
const y = lerp(-radius, radius, rng.random());
drawStar(x + radius, y + radius);
}
Polar Coordinates
(r, θ)
r
θ
r

55. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = canvasSize / 2;
for (let i = 0; i < starCount; i++) {
const x = lerp(-radius, radius, rng.random());
const y = lerp(-radius, radius, rng.random());
drawStar(x + radius, y + radius);
}
Polar Coordinates
(r, θ)
r

56. rr
θ
rx
y

57. rrr
θ
rx
y

58. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let x = lerp(-radius, radius, rng.random());
let y = lerp(-radius, radius, rng.random());
drawStar(x + radius, y + radius);
}
r

59. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(0, radius, rng.random());
let t = lerp(0, 360deg, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
r
θ
r

60. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(0, radius, rng.random());
let t = lerp(0, 360deg, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
r
θ
r

61. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(0, radius, rng.random());
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
r
θ
r

62. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(0, radius, rng.random());
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
r
θ
r

63. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(0, radius, rng.random());
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
🤔

64. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
rng.random()
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}

65. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
rng.random()
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}

66. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
rng.random()
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
100 100 100 100 100 100 100 100 100 100

67. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random()) // <-----
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
100 100 100 100 100 100 100 100 100 100
❌

68. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 1000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random())
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}
👍

69. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 5000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random())
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}

70. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random())
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius);
}

71. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random())
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random())
});
}

72. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random())
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}

73. Taking it Easing
#sorry

74. .selector {
animation: fade 1s ease-out;
}

75. Animation by @LucasVB

76. linear
y(t) = t
1
1
0

77. easeOutQuad
y(t) = t(2 - t)
1
1
0

78. easeInQuad
y(t) = t
1
1
0
2

79. Image from easings.net

80. 0 1
linear
1
1
0
100
t = Math.random()
y(t) = t
100 100 100 100 100 100 100 100 100 100

81. 0 1
easeOutQuad
1
1
0
t = Math.random()
y(t) = t(2 - t)
2 5 10 18 30 45 70 100 150 270 400

82. 0 1
easeInQuad
1
1
0
t = Math.random()
y(t) = t
2
251018304570100150270400

83. 0 1
251018304570100150270400

84. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random())
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}

85. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Math.sqrt(rng.random()) // <---- t
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}
linear

86. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Ease.inQuart(Math.sqrt(rng.random()))
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}
easeInQuart

87. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Ease.outQuart(Math.sqrt(rng.random()))
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}
easeOutQuart

88. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Ease.inOutQuart(Math.sqrt(rng.random()))
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}
easeInOutQuart

89. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Ease.inOutElastic(Math.sqrt(rng.random()))
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}
easeInOutElastic

90. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Ease.inAlot(Math.sqrt(rng.random()))
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}
easeInAlot

91. 😓

92. M80 Globular Cluster

94. ❌

95. SPIRALS 🌀

96. Images from Wikipedia
Another Golden Spiral

97. Another Golden Spiral

100. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let r = lerp(
0,
radius,
Ease.inAlot(Math.sqrt(rng.random()))
);
let t = lerp(0, Math.PI * 2, rng.random());
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}

101. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
// let r = lerp(
// 0,
// radius,
// Ease.inAlot(Math.sqrt(rng.random()))
// );
// let t = lerp(0, Math.PI * 2, rng.random..
// const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}
function uniformCircle(radius, easing, t)

102. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
drawStar(x + radius, y + radius, {
size: lerp(0.5, 3, rng.random()),
color: rng.pickOne(FROM_COLORS)
});
}

103. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 0.02,
b: 0.2,
t: rng.random()
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

104. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 0.02,
b: 0.2,
t: rng.random()
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

105. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 0.02,
b: 0.2,
t: rng.random()
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}
🧐🔍

106. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 1,
b: 0.5,
t: rng.random() * MULTIPLIER
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

107. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 0.02,
b: 0.2,
t: rng.random() * MULTIPLIER
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

108. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 0.1,
b: 1,
t: rng.random() * MULTIPLIER
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

109. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 1,
b: 0.5,
t: rng.random() * MULTIPLIER
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

110. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { x, y } = spiral({
a: 1,
b: 0.5,
t: rng.random() * MULTIPLIER
});
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

111. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.5,
t: rng.random() * MULTIPLIER
});
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

112. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.5,
t: rng.random() * MULTIPLIER
});
let arm = rng.lerp(0, arms);
t += 2 * Math.PI * Math.floor(arm / arms);
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

113. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.5,
t: rng.random() * MULTIPLIER
});
let arm = rng.lerp(0, arms);
t += 2 * Math.PI * Math.floor(arm / arms);
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

114. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 8;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.5,
t: rng.random() * MULTIPLIER
});
let arm = rng.lerp(0, arms);
t += 2 * Math.PI * Math.floor(arm / arms);
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

115. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.2,
t: rng.random() * MULTIPLIER
});
let arm = rng.lerp(0, arms);
t += 2 * Math.PI * Math.floor(arm / arms);
const { x, y } = polarToCartesian(r, t);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

116. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.2,
t: rng.random() * MULTIPLIER
});
let arm = rng.lerp(0, arms);
t += 2 * Math.PI * Math.floor(arm / arms);
let { x, y } = polarToCartesian(r, t);
x += rng.uniformCircle(SPREAD, Ease.inQuad);
y += rng.uniformCircle(SPREAD, Ease.inQuad);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

117. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 15000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.2,
t: rng.random() * MULTIPLIER
});
let arm = rng.lerp(0, arms);
t += 2 * Math.PI * Math.floor(arm / arms);
let { x, y } = polarToCartesian(r, t);
x += rng.uniformCircle(SPREAD, Ease.inQuad);
y += rng.uniformCircle(SPREAD, Ease.inQuad);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

118. // so we got a random function!
// let's create some stars ⭐
const seed = 1234;
const rng = new RandomNumberGenerator(seed);
const starCount = 50000;
const radius = size / 2;
const arms = 2;
for (let i = 0; i < starCount; i++) {
let { r, t } = spiral({
a: 1,
b: 0.2,
t: rng.random() * MULTIPLIER
});
let arm = rng.lerp(0, arms);
t += 2 * Math.PI * Math.floor(arm / arms);
let { x, y } = polarToCartesian(r, t);
x += rng.uniformCircle(SPREAD, Ease.inQuad);
y += rng.uniformCircle(SPREAD, Ease.inQuad);
drawStar(x + radius, y + radius, {
size: lerp(0.5, 2, rng.random()),
color: rng.randomFrom(STAR_COLORS_ARRAY)
});
}

119. Almost There!

122. /* css */
canvas .galaxy-background-glow {
filter: blur(200px);
}

123. /* css */
canvas .galaxy-background-glow {
filter: blur(200px);
}
canvas .galaxy-nebula-glow {
filter: blur(20px);
mix-blend-mode: lighten;
}

124. /* css */
canvas .galaxy-background-glow {
filter: blur(200px);
}
canvas .galaxy-nebula-glow {
filter: blur(20px);
mix-blend-mode: lighten;
}
.galaxy-core {
width: 50%;
height: 50%;
background-color: radial-gradient(...);
border-radius: 50%;
filter: blur(50px);
mix-blend-mode: overlay;
}

128. creategalaxy.com
#icreatedagalaxy #reversim2019

129. creategalaxy.com
#icreatedagalaxy #reversim2019
open-source

130. More?
#procgen #generative

131. Demo Time?
@ShayHDavidson

132. Thank You!
@ShayHDavidson