JavaScriptClub/04: Difference between revisions
Wang ziheng (talk | contribs) mNo edit summary |
Wang ziheng (talk | contribs) Tag: Manual revert |
||
(27 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<div style="position:absolute; top:-5px; left: | <div style="position:absolute; top:-5px; left: 400px;" z-index:1"> | ||
<img src="https://i.pinimg.com/originals/ba/e3/0e/bae30e0c7acfec296e5a30d0a75af0f1.gif | <img src="https://i.pinimg.com/originals/ba/e3/0e/bae30e0c7acfec296e5a30d0a75af0f1.gif | ||
" width="200px;"/> | " width="200px;"/> | ||
</div> | </div> | ||
= | =Step1: Introduce= | ||
= | ==Tone.js== | ||
= | |||
= | https://tonejs.github.io/<br> | ||
https://tonejs.github.io/examples/<br> | |||
<img src="https://pzwiki.wdka.nl/mw-mediadesign/images/e/ee/BeerRobber.gif" width="700px"> | |||
<div>{{#Widget:Video|mp4=https://pzwiki.wdka.nl/mw-mediadesign/images/4/4d/BeerRobberV.mp4|style=width:700px;}}</div> | |||
<br> | |||
By using the Gamepad API, you can also control the helicopter with a gamepad. | |||
==Pizzicato.js== | |||
https://alemangui.github.io/pizzicato/<br> | |||
https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/pizz.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915 | |||
=Step2: Sliders= | |||
You can simply by using CSS to modify the slider to experiment. | |||
#slider1{ | |||
position: fixed; | |||
top:30%; | |||
left: 45%; | |||
width: 100px; | |||
height: 100px; | |||
transform: rotate(90deg); | |||
transform-origin: left bottom; | |||
background: rgba(0, 0, 0, 0); | |||
border: 1px solid black; | |||
-webkit-appearance: none; | |||
appearance: none; | |||
outline: none; | |||
} | |||
#slider1::-webkit-slider-thumb { | |||
width: 10px; | |||
height: 100px; | |||
background: rgb(0, 0, 0); | |||
border: 1px solid black; | |||
border-radius: 0; | |||
cursor: pointer; | |||
-webkit-appearance: none; | |||
appearance: none; | |||
} | |||
https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/sliderExample.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915<br> | |||
You could experiment more with the slider by adding an image on it. | |||
background: url('xxx.png/gif/jpg') no-repeat center; | |||
background-size: contain; | |||
==Sound Quilt== | |||
====Test1==== | |||
<div style="border-style: solid; display: inline-block;"> | |||
<img src="https://pzwiki.wdka.nl/mw-mediadesign/images/4/40/Re5.gif" width="600px"> | |||
</div> | |||
As a deconstructionism slider map:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe5%20add%20sound.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915 | |||
<br> | |||
====Test2==== | |||
<div style="border-style: solid; display: inline-block;"> | |||
[[File:Re1.png|center|600px]] | |||
</div> | |||
As a 16 square puzzle : https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe1add%20sound.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915 | |||
<br> | |||
====Test3==== | |||
<div style="border-style: solid; display: inline-block;"> | |||
<img src="https://pzwiki.wdka.nl/mw-mediadesign/images/8/89/Re2.gif" width="600px"> | |||
</div> | |||
A version that incorporates guidelines using the grid system, allows user to hide or show the effect names by dragging movements. It also maps to the slider to control the effect values:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe2.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915 | |||
<br> | |||
====Test4==== | |||
<div style="border-style: solid; display: inline-block;"> | |||
<img src="https://pzwiki.wdka.nl/mw-mediadesign/images/3/3f/Re3.2.gif" width="600px"> | |||
</div> | |||
With the multiple pitches and frequencies, this 4 square version allows user to create overlapping sounds by different combinations:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe3Demo.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915 | |||
====Test5==== | |||
When I was trying to combine the minimalism and the block game as a way to interact, this remind me of the block puzzle game-The Huarong Path(a Klotski puzzle game/sliding block puzzle game), in the game the blocks can only be moved horizontally or vertically, Players must use spatial thinking to slide the blocks around the board, often having to move other blocks out of the way to clear a path for the larger block to exit. | |||
<br> | |||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Quo_Vadis-HABA.jpg" width="300px"height="250px"> | |||
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Dad%27s_Puzzle.png" width="200px"> | |||
<img src="https://funpuzzlesworld.com/wp-content/uploads/2021/05/Chinese-Puzzle-Sliding-Piece-Puzzle-Chinese-Sliding-puzzle-HuaRong-Path-Three-Kingdoms-Klotski-Kids-Educational-Puzzles-1-768x768.jpg" width="300px"> | |||
<br> | |||
<div style="border-style: solid; display: inline-block;"> | |||
<img src="https://pzwiki.wdka.nl/mw-mediadesign/images/8/8d/Re3.gif" width="600px"> | |||
</div> | |||
Based on the slider block game and combine with the 4 square with multiple pitches and frequencies:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe3.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915 | |||
==Brick== | |||
<img src="https://pzwiki.wdka.nl/mw-mediadesign/images/f/f1/Bricks.gif" width="700px"> | |||
=Step3: Midi control= | |||
==Combining MIDI and HTML for Live Performance== | |||
==Expansion== | |||
https://sites.antoningallon.xyz/almanach/Almanach.html#debut<br> | |||
https://sites.antoningallon.xyz/testBaskerccampagne/ | |||
=Step4: Examination= |
Latest revision as of 22:09, 13 October 2024
Step1: Introduce
Tone.js
https://tonejs.github.io/
https://tonejs.github.io/examples/
By using the Gamepad API, you can also control the helicopter with a gamepad.
Pizzicato.js
https://alemangui.github.io/pizzicato/
https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/pizz.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915
Step2: Sliders
You can simply by using CSS to modify the slider to experiment.
#slider1{ position: fixed; top:30%; left: 45%; width: 100px; height: 100px; transform: rotate(90deg); transform-origin: left bottom; background: rgba(0, 0, 0, 0); border: 1px solid black; -webkit-appearance: none; appearance: none; outline: none; } #slider1::-webkit-slider-thumb { width: 10px; height: 100px; background: rgb(0, 0, 0); border: 1px solid black; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
You could experiment more with the slider by adding an image on it.
background: url('xxx.png/gif/jpg') no-repeat center; background-size: contain;
Sound Quilt
Test1
As a deconstructionism slider map:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe5%20add%20sound.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915
Test2
As a 16 square puzzle : https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe1add%20sound.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915
Test3
A version that incorporates guidelines using the grid system, allows user to hide or show the effect names by dragging movements. It also maps to the slider to control the effect values:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe2.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915
Test4
With the multiple pitches and frequencies, this 4 square version allows user to create overlapping sounds by different combinations:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe3Demo.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915
Test5
When I was trying to combine the minimalism and the block game as a way to interact, this remind me of the block puzzle game-The Huarong Path(a Klotski puzzle game/sliding block puzzle game), in the game the blocks can only be moved horizontally or vertically, Players must use spatial thinking to slide the blocks around the board, often having to move other blocks out of the way to clear a path for the larger block to exit.
Based on the slider block game and combine with the 4 square with multiple pitches and frequencies:https://hub.xpub.nl/chopchop/~wang/__lab__/files/public_html/SliderRe3.html?_xsrf=2%7Cdbb6309c%7C075a8a7528ffa95fedfb16f18b50c349%7C1728479915
Brick
Step3: Midi control
Combining MIDI and HTML for Live Performance
Expansion
https://sites.antoningallon.xyz/almanach/Almanach.html#debut
https://sites.antoningallon.xyz/testBaskerccampagne/