We Keep Coding

How to run pixi js app after page load to prevent it from increasing the page speed time?

I used pixi js on my website to create a dynamic gradient animation with shape-changing blobs. The animation works perfectly fine the only problem I am facing is when I run page speed tests test it assumes the page has not been rendered since the animation is running still and gives it astronomical loading times.
I assume the part of the problem is page speed runs until the javascript has finshed executing which never will since this is a 2d animation.
If anyone has any idea on how to solve this problem please let me know.
import * as PIXI from "https://cdn.skypack.dev/pixi.js";
import { KawaseBlurFilter } from "https://cdn.skypack.dev/#pixi/filter-kawase-blur";
import SimplexNoise from "https://cdn.skypack.dev/simplex-noise";
import hsl from "https://cdn.skypack.dev/hsl-to-hex";
import debounce from "https://cdn.skypack.dev/debounce";
// return a random number within a range
function random(min, max) {
return Math.random() * (max - min) + min;
}
// map a number from 1 range to another
function map(n, start1, end1, start2, end2) {
return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
}
// Create a new simplex noise instance
const simplex = new SimplexNoise();
// ColorPalette class
class ColorPalette {
constructor() {
this.setColors();
this.setCustomProperties();
}
setColors() {
// pick a random hue somewhere between 220 and 360
this.hue = ~~random(220, 360);
this.complimentaryHue1 = this.hue + 30;
this.complimentaryHue2 = this.hue + 60;
// define a fixed saturation and lightness
this.saturation = 95;
this.lightness = 50;
// define a base color
this.baseColor = hsl(this.hue, this.saturation, this.lightness);
// define a complimentary color, 30 degress away from the base
this.complimentaryColor1 = hsl(
this.complimentaryHue1,
this.saturation,
this.lightness
);
// define a second complimentary color, 60 degrees away from the base
this.complimentaryColor2 = hsl(
this.complimentaryHue2,
this.saturation,
this.lightness
);
// store the color choices in an array so that a random one can be picked later
this.colorChoices = [
this.baseColor,
this.complimentaryColor1,
this.complimentaryColor2
];
}
randomColor() {
// pick a random color
return this.colorChoices[~~random(0, this.colorChoices.length)].replace(
"#",
"0x"
);
}
setCustomProperties() {
// set CSS custom properties so that the colors defined here can be used throughout the UI
document.documentElement.style.setProperty("--hue", this.hue);
document.documentElement.style.setProperty(
"--hue-complimentary1",
this.complimentaryHue1
);
document.documentElement.style.setProperty(
"--hue-complimentary2",
this.complimentaryHue2
);
}
}
// Orb class
class Orb {
// Pixi takes hex colors as hexidecimal literals (0x rather than a string with '#')
constructor(fill = 0x000000) {
// bounds = the area an orb is "allowed" to move within
this.bounds = this.setBounds();
// initialise the orb's { x, y } values to a random point within it's bounds
this.x = random(this.bounds["x"].min, this.bounds["x"].max);
this.y = random(this.bounds["y"].min, this.bounds["y"].max);
// how large the orb is vs it's original radius (this will modulate over time)
this.scale = 1;
// what color is the orb?
this.fill = fill;
// the original radius of the orb, set relative to window height
this.radius = random(window.innerHeight / 6, window.innerHeight / 3);
// starting points in "time" for the noise/self similar random values
this.xOff = random(0, 1000);
this.yOff = random(0, 1000);
// how quickly the noise/self similar random values step through time
this.inc = 0.002;
// PIXI.Graphics is used to draw 2d primitives (in this case a circle) to the canvas
this.graphics = new PIXI.Graphics();
this.graphics.alpha = 0.825;
// 250ms after the last window resize event, recalculate orb positions.
window.addEventListener(
"resize",
debounce(() => {
this.bounds = this.setBounds();
}, 250)
);
}
setBounds() {
// how far from the { x, y } origin can each orb move
const maxDist =
window.innerWidth < 1000 ? window.innerWidth / 3 : window.innerWidth / 5;
// the { x, y } origin for each orb (the bottom right of the screen)
const originX = window.innerWidth / 1.25;
const originY =
window.innerWidth < 1000
? window.innerHeight
: window.innerHeight / 1.375;
// allow each orb to move x distance away from it's x / y origin
return {
x: {
min: originX - maxDist,
max: originX + maxDist
},
y: {
min: originY - maxDist,
max: originY + maxDist
}
};
}
update() {
// self similar "psuedo-random" or noise values at a given point in "time"
const xNoise = simplex.noise2D(this.xOff, this.xOff);
const yNoise = simplex.noise2D(this.yOff, this.yOff);
const scaleNoise = simplex.noise2D(this.xOff, this.yOff);
// map the xNoise/yNoise values (between -1 and 1) to a point within the orb's bounds
this.x = map(xNoise, -1, 1, this.bounds["x"].min, this.bounds["x"].max);
this.y = map(yNoise, -1, 1, this.bounds["y"].min, this.bounds["y"].max);
// map scaleNoise (between -1 and 1) to a scale value somewhere between half of the orb's original size, and 100% of it's original size
this.scale = map(scaleNoise, -1, 1, 0.5, 1);
// step through "time"
this.xOff += this.inc;
this.yOff += this.inc;
}
render() {
// update the PIXI.Graphics position and scale values
this.graphics.x = this.x;
this.graphics.y = this.y;
this.graphics.scale.set(this.scale);
// clear anything currently drawn to graphics
this.graphics.clear();
// tell graphics to fill any shapes drawn after this with the orb's fill color
this.graphics.beginFill(this.fill);
// draw a circle at { 0, 0 } with it's size set by this.radius
this.graphics.drawCircle(0, 0, this.radius);
// let graphics know we won't be filling in any more shapes
this.graphics.endFill();
}
}
// Create PixiJS app
const app = new PIXI.Application({
// render to <canvas class="orb-canvas"></canvas>
view: document.querySelector(".orb-canvas"),
// auto adjust size to fit the current window
resizeTo: window,
// transparent background, we will be creating a gradient background later using CSS
transparent: true
});
// Create colour palette
const colorPalette = new ColorPalette();
app.stage.filters = [new KawaseBlurFilter(30, 10, true)];
// Create orbs
const orbs = [];
for (let i = 0; i < 10; i++) {
const orb = new Orb(colorPalette.randomColor());
app.stage.addChild(orb.graphics);
orbs.push(orb);
}
// Animate!
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
app.ticker.add(() => {
orbs.forEach((orb) => {
orb.update();
orb.render();
});
});
} else {
orbs.forEach((orb) => {
orb.update();
orb.render();
});
}
document
.querySelector(".overlay__btn--colors")
.addEventListener("click", () => {
colorPalette.setColors();
colorPalette.setCustomProperties();
orbs.forEach((orb) => {
orb.fill = colorPalette.randomColor();
});
});
:root {
--dark-color: hsl(var(--hue), 100%, 9%);
--light-color: hsl(var(--hue), 95%, 98%);
--base: hsl(var(--hue), 95%, 50%);
--complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
--complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);
--font-family: "Poppins", system-ui;
--bg-gradient: linear-gradient(
to bottom,
hsl(var(--hue), 95%, 99%),
hsl(var(--hue), 95%, 84%)
);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
max-width: 1920px;
min-height: 100vh;
display: grid;
place-items: center;
padding: 2rem;
font-family: var(--font-family);
color: var(--dark-color);
background: var(--bg-gradient);
}
.orb-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
strong {
font-weight: 600;
}
.overlay {
width: 100%;
max-width: 1140px;
max-height: 640px;
padding: 8rem 6rem;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.375);
box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1);
border-radius: 2rem;
border: 1px solid rgba(255, 255, 255, 0.125);
}
.overlay__inner {
max-width: 36rem;
}
.overlay__title {
font-size: 1.875rem;
line-height: 2.75rem;
font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: 2rem;
}
.text-gradient {
background-image: linear-gradient(
45deg,
var(--base) 25%,
var(--complimentary2)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
.overlay__description {
font-size: 1rem;
line-height: 1.75rem;
margin-bottom: 3rem;
}
.overlay__btns {
width: 100%;
max-width: 30rem;
display: flex;
}
.overlay__btn {
width: 50%;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--light-color);
background: var(--dark-color);
border: none;
border-radius: 0.5rem;
transition: transform 150ms ease;
outline-color: hsl(var(--hue), 95%, 50%);
}
.overlay__btn:hover {
transform: scale(1.05);
cursor: pointer;
}
.overlay__btn--transparent {
background: transparent;
color: var(--dark-color);
border: 2px solid var(--dark-color);
border-width: 2px;
margin-right: 0.75rem;
}
.overlay__btn-emoji {
margin-left: 0.375rem;
}
a {
text-decoration: none;
color: var(--dark-color);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Not too many browser support this yet but it's good to add! */
#media (prefers-contrast: high) {
.orb-canvas {
display: none;
}
}
#media only screen and (max-width: 1140px) {
.overlay {
padding: 8rem 4rem;
}
}
#media only screen and (max-width: 840px) {
body {
padding: 1.5rem;
}
.overlay {
padding: 4rem;
height: auto;
}
.overlay__title {
font-size: 1.25rem;
line-height: 2rem;
margin-bottom: 1.5rem;
}
.overlay__description {
font-size: 0.875rem;
line-height: 1.5rem;
margin-bottom: 2.5rem;
}
}
#media only screen and (max-width: 600px) {
.overlay {
padding: 1.5rem;
}
.overlay__btns {
flex-wrap: wrap;
}
.overlay__btn {
width: 100%;
font-size: 0.75rem;
margin-right: 0;
}
.overlay__btn:first-child {
margin-bottom: 1rem;
}
}
<!-- Canvas -->
<canvas class="orb-canvas"></canvas>
<!-- Overlay -->
<div class="overlay">
<!-- Overlay inner wrapper -->
<div class="overlay__inner">
<!-- Title -->
<h1 class="overlay__title">
Hey, would you like to learn how to create a
<span class="text-gradient">generative</span> UI just like this?
</h1>
<!-- Description -->
<p class="overlay__description">
In this tutorial we will be creating a generative “orb” animation
using pixi.js, picking some lovely random colors and pulling it all
together in a nice frosty UI.
<strong>We're gonna talk accessibility, too.</strong>
</p>
<!-- Buttons -->
<div class="overlay__btns">
<button class="overlay__btn overlay__btn--transparent">
View
</a>
</button>
<button class="overlay__btn overlay__btn--colors">
<span>Randomise Colors</span>
<span class="overlay__btn-emoji">🎨</span>
</button>
</div>
</div>
</div>

