Release notes *2.5.7* | WLJS Notebook

Release notes 2.5.7

· 3 min read

The major improvements are Mathematica's boxes. We rebuilt the output forms for Graphics, Image, Graphics3D and got rid of many workarounds we had for the last 2 years! We populated StandardForm with TableForm, Item, and WLXForm with Row and Column used on slides.

RTX feature and materials improvements were introduces for Graphics3D.

There are no breaking changes.

Download original notebook

const balloonContainer = document.getElementById("balloon-container");

function random(num) {
  return Math.floor(Math.random() * num);
}

function getRandomStyles() {
  var r = random(255);
  var g = random(255);
  var b = random(255);
  var mt = random(200);
  var ml = random(50);
  var dur = random(5) + 5;
  return `
  background-color: rgba(${r},${g},${b},0.7);
  color: rgba(${r},${g},${b},0.7); 
  box-shadow: inset -7px -3px 10px rgba(${r - 10},${g - 10},${b - 10},0.7);
  margin: ${mt}px 0 0 ${ml}px;
  animation: float ${dur}s ease-in infinite
  `;
}

function createBalloons(num) {
  for (var i = num; i > 0; i--) {
    var balloon = document.createElement("div");
    balloon.className = "balloon";
    balloon.style.cssText = getRandomStyles();
    balloonContainer.append(balloon);
  }
}

function removeBalloons() {
  balloonContainer.style.opacity = 0;
  setTimeout(() => {
    balloonContainer.remove()
  }, 500)
}

createBalloons(10);
setTimeout(removeBalloons, 15000);

return '';

Lists, rows, columns

Here is the basics of new formatted output

Row[{1, "->", 2}]

(*GB[*){{1(*|*),(*|*)"->"(*|*),(*|*)2}}(*]GB*)

Or column

Column[{Red, Blue}]

(*GB[*){{(*VB[*)(RGBColor[1, 0, 0])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeGJAIcndyzs/JLwouTyxJzghJzS3ISSxJTWMGyXMgyRcxgMEHeyiDgQHOAAALpBNd"*)(*]VB*)}(*||*),(*||*){(*VB[*)(RGBColor[0, 0, 1])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeGJAIcndyzs/JLwouTyxJzghJzS3ISSxJTWMGyXMgyRcxQAE644M9APZHE10="*)(*]VB*)}}(*]GB*)

Grids, tables can be stylized using Item

MatrixForm[{{a, b}, {Item[c, Background -> Red], d}}]

