Skip to content

Commit

Permalink
fix: fix bounciness and weight of fruits
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronchan32
aaronchan32 committed Jun 2, 2024
1 parent e9a0994 commit 63294ec
Show file tree
Hide file tree
Showing 3 changed files with 763 additions and 56 deletions.
Binary file modified public/textures/cherry.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 changes: 47 additions & 56 deletions src/app/components/Fruits/Fruits.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import './Fruits.scss';
import { useEffect, useRef, useState } from 'react';
import { useEffect, useRef } from 'react';
import Matter, { Vertices, Body } from 'matter-js';

import 'pathseg';
Expand All @@ -10,18 +10,10 @@ import createEllipseVertices from './createEllipseVertices';
export default function Fruits() {
const scene = useRef<HTMLDivElement>(null);

const [isDesktop, setIsDesktop] = useState(false);
const [wireframe, setWireframe] = useState(false);

useEffect(() => {
if (!scene.current) return;

console.log(window.innerWidth);

if (window.innerWidth > 979) {
setIsDesktop(true);
console.log(isDesktop);
}
const isDesktop = window.innerWidth > 979;

/* ************ engine and renderer initialization + config ***************** */
const Engine = Matter.Engine,
Expand All @@ -36,7 +28,7 @@ export default function Fruits() {
element: scene.current,
engine: engine,
options: {
wireframes: wireframe,
wireframes: false,
// debugging properties
// showBounds: true,
// showDebug: true,
Expand Down Expand Up @@ -189,8 +181,10 @@ export default function Fruits() {
Composite.add(engine.world, basket);

/* ********************* define and add text ***************************** */
const wordSpriteScale = 1;
const wordBoxScale = 1;
const wordSpriteScale = 0.8;
const wordBoxScaleMobile = 0.6;
const wordSpriteScaleMobile = 0.5;
const wordsDesktop = [
{
// DESIGN
Expand Down Expand Up @@ -230,35 +224,35 @@ export default function Fruits() {
const wordsMobile = [
{
// DESIGN
textWidth: 220,
textHeight: 80,
boxScale: 1,
spriteScale: 0.4,
textWidth: 200,
textHeight: 55,
boxScale: wordBoxScaleMobile,
spriteScale: wordSpriteScaleMobile,
svgPath: '/textures/wordFour.svg'
},
{
// CO
textWidth: 220,
textHeight: 120,
boxScale: 1,
spriteScale: 0.4,
textWidth: 100,
textHeight: 55,
boxScale: wordBoxScaleMobile,
spriteScale: wordSpriteScaleMobile,
svgPath: '/textures/wordTwo.svg'
},

{
// UP-GRADE
textWidth: 200,
textHeight: 40,
boxScale: 1,
spriteScale: 0.4,
textWidth: 360,
textHeight: 55,
boxScale: wordBoxScaleMobile,
spriteScale: wordSpriteScaleMobile,
svgPath: '/textures/wordOne.svg'
},
{
// 2024
textWidth: 220,
textHeight: 60,
boxScale: 1,
spriteScale: 0.4,
textWidth: 180,
textHeight: 55,
boxScale: wordBoxScaleMobile,
spriteScale: wordSpriteScaleMobile,
svgPath: '/textures/wordThree.svg'
}
];
Expand Down Expand Up @@ -311,7 +305,7 @@ export default function Fruits() {
isStatic: false,
velocity: { x: 0, y: 0 },
restitution: 0.1,
mass: 0.0005,
mass: 1,
render: {
strokeStyle: 'black',
fillStyle: 'black',
Expand Down Expand Up @@ -369,6 +363,7 @@ export default function Fruits() {
Body.setStatic(cherry, false);
}, cherryDelay * 1000);

// const watermelonRatio = 799/844;
const watermelonScale = 0.2;
const watermelonShape = createEllipseVertices({
cx: 0,
Expand All @@ -378,21 +373,21 @@ export default function Fruits() {
steps: 16
});
const watermelon = Bodies.fromVertices(
scene.current?.clientWidth * 0.6,
scene.current?.clientWidth * 1,
scene.current?.clientHeight * -0.2,
[Vertices.hull(watermelonShape)],
{
restitution: 0.1, //Bounciness
mass: 5,
mass: 4,
render: {
fillStyle: 'black',
sprite: {
texture: '/textures/watermelon.webp',
xScale:
(watermelonScale * scene.current?.clientWidth * 0.4) /
(watermelonScale * scene.current?.clientWidth * 0.423) /
textureWidth,
yScale:
(watermelonScale * scene.current?.clientWidth * 0.4) /
(watermelonScale * scene.current?.clientWidth * 0.423) /
textureWidth
}
}
Expand All @@ -411,36 +406,39 @@ export default function Fruits() {
steps: 20
});
const apricot = Bodies.fromVertices(
scene.current?.clientWidth * 0.2,
scene.current?.clientHeight * -0.8,
scene.current?.clientWidth * 0.1,
scene.current?.clientHeight * -0.4,
[Vertices.hull(apricotShape)],
{
restitution: 0.1, //Bounciness
mass: 5,
mass: 4,
render: {
fillStyle: 'black',
sprite: {
texture: '/textures/apricot.webp',
xScale:
(apricotScale * scene.current?.clientWidth * 0.45) /
(apricotScale * scene.current?.clientWidth * 0.48) /
textureWidth,
yScale:
(apricotScale * scene.current?.clientWidth * 0.45) /
(apricotScale * scene.current?.clientWidth * 0.48) /
textureWidth
}
}
}
);
Composite.add(engine.world, apricot);
} else {
// MOBILE ---------------------------------------------

//Create Cherry
let cherryScale = 0.15;
let cherryScale = 0.13;
let cherryRatio = 68 / 179;

const cherryShape = createEllipseVertices({
cx: 0,
cy: 0,
ry: scene.current?.clientWidth * cherryScale * 0.8,
rx: scene.current?.clientWidth * cherryScale * 0.5,
ry: scene.current?.clientWidth * cherryScale * 1,
rx: scene.current?.clientWidth * cherryScale * 1 * cherryRatio,
steps: 20
});
const textureWidth = 150;
Expand All @@ -456,9 +454,9 @@ export default function Fruits() {
sprite: {
texture: '/textures/cherry.png',
xScale:
(cherryScale * scene.current?.clientWidth * 1.5) / textureWidth,
(cherryScale * scene.current?.clientWidth * 2) / textureWidth,
yScale:
(cherryScale * scene.current?.clientWidth * 1.5) / textureWidth
(cherryScale * scene.current?.clientWidth * 2) / textureWidth
}
}
}
Expand All @@ -478,8 +476,8 @@ export default function Fruits() {
scene.current?.clientHeight * -0.4,
[Vertices.hull(watermelonShape)],
{
restitution: 0.2, //Bounciness
mass: 0.0005,
restitution: 0.1, //Bounciness
mass: 3,
render: {
fillStyle: 'black',
sprite: {
Expand All @@ -506,11 +504,11 @@ export default function Fruits() {
});
const apricot = Bodies.fromVertices(
scene.current?.clientWidth * 0.2,
scene.current?.clientHeight * -1.5,
scene.current?.clientHeight * -1,
[Vertices.hull(apricotShape)],
{
restitution: 0.2, //Bounciness
mass: 0.0005,
restitution: 0.1, //Bounciness
mass: 2,
render: {
fillStyle: 'black',
sprite: {
Expand Down Expand Up @@ -697,18 +695,11 @@ export default function Fruits() {
render.textures = {};
window.removeEventListener('resize', handleResize);
};
}, [isDesktop, wireframe]);
}, []);

return (
<>
<div ref={scene} className="fruit-container" />
<button
onClick={() => {
setWireframe(!wireframe);
}}
>
Wireframe
</button>
</>
);
}
Loading

0 comments on commit 63294ec

Please sign in to comment.