Try execute your "pixi related code" after page is loaded. So i mean this code:
// Create a new simplex noise instance
const simplex = new SimplexNoise();
...
// Create PixiJS app
const app = new PIXI.Application({
// render to <canvas class="orb-canvas"></canvas>
view: document.querySelector(".orb-canvas"),
// auto adjust size to fit the current window
resizeTo: window,
// transparent background, we will be creating a gradient background later using CSS
transparent: true
});
// Create colour palette
const colorPalette = new ColorPalette();
app.stage.filters = [new KawaseBlurFilter(30, 10, true)];
// Create orbs
const orbs = [];
for (let i = 0; i < 10; i++) {
const orb = new Orb(colorPalette.randomColor());
app.stage.addChild(orb.graphics);
orbs.push(orb);
}
// Animate!
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
app.ticker.add(() => {
orbs.forEach((orb) => {
orb.update();
orb.render();
});
});
} else {
orbs.forEach((orb) => {
orb.update();
orb.render();
});
}
document
.querySelector(".overlay__btn--colors")
.addEventListener("click", () => {
colorPalette.setColors();
colorPalette.setCustomProperties();
orbs.forEach((orb) => {
orb.fill = colorPalette.randomColor();
});
});
Execute all this not "as soon as possible" (as you do now - which causes page speed to count it as page load time) - but after page is loaded. Additionally you can also add "setTimeout" there with 1 second delay - so it will be: "after page load plus 1 second".
See some proposed solutions like these: Run a certain script JS after x seconds that the page is loaded