((*GB[*){{a(*|*),(*|*)b}(*||*),(*||*){c(*VB[*)(**)(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KWlMIB47kPAsSc11yq+ACICkg0pzUou5gAynxOTs9KL80ryUNGaQJAdI0t3JOT8nvygTZFomA4xA080DZASXFGUW+Od55hWUlhSzAgXcEnOKUwGXGx1q"*)(*]VB*)(*|*),(*|*)d}}(*]GB*))

Here is an example of formatted table

TableForm[{{5, Item[7, Background->Yellow]}, {4, 2}, {10, 3}}, 
 TableHeadings -> {{"Group A", "Group B", "Group C"}, {"y1", "y2"}}]

(*GB[*){{(*BB[*)()(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeB5AILqnMSXXKr0hjgskHleakFouApDLyy4NLijLz0p0zEosSk0tSi4qLWYESbok5xakAImsVPw=="*)(*]BB*)(*|*),(*|*)"y1"(*|*),(*|*)"y2"}(*||*),(*||*){"Group A"(*|*),(*|*)5(*|*),(*|*)7(*VB[*)(**)(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KWlMIB47kPAsSc11yq+ACICkg0pzUou5gAynxOTs9KL80ryUNGaQJAdI0t3JOT8nvygTZBqEAGIGNN08QEZwSVFmgX+eZ15BaUkxK1DALTGnOBUAl00daw=="*)(*]VB*)}(*||*),(*||*){"Group B"(*|*),(*|*)4(*|*),(*|*)2}(*||*),(*||*){"Group C"(*|*),(*|*)10(*|*),(*|*)3}}(*||*)(*1:eJxTTMoPSmNkYGAoZgESHvk5KRAeO5BwL8pMccqvSGOCSQeV5qQW8yNkXDLLMlNSi4oRKnwyi0tQ1QeDTHLOzynNzStOY0FWV8wKZLgl5hSngoVCikpTES5BUwBnoRkOZuSXU8NkAKaJOTA=*)(*]GB*)

Panels, standard decoration boxes

Panel is a special container with a title

(*GB[*){{(*BB[*)("My slider")(*,*)(*"1:eJxTTMoPSmNiYGAo5gcSAUX5ZZkpqSn+BSWZ+XnFaYwgCRYg4ZGfkwLhcQKJ4JKizLx0p/yKTC4gD6IdpCqoNCc1mA2uACwWUlSaCgCnOxcR"*)(*]BB*)(*VB[*)(**)(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KWlMIB47kPAsSc11yq+ACICkg0pzUos5gQzHnMz0vNzUvBKEnE9mcQmEkZpWAlbkmZeRWpRZkpqCZoAAkOGSmpZYmlPilFicGlxSmZMazAUUDEjMS83xSUxKzQEAlWIj4w=="*)(*]VB*)}(*||*),(*||*){(*BB[*)((*BB[*)(Panel[(*VB[*)(EventObject[<|"Id" -> "4a5c3f8c-9478-47b4-8ce8-1178fd2a9efd", "Initial" -> 0.5, "View" -> "08b1a256-3d97-435a-9c58-fe1b72e1add4"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKG1gkGSYamZrpGqdYmuuaGJsm6lomm1ropqUaJpkbpRompqSYAAB73xWj"*)(*]VB*)])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KWlMIB4/kAgoyi/LTElN8S8oyczPK05jAElwgCQS81JznPIrIEpBGoNKc1KDwSakJqYEs8LUAADiShU/"*)(*]BB*))(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeO5DwT0vLyU9MSWOCCQQk5qU65VdABEDqg0pzUos5gQzHnMz0vNzUvBKEnE9mcUkxG5DhDBROLSrmADKdEotTczLzUtFMEECSCsgvzizJzM9DUQ8Ap40nag=="*)(*]BB*)(*VB[*)(**)(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeO5DwLEnNdcqvSGOCSQeV5qQWCwAZLqlpiaU5JU6JxanBJZU5qcEg5T6JSak5qSkAy0sTkQ=="*)(*]VB*)}}(*]GB*)

Labels can by attached to any expressions

Labeled[Framed[{a, b, c, d}], lbl, Right]

(*GB[*){{(*BB[*)((*BB[*)({a,b,c,d})(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeB5BwK0rMTXXKr0hjgskHleakFvMAGcElRZkF/nmeeQWlJcWsILWJOcWpAG8uEdg="*)(*]BB*))(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeO5DwT0vLyU9MSWOCCQQk5qU65VdABEDqg0pzUos5gQzHnMz0vNzUvBKEnE9mcUkxG5DhDBROLSrmADKdEotTczLzUtFMEECSCsgvzizJzM9DUQ8Ap40nag=="*)(*]BB*)(*VB[*)(**)(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeO5DwLEnNdcqvSGOCSQeV5qQWCwAZLqlpiaU5JU6JxanBJZU5qcEg5T6JSak5qSkAy0sTkQ=="*)(*]VB*)(*|*),(*|*)lbl(*VB[*)(**)(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeO5DwLEnNdcqvSGOCSQeV5qQWCwAZLqlpiaU5JU6JxanBJZU5qcE8QEGfxKTUnNQUMAUAMtsVdg=="*)(*]VB*)}}(*]GB*)

To do basic highlighting

Highlighted[4]

(*BB[*)(4)(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KWnMIB4HkHArSsxNdcqvSGOCyQeV5qQWCwAZLqlpiaU5JU6JxanBJZU5qcEgQY/M9IwcIC5JTfHMKygtQdPHA2QElxRlFvjngaWLWUF2JOYUp6Ip5ILZDTYaLO6Xn5cKANJHKvA="*)(*]BB*)

Complex styling

Style[1/Sqrt[2], 10, Red, Frame->True, Background->LightBlue]

(*BB[*)((*FB[*)((1)(*,*)/(*,*)((*SqB[*)Sqrt[2](*]SqB*)))(*]FB*))(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KWmsIB4HkAguqcxJdcqvyOQCctKYYcJB7k7O+Tn5RZkgbZkMMCKNCWZKUGlOajHIFLeixNxUsFBIUWkqmgKQoU6JydnpRfmleSmYxhddX1xgy3X9tX2RyDr3h1Ui7+zBFqKZwgN2Z1FmgX+eZ15BaQnE3sSc4lQAMSwyNw=="*)(*]BB*)

And more in the documentation (Decorations section)

WLXForm

Some of those decorations are defined on slides and WLX cells

Fig1 = EditorView["Plot[BesselJ[3, z], {z,0,10}]"];
Fig2 = Plot[BesselJ[3, z], {z,0,10}];

.slide

<Column>
  <Fig1/>
  <Fig2/>
</Column>

<dummy ><div class="flex flex-col">FrontEndExecutable[98dd7d58-363a-40b5-89ba-fbadcc6e990e]
FrontEndExecutable[051fe68e-7e3a-4115-b327-8c8deb1f6818]</div></dummy>

It means, that functions such as ManipulatePlot can work without extra wrappers

Man = ManipulatePlot[Sinc[w x], {x,-10,10}, {w,0,10}];

.slide

<Man/>

<dummy ><div class="flex flex-row">FrontEndExecutable[9a9fe427-d9b5-4952-9fdc-703f06f0da30]
FrontEndExecutable[61b04ba8-b51f-401d-95e8-be9079b99aff]</div></dummy>

Graphics3D

New materials

We provide more control over the various physical parameters of the materials used for rendering geometry.

Graphics3D[{Darker[White], Polygon[{{-2,-2,0}, {2,-2,0}, {2,2,0}, {-2,2,0}}],{
  Directive[Cyan, 
    "MaterialThickness"->1.0, 
    "Transmission"->1.0,
    "Roughness"->0.13
  ], 
  Sphere[{0,0,1}, 1]
}}]

(*VB[*)(Graphics3D[{RGBColor[0.6666666666666667, 0.6666666666666667, 0.6666666666666667], Polygon[{{-2, -2, 0}, {2, -2, 0}, {2, 2, 0}, {-2, 2, 0}}], {Directive[RGBColor[0, 1, 1], "MaterialThickness" -> 1., "Transmission" -> 1., "Roughness" -> 0.13], Sphere[{0, 0, 1}, 1]}}])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeF5BwL0osyMhMLjZ2SWOGqfDJLC6B8DiARJC7k3N+Tn5RUVgoCDy1x2RAjGMHEgH5OZXp+XlpLJhmwXiZ//7//w8hgCIMaJJMQAZ+STCBRRKsCSHJhOICsHs4gYRLZlFqcklmWSqmB8H6MhlhBMKEoNKc1GBBIMM3sSS1KDMxJwQYYtl5qcXFRQxg8MEeTTEPkBFSlJhXnJtZXJyZn4dLHchFQfml6Rlgw5YU2HJdX3wAqogNSAQXZKQWpaJ5lAHmR4RbAf0PcVk="*)(*]VB*)

Emissive

Graphics3D[{Darker[White], Polygon[{{-2,-2,0}, {2,-2,0}, {2,2,0}, {-2,2,0}}],{ Directive["Emissive"->Red], Sphere[{0,0,1}, 1]}}]

(*VB[*)(Graphics3D[{RGBColor[0.6666666666666667, 0.6666666666666667, 0.6666666666666667], Polygon[{{-2, -2, 0}, {2, -2, 0}, {2, 2, 0}, {-2, 2, 0}}], {Directive["Emissive" -> RGBColor[1, 0, 0]], Sphere[{0, 0, 1}, 1]}}])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRAeF5BwL0osyMhMLjZ2SWOGqfDJLC6B8DiARJC7k3N+Tn5RUVgoCDy1x2RAjGMHEgH5OZXp+XlpLJhmwXiZ//7//w8hgCIMaJJMQAZ+STCBRRKsCSHJhOICsAM5gYRLZlFqcklmWSpCQVBpTmowyKeuuZnFxSApDL9nMsLMRTKcDUgEF2SkFqWiuQSuDqINRAAA/RxXvQ=="*)(*]VB*)

Or use built-in library

Plot3D[Sin[x] Cos[y], {x,-10,10}, {y,-10,10}][[1]];
Graphics3D[{%, Graphics3D`Materials["Glass"], Red, Sphere[{0,0,2}, 5]}]

(*VB[*)(FrontEndRef["798e59ed-d078-45ef-8ea1-e5fc3f1b7b1c"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKm1tapJpapqbophiYW+iamKam6VqkJhrqppqmJRunGSaZJxkmAwCKwxZJ"*)(*]VB*)

Real-time pathtracing

Now is supported on Mac M1/2/3 machines. Try examples above!

Plot3D[Sin[x] Cos[y], {x,-10,10}, {y,-10,10}][[1]];
Graphics3D[{%, Graphics3D`Materials["Glass"], Red, Sphere[{0,0,2}, 5]}, "RTX"->True]

Ticks support

Automatic ticks were added to Graphics3D

Plot3D[Sin[Sqrt[x^2 + y^2]], {x, -6, 6}, {y, -6, 6}, 
 PlotRange -> All, 
 Mesh -> None, 
 ColorFunction -> "Rainbow"]

(*VB[*)(FrontEndRef["856b6151-d10f-4c3d-95b4-105114306afe"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKW5iaJZkZmhrqphgapOmaJBun6FqaJpnoGhqYGhqaGBuYJaalAgB16BUD"*)(*]VB*)

Ballon animation by Jemima (codepen)

Lists, rows, columns​

Panels, standard decoration boxes​

WLXForm​

Graphics3D​

New materials​

Real-time pathtracing​

Ticks support​