VR puzzle game on the web.

Felix Mariotto

Last update: Dec 29, 2022

Related tags

Overview

Art Salad

Not about salads.

Art Jigsaw puzzles in VR. On the web. Free and open-source.

Art Salad is a website that you can visit in immersive VR (with a virtual reality headset such as Meta Quest).
Play around in VR with jigsaw puzzles made from 3D scans of art and history objects.
It's fun, educative, and free.

Most models come from Sketchfab, and all of them are under Creative Common license.

Want to give it a try ? Very simple:

Put on a virtual reality headset (Meta Quest is supported).
Launch the web browser.
Go to https://artsalad.net.
Click on enter VR.
Enjoy

opti-6.mp4

How to contribute

Thank you for considering a contribution. You can add a new puzzle to the list, please read the readme file in the puzzles folder.
For all other contribution feel free to file a PR, and I will review it. Only useful PRs will be merged.

Comments

Part disappear with controller when controller is disabled

For instance if a controller runs out of battery, three.js automatically removes it from the scene. Since gripped parts are children of the controller, they get removed as well.

Whatever is done against this, it should happen here : https://github.com/felixmariotto/art-salad/blob/8378c5fd47e80b26dcd9124ea6ee28136ece9cb7/src/controls/controls.js#L284-L295
bug

opened by felixmariotto 1
Bug when model is gripped while exiting a puzzle
So when a puzzle is exited, PuzzleManager is told to clear everything. But if the model is gripped, it is in the controller space, not a child of puzzleManager.group. So controls should have something like that :

events.on( 'exit-puzzle-request', e => { controllers.forEach( c => /* remove gripped parts */ ) } );
bug
opened by felixmariotto 1
Pivot each piece to face the camera

When pieces are laid out in grid, it would be much better if they were also pivoted so that their front face look at the camera.

Currently half the pieces look away from the camera, that's not ideal :

It should happen here : https://github.com/felixmariotto/art-salad/blob/0ec2d750de1c5ab31f84e701bb4abdd436db9dc0/src/puzzles/puzzleManager.js#L102-L110
enhancement

opened by felixmariotto 1
Add music and sounds

It would be nice to have sounds in the game, particularly when two puzzle parts get merged, and when a puzzle is finished. A background ambient music would be nice too, or light crowd noises with lot of echo like in museums.

Here is where parts are merged : https://github.com/felixmariotto/art-salad/blob/0ec2d750de1c5ab31f84e701bb4abdd436db9dc0/src/puzzles/puzzleManager.js#L172-L191

A event should be fired here with the events module, and this event should be listened in a new audiomodule.
enhancement

opened by felixmariotto 1
TODO for release
[x] Record a video playing a puzzle for comm.

[x] Record a screenshot for site thumbnail and readme.

[x] Rework the UI and particularly the homepage, write Art Salad.

[x] Refactor the file system, put stuff in subfolders.

[x] Setup GH Pages

[x] Setup domain name with GH Pages

[x] Add 2D Github button

[x] Remove the license
opened by felixmariotto 1
Roadmap before application to Oculus Browser homepage
Requirements here.

[x] Make title image of 2560 x 1440 pixels

[x] Controller vibration #6

[x] Fix parts-controllers bugs #5 #4

[x] Pivot pieces toward camera #3

[x] Feedback sounds #2
opened by felixmariotto 0
Add neck rotation on jostick left/right

A rotation of one quarter would be good, since the information is placed one quarter on the right during a puzzle. Would improve accessibility for heavily disabled people.

It could happen here : https://github.com/felixmariotto/art-salad/blob/8378c5fd47e80b26dcd9124ea6ee28136ece9cb7/src/controls/controls.js#L112-L128

I think the camera can't be rotated while updated by the xr session (?), so it would need to be placed a child in a dolly, so the dolly can be rotated instead.
enhancement

opened by felixmariotto 0
Add dark mode

Apparently advised by Oculus Browser accessibility requirements here.