scrollable material ui chips array using arrow buttons

I'm trying to build custom scrollable chips array with material ui version 4 no version 5.
In older tickets i could see similar demos:
Demo code
I want to change this component scrolling bar to left and right arrow buttons (same line with the Chip array).
please suggest how it can be done by modifying the same code or advice on another approach.

You can use Material UI Tabs
And style scroll Buttons using .MuiTabs-scrollButtons class name.
Or change scroll buttons using Tabs's prop: ScrollButtonComponent.
Material UI Tabs Documentation

#Amr Thanks for the advice, I have now exactly what I need.
I can't share the full code because it's mixed a lot with other code that is not related to this question, but here is something similar that I can share:
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Chip from "#material-ui/core/Chip";
import Box from "#material-ui/core/Box";
import Tabs from "#material-ui/core/Tabs";
import IconButton from "#material-ui/core/IconButton";
import styled from "#emotion/styled";
import ChevronLeftIcon from "#material-ui/icons/ChevronLeftRounded";
import ChevronRightIcon from "#material-ui/icons/ChevronRightRounded";
const StyledChip = styled(Chip)`
border-radius: 16px;
text-transform: capitalize;
color: ${(props) => (props.selected ? "#FFFFFF" : "#6877AE")};
background-color: ${(props) => (props.selected ? "#03194F" : "#FFFFFF")};
border: 4px solid ${"#03194F"};
border-color: ${(props) =>
props.selected ? "#03194F" : "rgba(0, 83, 229, 0.12)"};
.MuiChip-root&:hover {
background-color: ${(props) => (props.selected ? "#03194F" : "")};
}
`;
const StyledIconButton = styled(IconButton)`
left: ${(props) => (props.isLeft ? "0" : "none")};
right: ${(props) => (props.isLeft ? "none" : "0")};
height: 32px;
width: 32px;
position: absolute;
border-radius: 16px;
border: 1px solid gray;
//top: 33%;
background-color: white;
color: rgba(0, 83, 229, 1);
border-color: rgba(0, 83, 229, 0.12);
z-index: 1;
opacity: 1;
margin: 20px;
:hover {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12);
border-color: white;
background-color: inherit;
}
`;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "center",
flexWrap: "nowrap",
listStyle: "none",
padding: theme.spacing(0.5),
margin: 0,
overflow: "auto",
maxWidth: "100%"
},
chip: {
margin: theme.spacing(2)
}
}));
export default function ChipsArray() {
const classes = useStyles();
const [chipData, setChipData] = React.useState([
{ key: 0, label: "Angular" },
{ key: 1, label: "jQuery" },
{ key: 2, label: "Polymer" },
{ key: 3, label: "React" },
{ key: 4, label: "Vue" },
{ key: 5, label: "Knockout" },
{ key: 6, label: "Ember" },
{ key: 7, label: "D3" },
{ key: 8, label: "Google Charts" },
{ key: 9, label: "C+" },
{ key: 10, label: "C++" },
{ key: 11, label: "NodeJS" }
]);
const [selectedIndustryFilter, setSelectedIndustryFilter] = React.useState(
"Angular"
);
return (
<Box className={classes.root}>
<Tabs
variant="scrollable"
scrollButtons="on"
aria-label="scrollable auto tabs example"
ScrollButtonComponent={(props) => {
if (props.direction === "left") {
return (
<StyledIconButton isLeft {...props}>
<ChevronLeftIcon />
</StyledIconButton>
);
} else if (props.direction === "right") {
return (
<StyledIconButton {...props}>
<ChevronRightIcon />
</StyledIconButton>
);
} else {
return null;
}
}}
>
{chipData.map((data) => {
return (
<StyledChip
label={data.label}
onClick={() => {
setSelectedIndustryFilter(data.label);
console.log(data.label);
}}
selected={data.label === selectedIndustryFilter}
key={data.key}
className={classes.chip}
/>
);
})}
</Tabs>
</Box>
);
}
also you can check it here:
https://codesandbox.io/s/demo-material-ui-chips-single-line-with-scroll-forked-2f0z30?file=/src/index.js

React - CSS - how to style leaf of react-complex-tree

I'm using react-complex-tree to show my data in a tree-based look.
I want to make red that marked up parts but instead, I'm making red these parts that you can see in the picture.
In my data, I know which one is a leaf or which one has children.
This is how I collect my data.
const traverseXml = (treeData, xmlObject) => {
treeData[xmlObject.name] = {
index: xmlObject.name,
canMove: false,
hasChildren: !!xmlObject.children.length,
children: xmlObject.children.map(c => c.name),
data: !xmlObject.children.length ? `${findAbbr(xmlObject.name)}: ${xmlObject.value}` : `${findAbbr(xmlObject.name)}`,
canRename: false
};
if (!xmlObject.children.isEmpty) {
xmlObject.children.forEach(c => {
setExpandedItems(oldArray => [...oldArray, xmlObject.name]);
traverseXml(treeData, c);
});
}
};
in react-complex-tree documentation it says u have to give CSS like that.
<style>
{`
:root {
--rct-color-tree-focus-outline: none;
--rct-color-tree-nonfocus-outline: none;
--rct-item-height: 35px;
--rct-color-nonfocustree-item-focused-border:rgba(125, 152, 161, 0.4);
--rct-color-nonfocustree-item-selected-bg: rgba(125, 152, 161, 0.4);
--rct-color-nonfocustree-item-selected-text: inherit;
--rct-color-focustree-item-focused-border: rgba(125, 152, 161, 0.5);
--rct-color-focustree-item-selected-bg: rgba(125, 152, 161, 0.5);
--rct-color-tree-bg: rgba(125, 152, 161, 0.4);
}
.rct-tree-root-focus {
outline: 2px solid var(--rct-color-tree-focus-outline);
}
.rct-tree-item-arrow svg {
min-width: 16px;
}
.rct-tree-root {
min-width: 1080px;
}
.rct-tree-item-li {
font-size: 0.8rem;
list-style-type: none;
padding-left: 15px ;
}
.rct-tree-item-li:only-of-type {
${secondTreeData["BICFI"].hasChildren ? 'none' : 'color:red'}
}
.rct-tree-root.rct-tree-root-focus .rct-tree-item-title-container-selected {
background-color: var(--rct-color-focustree-item-selected-bg);
color: #0C1713;
}
`}
</style>
<s.StyledButton isDarkMode={isDarkMode}
onClick={handleOpenClick}>{expandButtonText}</s.StyledButton>
<s.TreeContainer isOpenButton={isOpenButton}>
<ControlledTreeEnvironment
canDragAndDrop={true}
canDropOnItemWithChildren={true}
canReorderItems={true}
items={secondTreeData}
getItemTitle={item => item.data}
canSearch={true}
viewState={{
['Apphdr']: {
focusedItem,
expandedItems: expandedData,
selectedItems,
},
}}
onFocusItem={item => setFocusedItem(item.index)}
onExpandItem={item => setExpandedData([...expandedData, item.index])}
onCollapseItem={item =>
setExpandedData(expandedData.filter(expandedItemIndex => expandedItemIndex !== item.index))
}
onSelectItems={items => setSelectedItems(items)}
>
<Tree treeId={"Apphdr"} rootItem={"AppHdr"}/>
</ControlledTreeEnvironment>
</s.TreeContainer>
I have already given my 2 days. Can someone help me with it?