To make the musem model darker, it's enough to add a onBeforeCompile callback here to tinker a bit with the musem material's fragment shader.

Same for the pieces material here, although I think they shouldn't be darkened in the same proportion as the musem model.
enhancement

opened by felixmariotto 0

Owner

Felix Mariotto

GitHub https://artsalad.net

🏃‍♂️Open source, puzzle based adventure game in your browser

??‍♂️ Rungeon Rungeon is an open source, puzzle based adventure game. ?? About Rungeon features a series of puzzles in the form of stages, in which th

16 Aug 25, 2022

A puzzle game for js13k 2022.

Dying Dreams ...is a puzzle game made for js13k competition (2022). Compiling Tools you need: TypeScript (mandatory) Closure compiler (optional) advzi

77 Dec 8, 2022

A sliding puzzle with a Rubik's cube-like feel.

Alok's Sliding Puzzle A sliding puzzle with a Rubik's cube-like feel. Play: https://www.quaxio.com/sliding_puzzle/puzzle.html Screenshot: Building loc

10 Jun 7, 2022

NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

2 Feb 11, 2022

Conways-game-of-life - A Conway's Game Of Life project using Python

conways-game-of-life A Conway's Game Of Life project using Python JavaScript Devlog January 1st 2022: also need to remember Python's syntax a bit will

0 Sep 23, 2022

Slime jumper game is a simple game that requires you to escape from the enemies that come your way.

Slime Jumper What is this game? The slime jumper game is a game with a simple logic (but it was not so easy to do) where you have to escape from the e

2 Mar 1, 2022

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

LeaderBoard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. Mini Presentation Additio

20 Jun 30, 2022

INeedHelp is a Game Boy, Game Boy Advance, and Nintendo DS emulator written in JavaScript and TypeScript.

INeedHelp INeedHelp is a Game Boy Advance and Nintendo DS emulator written in JavaScript/TypeScript. FAQ Why is it called INeedHelp? You would need he

6 Jun 29, 2022

This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.

Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a

4 Mar 4, 2023

A web-based implementation of the Hanabi board game.

Senko Project "Senko" is a web-based implementation of the Hanabi board game. Online Demo The frontend uses TypeScript, Stylus, Mithril, Rxjs, and Mat

4 Feb 17, 2022

The leaderboard web app displays the top scoring player on the fictional game of life.

Leaderboard is website that displays the scores submitted by all players. It also allows the current user to submit his/her score. All data is preserved thanks to the external Leaderboard API service.

13 Nov 23, 2022

Web-based lunar voxel game.

Mooncraft 2000 A voxelish game — set on the Moon — in Javascript. The game is being hosted here: https://mooncraft2000.com I experimented with a few t

130 Sep 14, 2022

Web Application for admin of T-quest game to manage presets of questions

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

5 Jun 30, 2022

A highly portable first person 3D game playable on Desktop or Web!

rust-game Interfaces (*_interface/) are immediately human-playable versions of the game. They use single_player simulations of the game, which in turn

2 Jun 7, 2022

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a

33.4k Jan 7, 2023

HTML5 game framework for web and iOS

#LimeJS ##Getting started: ###Mac OS X and Linux users: Requirements: Python 2.6+, Git Clone the git repo (you have probably already done that): git c

1.4k Dec 1, 2022

a web tool for making "one-way" flowcharts for game design

Flowmeo Flowmeo is a web tool to quickly make one-way, "dependency" flowcharts, like you might need for designing an adventure game, or a tech tree, o

7 Sep 21, 2022

GameLand is an online gaming web application that allows users to view different kind of games available and share their views on each game.

GameLand is an online gaming web application that allows users to view different kind of games available and share their views on each game.Users can like and make reservations to play online. Built with HTML/CSS , JAVASCRIPT,API.

6 Sep 9, 2022

A game inspired by Go, developed using Phaser JS

Influence A game inspired by Go, developed using Phaser How to play Players take turns to select and color a tile. At the end of a turn, each tile wil

11 Aug 28, 2022