variable css not applying in react js

this is a react app. my css class is not changing even though the state assign to track the boolean value is changing. I've passed my states accordingly for this still not working. here is the github url
my app.js file -
import React, { useState } from "react";
// Import Styles
import "./styles/App.css";
// Import Components
import Hello from "./components/Hello";
import Rectangle from "./components/Rectangle";
import Button from "./components/Button";
function App() {
const [colorStatus, setColorStatus] = useState(false);
return (
<div className="App">
<Hello />
<Rectangle colorStatus={colorStatus} />
<Button colorStatus={colorStatus} setColorStatus={setColorStatus} />
</div>
);
}
export default App;
button.js -\
import React from "react";
const Button = ({ colorStatus, setColorStatus }) => {
return (
<div className="button">
<button className="btn-1" onClick={() => setColorStatus(!colorStatus)}>
Press
</button>
</div>
);
};
export default Button;
rectangle.js -
import React from "react";
const Rectangle = ({colorStatus}) => {
return <div className={`rectangle ${colorStatus ? 'active-rectangle' : '' }`}></div>;
};
export default Rectangle;
necessary css -
.rectangle {
width: 50vw;
height: 50vh;
background: rgba(255, 0, 0, 0.4);
position: fixed;
top: 30%;
left: 35%;
}
.active-rectangle {
width: 50vw;
height: 50vh;
background: rgba(0, green, 0, 0.4);
position: fixed;
top: 30%;
left: 35%;
}

Your .active-rectangle css-rule needs correction like so :-
.active-rectangle {
width: 50vw;
height: 50vh;
background: rgba(0, 255, 0, 0.4);
position: fixed;
top: 30%;
left: 35%;
}
So your state should be getting updated and the active-rectangle class is getting applied. Just the background property isn't getting applied properly. Rest must still be getting applied.
background isn't getting applied properly because you cannot use green when a decimal value is expected inside rgba(...).

Actually your css class is getting changed (according to the url you provided).
Problem seems to be with the usage of background: rgba(0, green, 0, 0.4). Specifically in rgba(0, green, 0, 0.4).
Instead of green, it should have been a number from 0 to 255 to denote the green part of the colour.
G of R-G-B-A from rgba function you are using
checkout https://cssreference.io/property/background-color/

The problem, as said here before is the background property
Lets refactor the code a bit while we are in it.
.rectangle {
width: 50vw;
height: 50vh;
background: rgba(255, 0, 0, 0.4);
position: fixed;
top: 30%;
left: 35%;
}
.rectangle.active {
background: rgba(0, 255, 0, 0.4);
}
import React from "react";
const Rectangle = ({colorStatus}) => {
return <div className={`rectangle ${colorStatus ? 'active' : '' }`}></div>;
};
export default Rectangle;
Sandbox: https://codesandbox.io/s/friendly-galileo-gwzbh?file=/src/components/Rectangle.js

Randomize position of animated object

I have little script that moves objects on orbital and I want to randomize starting position of object.
Here's what I'm talking about:
http://jsfiddle.net/W69s6/1018/
HTML
<div class="orbit">
<div class="circle"></div>
</div>
CSS
.orbit
{
height: 200px;
width: 200px;
background: rgba(0,0,0,0.2);
}
.circle
{
height: 50px;
width: 50px;
background: #00ff00;
position: absolute;
}
JS
$(document).ready(function() {
orbit('.circle', 0, 0.01, 100, 75, 75);
});
function orbit(obj, t, ts, r, x, y)
{
t += ts;
var top = Math.floor(y - (r * Math.sin(t)));
var left = Math.floor(x - (r * Math.cos(t)));
$(obj).animate({
top: top,
left: left,
}, 1, function()
{
orbit(obj, t, ts, r, x, y);
});
}
Is anyone good at math and knows how to change it?

Change the first part of your code:
$(document).ready(function() {
orbit('.circle', Math.random()*100, 0.01, 100, 75, 75);
});