diff --git a/.gitignore b/.gitignore index a33a71fe09..c310bcc896 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ *~ +environment \ No newline at end of file diff --git a/css/activities.css b/css/activities.css index d32cc145dc..6b63161839 100644 --- a/css/activities.css +++ b/css/activities.css @@ -61,6 +61,7 @@ transition: width 0.4s ease-in-out; font-size: 24px; color: black; + max-width: 100%; } #search:focus { @@ -75,6 +76,8 @@ position: relative; background-color: rgba(255, 255, 255, 1); max-width: 396px; + max-height: 200px; + overflow-y: auto; font-size: 18px; border: 2px solid #87cefa; list-style-type: none; @@ -836,6 +839,11 @@ table { cursor: not-allowed; } +#playbackBtn.disabled { + opacity: 0.5; + cursor: not-allowed; +} + #right-arrow, #left-arrow { position: absolute; @@ -1724,6 +1732,10 @@ table { .disable_highlighting { user-select: none; } +#palette.flex-palette { + display: flex !important; + flex-direction: row !important; +} @media (max-width: 390px) { #right-arrow, diff --git a/docker-compose.yml b/docker-compose.yml index abf285b9f0..fef1a13594 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,24 +1,27 @@ name: musicblocks services: musicblocks: - build: https://github.com/sugarlabs/musicblocks.git#collaboration + build: + context: https://github.com/sugarlabs/musicblocks.git#test-collab ports: - "3000:3000" - #command: ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"] - env_file: - - ./environment - #planet-server: + command: ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"] + # env_file: + # - ./environment + # planet-server: # build: - # dockerfile: ./planet-server/Dockerfile - #volumes: - # - planet-server/planet.sql: + # dockerfile: ../planet-server/Dockerfile + # ports: + # - "8000:8000" collaboration-server: - #build: https://github.com/sugarlabs/collaboration-server.git - build: - dockerfile: ./collaboration-server/Dockerfile - volumes: - - .:/collaboration-server + build: https://github.com/sugarlabs/collaboration-server.git#test-collab + # build: + # dockerfile: ../collaboration-server/Dockerfile + # volumes: + # - .:/collaboration-server + ports: + - "8080:8080" environment: NODE_ENV: development #command: ["npm", "run", "server"] - command: ["npm", "run", "serve"] + command: ["npm", "run", "server"] diff --git a/dockerfile b/dockerfile index 150467223c..2047148925 100644 --- a/dockerfile +++ b/dockerfile @@ -1,15 +1,17 @@ # First stage: Build stage -FROM alpine:latest AS first -RUN git clone https://github.com/sugarlabs/planet-server.git - FROM python:latest AS build WORKDIR /app COPY . . -COPY --from=first /planet-server /app/planet-server +# Second stage: Final stage +FROM python:latest + +WORKDIR /app + +COPY --from=build /app /app EXPOSE 3000 -CMD ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"] +CMD ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"] \ No newline at end of file diff --git a/documentation/README.md b/documentation/README.md index a6ac7faf49..1debb87caa 100644 --- a/documentation/README.md +++ b/documentation/README.md @@ -1,5 +1,4 @@ -Using Music Blocks -================== +# Using Music Blocks Music Blocks is a fork of [Turtle Blocks](href="https://turtle.sugarlabs.org). It has extensions for @@ -22,14 +21,34 @@ You can run it from ![alt tag](./getting-started.png "Music Blocks in a browser") -Getting Started ---------------- +## TABLE OF CONTENTS + +1. [Getting Started](#1-getting-started) +2. [Toolbars](#2-toolbars) +3. [Context Menu](#3-context-menu) +4. [The Block Context Menu](#4-the-block-context-menu) + 1. [Extract Option](#41-extract-option) + 2. [Duplicate Option](#42-duplicate-option) + 3. [Delete Option](#43-delete-option) + 4. [Help Option](#44-help-option) +5. [Keyboard Shortcuts](#5-keyboard-shortcuts) +6. [Block Palettes](#6-block-palettes) + 1. [Defining a Note](#61-defining-a-note) + 2. [A Quick Tour of Selected Blocks](#62-a-quick-tour-of-selected-blocks) +7. [Flow Palette](#7-flow-palette) +8. [Widget Palette](#8-widget-palette) +9. [Stats](#9-stats) +10. [Planet View](#10-planet-view) + +## 1. Getting Started + +[Back to Table of Contents](#table-of-contents) ![Default blocks](./getting_started_blocks.svg "default blocks") When you first launch Music Blocks in your browser, you'll see a stack of blocks representing the notes: `Sol 4`, `Mi 4`and `Sol 4`. The first two notes are `1/4` note; third note is -`1/2` note. +`1/2` note. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1731947644713000&run=True) ![The Play button](./play.png "play button") @@ -65,8 +84,9 @@ To maximize screen real estate, Music Blocks overlays the program elements (stacks of blocks) on top of the canvas. These blocks can be hidden at any time while running the program. -Toolbars --------- +## 2. Toolbars + +[Back to Table of Contents](#table-of-contents) There are five toolbars: @@ -98,38 +118,45 @@ a block. Many blocks also incorporate "pie menus" for changing block parameters. -## Context Menu +## 3. Context Menu + +[Back to Table of Contents](#table-of-contents) + Context menus are an important part of user interfaces that provide users with quick access to a set of actions relevant to the context in which they are working.The right-click context menu in Music Blocks provides several options for working with blocks and the workspace. To access the right-click context menu, simply right-click anywhere in the workspace. -# The Block context menu: +## 4. The Block Context Menu + +[Back to Table of Contents](#table-of-contents) + This context menu appears when you right-click on a block in the workspace. It provides options such as "Duplicate," "Delete," "Help," and "Copy to Palette." The "Duplicate" option creates a copy of the selected block, while the "Delete" option removes the selected block from the workspace. The "Help" option opens a help dialog for the selected block, and the "Copy to Palette" option adds the selected block to the user's custom block palette. ![Right-click context menu](./block_context.png "Right-click context menu") -# Extract +### 4.1 Extract Option The "Extract" option in Music Blocks allows you to separate a nested block into its individual components or sub-blocks. This can be useful if you want to modify or reuse specific parts of a block without affecting the rest of the block. ![Extract the selected block](./extract.png "Extract the selected block") -# Duplicate +### 4.2 Duplicate Option This option creates a duplicate of the selected block and places it next to the original block. ![Duplicate](./duplicate.png "Duplicate") -# Delete -This option removes the selected block from your program +### 4.3 Delete Option +This option removes the selected block from your program. ![Delete](./delete.png "Delete") -# Help +### 4.4 Help Option This option shows a help screen with information about the selected block. You can use this option to learn more about the block's functionality and how to use it in your projects. ![Help](./help.png "Help") By using the right-click context menu in Music Blocks, you can quickly perform common tasks and manipulate blocks on the workspace. This can help you to work more efficiently and effectively in your projects. -Keyboard shortcuts ------------------- +## 5. Keyboard Shortcuts + +[Back to Table of Contents](#table-of-contents) There are several keyboard shortcuts: @@ -147,8 +174,9 @@ highlighting the block(s) you want to copy. You can directly type notes using *d* for `Do`, *r* for `Re`, *m* for `Mi`, *f* for `Fa`, *s* for `Sol`, *l* for `La`, and *t* for `Ti`. -Block Palettes --------------- +## 6. Block Palettes + +[Back to Table of Contents](#table-of-contents) The block palettes are displayed on the left side of the screen. These palettes contain the blocks used to create programs. @@ -168,8 +196,7 @@ for details specific to music: *Rhythm*, *Meter*, *Pitch*, *Intervals*, All of the other palettes are described in the [Turtle Blocks documentation pages](http://github.com/sugarlabs/turtleblocksjs/tree/master/documentation). -Defining a note ---------------- +### 6.1 Defining a Note ![The Note Block](./newnote_block.svg "the note") @@ -217,15 +244,14 @@ you can put as many *Pitch* blocks inside a note as you'd like. They will play together as a chord. You can also insert graphics blocks inside a note in order to create sound-sync animations. -A quick tour of selected blocks -------------------------------- +### 6.2 A Quick Tour of Selected Blocks ![The Set Instrument block](./settimbre_block.svg "Set instrument block") The *Set instrument* block, found on the *Tone* palette, lets you choose a timbre for a note. In the above example, a guitar model is used to make any notes contained within the block's clamp will sound as if -they are being played on a guitar. +they are being played on a guitar. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1731948356610795&run=True) ![The Set Volume block](./setsynthvolume_block.svg "Set synth volume") @@ -237,28 +263,28 @@ volume), of any notes contained with the block's clamp. The *Set drum* block, which is used inside of the clamp of a *Note value* block is used to add drum sounds to a note. It is found on the -*Drum* palette. +*Drum* palette. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732000719242159&run=True) -![The Repeat block](./repeat_block.svg "Repeat") +![The Repeat block](./repeat_block.svg "Repeat Block") The *Repeat* block, found on the *Flow* palette, is used to create loops. Whatever stack of blocks are placed inside its clamp will be repeated. It can be used to repeat individual notes, or entire phrases -of music. +of music. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732003682836455&run=True) -![The Duplicate block](./duplicatenotes_block.svg "Duplicate block") +![The Duplicate block](./duplicatenotes_block.svg "Duplicate Block") The *Duplicate* block, found on the *Rhythms* palette, is used to repeat any contained notes. Similar to using a *Repeat* block, but rather than repeating a sequence of notes multiple times, each note is repeated in turn, e.g. duplicate x2 of `4 4 8` would result in `4 4 4 -4 8 8`, where as repeat x2 of `4 4 8` would result in `4 4 8 4 4 8`. +4 8 8`, where as repeat x2 of `4 4 8` would result in `4 4 8 4 4 8`. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732003870740637&run=True) The *Start* block, found on the *Action* palette, is tied to the *Run* button. Anything inside of the clamp of the *Start* button will be run -when the button is pressed. +when the button is pressed. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732004679481517&run=True) -![The Start block](./multiple_start_blocks.svg "Start") +![The Start block](./multiple_start_blocks.svg "Start Block") Note that you can have multiple mice and that each mouse is equivalent to a "voice" in music. It can play notes of various pitches @@ -276,7 +302,7 @@ create an *Action* block, a new block corresponding to that action is added to the palette. The name given to the action is the name associated with the new block. (It is common practice to use *Action* blocks to define short phrases of music that can be repeated and -modified.) +modified.) [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732004679481517&run=True) Actions are a powerful organizational element for your program and can be used in many powerful ways, e.g., an action can be associated with @@ -284,91 +310,91 @@ an event, such as an on beat or off beat or mouse click. See [Music Blocks Programming Guide](http://github.com/sugarlabs/musicblocks/tree/master/guide/README.md), for further details and examples. -![The Storein Box block](./storebox1_block.svg "storein-Box-Add One") +![The Storein Box block](./storebox1_block.svg "Store in box & Add 1 to Block") The *Store in* block, found on the *Boxes* palette, is used to store a value. That value can be retrieved using the *Box* block. The value can be modified using the *Add one* block. These blocks are the typical way in which variables are stored and retrieved in Music -Blocks. +Blocks. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732020971700880&run=True) -![Forward](./forward_block.svg "forward") +![Forward](./forward_block.svg "Forward Block") -The *Forward* block, found on the *Mouse* palette, is used to draw +The *Forward* block, found on the *Graphics/Mouse* palette, is used to draw straight lines. (Note that if this block is used inside of a *Note value* block—the line will be drawn as the note plays; otherwise -the line is drawn "instantly".) +the line is drawn "instantly".) [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1730651293282088&run=True) -![Right](./left_block.svg "right") +![Right](./left_block.svg "Right/Left Block") -The *Right* block, found on the *Mouse* palette, is used to rotate the +The *Right/Left* block, found on the *Graphics/Mouse* palette, is used to rotate the mouse heading. (Note that if this block is used inside of a *Note value* block—the heading will change as the note plays; -otherwise the heading is changed "instantly".) +otherwise the heading is changed "instantly".) [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732023891064703&run=True) -![Pen Up](./mousebutton_block.svg "pen up-pen down") +![Pen Up](./mousebutton_block.svg "Pen up and Pen down Block") The *Pen up* and *Pen down* blocks, found on the *Pen* palette, -determine whether or not the mouse draws as it moves. +determine whether or not the mouse draws as it moves. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732030390164543&run=True) -![Set Shade](./setshade_block.svg "set shade") +![Set Shade](./setshade_block.svg "Set shade Block") The *Set shade* block, also found on the *Pen* palette, is used to set the lightness or darkness of the "ink" used in the mouse pen. `set -shade 0` is black. `set shade 100` is white. +shade 0` is black. `set shade 100` is white. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732096229605656&run=True) -![Set Color](./setcolor_block.svg "set color") +![Set Color](./setcolor_block.svg "Set color Block") The *Set color* block, also found on the *Pen* palette, is used to set the color of the "ink" used in the mouse pen. `set color 0` is -red. `set color 70` is blue. +red. `set color 70` is blue. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732096675098636&run=True) -![Random](./random_block.svg "random") +![Random](./random_block.svg "Random Block") The *Random* block, found on the *Numbers* palette, is used to generate a random number, because sometimes being unpredictable is -nice. +nice. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732097168390186&run=True) -![One of This or That](./oneOf_block.svg "on of this or that") +![One of This or That](./oneOf_block.svg "One of this or that Block") The *One of* block, also found on the *Numbers* palette, is used to generate a binary choice, one of "this" or "that", because sometimes -being unpredictable is nice. +being unpredictable is nice. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732113139904914&run=True) -![alt tag](./show_block.svg "show media") +![alt tag](./show_block.svg "Show media Block") The *Show* block, found on the *Media* palette, is used to display -text and images. +text and images. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732117445989018&run=True) -![Mouse Button](./mousebutton_block.svg "mousebutton") +![Mouse Button](./mousebutton_block.svg "Mouse button Block") The *Mouse button* block, found on the *Sensors* palette, returns true if the mouse button is clicked. The mouse button block can be used to -create some interactivity in your program. +create some interactivity in your program. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732030390164543&run=True) -![Cursor XY](./x_block.svg "cursorx-cursory") +![Cursor XY](./x_block.svg "Cursor x - Cursor y Block") -The *Cursor x* and *Cursor y* blocks, also found on the *Sensors* palette, return the X and Y coordinates of the cursor. These blocks can also be used to create interactive programs. +The *Cursor x* and *Cursor y* blocks, also found on the *Sensors* palette, return the X and Y coordinates of the cursor. These blocks can also be used to create interactive programs. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732117445989018&run=True) -![alt tag](./input_block.svg "input") +![alt tag](./input_block.svg "Input Block") Prompting the user for input is done with the *Input* block. This -block will display a messgae with a prompt and open an input form at +block will display a message with a prompt and open an input form at the current position of the mouse. Program execution is paused until the user types into the form and types RETURN (or Enter). The contents -of the input form are then transferred to *Input-value* block. +of the input form are then transferred to *Input-value* block. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732171497274793&run=True) -![Push](./push_block.svg "push") +![Push](./push_block.svg "Push Block") -![Pop](./pop_block.svg "pop") +![Pop](./pop_block.svg "Pop Block") The *Push* and *Pop* blocks, found on the *Heap* palette, are used to store and retrieve values on/from a first-in, last-out (FILO) program -heap. There is a separate heap maintained for each *Start* block. +heap. There is a separate heap maintained for each *Start* block. -![Get Value](./getDict_block.svg "get value") +![Get Value](./getDict_block.svg "Get value Block") -![Set Value](./setDict_block.svg "set value") +![Set Value](./setDict_block.svg "Set value Block") The *Get value* and *Set value* blocks are found on the *Dictionary* palette. They are used to get and set values in a dictionary @@ -377,27 +403,28 @@ dictionary and you can have as many dictionaries as you'd like as well. There is also a built-in dictionary associated with each *Start* block that has key/value pairs for parameters such as x, y, heading, color, shade, grey, pen size, notes played, current pitch, pitch -number, and note value. +number, and note value. -![Print](./print_block.svg "print") +![Print](./print_block.svg "Print Block") The *Print* block, found on the *Extras* palette, is used to print messages during program execution. It is very useful as a debugging tool and also as a means of adding lyrics to your music—think -karaoke. +karaoke. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732172483377262&run=True) + +## 7. Flow Palette -Flow Palette ------------- +[Back to Table of Contents](#table-of-contents) -The Flow palette is described in more detail in the Turtle Blocks -documentation. Here we review a few ways to approach taking different +The Flow palette is described in more detail in the [Turtle Blocks +documentation](http://github.com/sugarlabs/turtleblocksjs/tree/master/documentation). Here we review a few ways to approach taking different actions on different beats. The *Switch* block will take the action defined in the *Case* that matches the argument passed to the *Switch* block. In the figure below, it will take a different action based on the beat value: "on case 1 run action1", "on case 2, run action2", ..., "on case 4 run -action4". You can also define a default action. +action4". You can also define a default action. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732173207750796&run=True) ![Switch](./switch-on-beat.svg "Switch on Beat") @@ -406,12 +433,13 @@ action4". You can also define a default action. Another way to do the same thing is with the *Do* block found on the Action palette. In the figure below, we add the beat count to "action" to create a series of strings: "action1", "action2", ..., -"action4". We then "do" that action. +"action4". We then "do" that action. ![Do](./do-actions.svg "Do actions") -Widget Palette --------------- +## 8. Widget Palette + +[Back to Table of Contents](#table-of-contents) Music Blocks has various Widgets that can be used within Music Blocks to enhance your experience. The *Pitch-time matrix* is described here. @@ -434,7 +462,7 @@ familiar with math). *Pitch-time Matrix* blocks clamp is used to define the matrix: A row in the matrix is created for each *Pitch* block and columns are created for individual notes, which are created by using *Rhythm* -blocks, individual note blocks, or the *Tuplet* block. +blocks, individual note blocks, or the *Tuplet* block. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732180386380311&run=True) ![Rhythm](./rhythmruler2_block.svg "Rhythm block") @@ -446,7 +474,7 @@ for a quarter note, etc. (Recall that in traditional Western notation all note values are (1) in powers of two, and are (2) in relation to the "whole note", which is in turn (3) defined by tempo, or beats—usually quarter notes—per minute) Each note is -represented by a column in the matrix. +represented by a column in the matrix. Special ratios of the whole note can be created very easily with the *Rhythm* block by choosing an integer other than the traditional @@ -479,7 +507,7 @@ notes, etc. This design choice allows for maximum flexibility) You can mix and match *Rhythm* and individual *Note* blocks within a *Tuplet* block to generate complex rhythms (e.g. two quarter notes plus an eighth note is possible within the tuplet). Each note is represented -by a column in the matrix. +by a column in the matrix. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1732191858479236&run=True) Note: Each time you open the matrix, it tries to reconstruct the notes marked from the previous matrix. If you modify the *Pitch* and @@ -492,16 +520,18 @@ the chunk in the clamp of the *Pitch-time Marix* block. More details about all of the widgets are available in the [Music Blocks Programming Guide](http://github.com/sugarlabs/musicblocks/tree/master/guide/README.md). -Stats ------ +## 9. Stats -Project statistics are available from a button the the secondary +[Back to Table of Contents](#table-of-contents) + +Project statistics are available from a button on the secondary toolbar in advanced mode. ![Stats](./stats.svg "Stats Details") -Planet View ------------ +## 10. Planet View + +[Back to Table of Contents](#table-of-contents) Music Blocks also provides a Planet view to find and share projects. It has options to load project from file locally and make @@ -523,3 +553,5 @@ can download. ![Planet](./planet-3.png) ![Planet](./planet-4.png) + +[Back to Table of Contents](#table-of-contents) \ No newline at end of file diff --git a/documentation/block_context.png b/documentation/block_context.png index 78e023014a..d418e0cc6a 100644 Binary files a/documentation/block_context.png and b/documentation/block_context.png differ diff --git a/guide-es/README.md b/guide-es/README.md index 1d2f0bcabd..c538718c05 100755 --- a/guide-es/README.md +++ b/guide-es/README.md @@ -703,7 +703,7 @@ counter-clockwise, transforming it into _Locrian_. In the above example, the _Major_ mode has been inverted, transforming it into _Phrygian_. -Note: The build-in modes in Music Blocks can be found in (musicutils.js)[https://github.com/sugarlabs/musicblocks/blob/master/js/musicutils.js#L68]. +Note: The build-in modes in Music Blocks can be found in (musicutils.js)[https://github.com/sugarlabs/musicblocks/blob/master/js/utils/musicutils.js#L68]. ![alt tag](./mode6.svg " ") diff --git a/guide-es/index.html b/guide-es/index.html index 12f7d7c7a4..8caefac82d 100755 --- a/guide-es/index.html +++ b/guide-es/index.html @@ -496,7 +496,7 @@

4. Musical Modes

alt tag

In the above example, the Major mode has been inverted, transforming it into Phrygian.

-

Note: The build-in modes in Music Blocks can be found in (musicutils.js)[https://github.com/sugarlabs/musicblocks/blob/master/js/musicutils.js#L68].

+

Note: The build-in modes in Music Blocks can be found in (musicutils.js)[https://github.com/sugarlabs/musicblocks/blob/master/js/utils/musicutils.js#L68].

alt tag

The Save button exports a stack of blocks representing the mode that can be used inside the Pitch-time Matrix block.

diff --git a/guide-ja/README.md b/guide-ja/README.md index 3ebf7b44de..146fbaee8b 100644 --- a/guide-ja/README.md +++ b/guide-ja/README.md @@ -805,7 +805,7 @@ counter-clockwise, transforming it into *Locrian*. In the above example, the *Major* mode has been 転回ed, transforming it into *Phrygian*. -Note: The build-in 音階とモード in ミュージック・ブロックス can be found in [musicutils.js](https://github.com/sugarlabs/musicblocks/blob/master/js/musicutils.js#L68). +Note: The build-in 音階とモード in ミュージック・ブロックス can be found in [musicutils.js](https://github.com/sugarlabs/musicblocks/blob/master/js/utils/musicutils.js#L68). ![alt tag](./mode6.svg "ピッチ・タイム行列 block") diff --git a/guide-ja/index.html b/guide-ja/index.html index 1ff4c42bd7..afa2beaece 100644 --- a/guide-ja/index.html +++ b/guide-ja/index.html @@ -518,7 +518,7 @@

4.4 音楽の音階と

alt tag

In the above example, the Major mode has been 転回ed, transforming it into Phrygian.

-

Note: The build-in 音階とモード in ミュージック・ブロックス can be found in musicutils.js.

+

Note: The build-in 音階とモード in ミュージック・ブロックス can be found in musicutils.js.

alt tag

The Save button exports a stack of blocks representing the mode that can be used inside the ピッチ・タイム行列 block.

diff --git a/guide-zhCN/README.md b/guide-zhCN/README.md index 9e8d706c68..a448504b00 100644 --- a/guide-zhCN/README.md +++ b/guide-zhCN/README.md @@ -743,7 +743,7 @@ notes. 注意：《音乐拼块》中的内建模式可以在 [musicutils.js] 中找到 -(https://github.com/sugarlabs/musicblocks/blob/master/js/musicutils.js#L68). +(https://github.com/sugarlabs/musicblocks/blob/master/js/utils/musicutils.js#L68). ![alt tag](../guide/mode6.svg "Pitch-time Matrix block") diff --git a/guide-zhCN/index.html b/guide-zhCN/index.html index aa1f7d2974..f62e08afab 100644 --- a/guide-zhCN/index.html +++ b/guide-zhCN/index.html @@ -488,7 +488,7 @@

4.4 音乐模式

alt tag

在上面的例子中，Major 模式已经被反转，转换它成 Phrygian。

注意：《音乐拼块》中的内建模式可以在 [musicutils.js] 中找到 -(https://github.com/sugarlabs/musicblocks/blob/master/js/musicutils.js#L68).

+(https://github.com/sugarlabs/musicblocks/blob/master/js/utils/musicutils.js#L68).

alt tag

Save 按钮导出一堆代表模式的块，可以在 Pitch-Time Matrix 块中使用。

4.5 音调-鼓声矩阵

diff --git a/guide/README.md b/guide/README.md index 1710040f53..b5b763db2b 100644 --- a/guide/README.md +++ b/guide/README.md @@ -142,12 +142,15 @@ case, an eighth note. At the bottom, two notes that are played consecutively are shown. They are both `1/8` notes, making the duration of the entire sequence `1/4`. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726138873526815&run=True) + ![notes](./note2.svg "A quarter note, a sixteenth note, and a half note Note value blocks") In this example, different note values are shown. From top to bottom, they are: `1/4` for an quarter note, `1/16` for a sixteenth note, and `1/2` for a half note. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726139143565736&run=True) Note that any mathematical operations can be used as input to the *Note value*. @@ -171,6 +174,8 @@ the frequency (and therefore pitch) at which the note is played. ![pitch block](./note3.svg "Specifying a pitch block's name and octave") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726139416021937&run=True) + There are many systems you can use to specify a *pitch* block's name and octave. Some examples are shown above. @@ -236,6 +241,7 @@ notes are located on a keyboard or staff. Multiple, simultaneous pitches can be specified by adding multiple *Pitch* blocks into a single *Note value* block, like the above example. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725793652385126&run=True) ### 2.4 Rests @@ -243,6 +249,7 @@ example. A rest of the specified note value duration can be constructed using a *Silence* block in place of a *Pitch* block. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725793737126028&run=True) ### 2.5 Drums @@ -252,12 +259,14 @@ Anywhere a *Pitch* block can be used—e.g., inside of the matrix or a *Note value* block—a *Drum Sample* block can also be used instead. Currently there about two dozen different samples from which to choose. The default drum is a kick drum. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725793852737369&run=True) ![drums](./note5.svg "Multiple Drum Sample blocks in combinations") Just as in the [multi-pitch](#23-multiple-pitches) example above, you can use multiple *Drum* blocks within a single *Note value* blocks, and combine them with *Pitch* blocks as well. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725793935277059&run=True) ## 3. Programming with Music @@ -275,6 +284,8 @@ widget to help you get started. ![action](./chunk-1.svg "using action inside Start block") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725788353457649&run=True) + Every time you create a new *Action* stack, Music Blocks creates a new block specific to, and linked with, that stack. (The new block is found at the top of the *Block* palette, found on the left edge of the @@ -311,6 +322,7 @@ block to execute them sequentially. You can [repeat](#333-repeating-notes) actions either by using multiple *Action* blocks or using a *Repeat* block. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725788849659637&run=True) ![multiple actions](./chunk-6.svg "multiple action stacks") @@ -318,6 +330,7 @@ multiple *Action* blocks or using a *Repeat* block. You can also mix and match actions. Here we play the *Action* block with name `chunk0`, followed by `chunk1` twice, and then `chunk0` again. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725789807251793&run=True) ![actions](./chunk-8.svg "creating a song using actions") @@ -326,6 +339,8 @@ name `chunk0`, followed by `chunk1` twice, and then `chunk0` again. A few more chunks and we can make a song. (Can you read the block notation well enough to guess the outcome? Are you familiar with the song we created?) +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725791527821787&run=True) + ### 3.2 Pitch Transformations @@ -774,6 +789,8 @@ block. ![interval](./transform9.svg "Scalar interval block") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726142617030713&run=True) + The *Scalar interval* block calculates a relative interval based on the current mode, skipping all notes outside of the mode. For example, a *fifth*, and adds the additional pitches to a note's playback. In @@ -792,6 +809,8 @@ Absolute (or semitone) intervals are based on half-steps. ![intervals](./transform14.svg "Using absolute intervals") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726143428513328&run=True) + The *Augmented* block calculates an absolute interval (in half-steps), e.g., an augmented fifth, and adds the additional pitches to a note. Similarly, the *Minor* block calculates an absolute interval, @@ -821,6 +840,8 @@ octave shift down; 3/2 would be a fifth. ![ratio interval](../documentation/ratiointerval_block.svg "Ratio Interval example") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726144197873608&run=True) + The *Ratio Interval* block lets you generate an interval based on a ratio. @@ -866,6 +887,8 @@ rotation. ![inversion](./transform13.svg "inversion") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726144415115588&run=True) + NOTE: The initial `C5` pitch (as a half note) remains unchanged (in all of the examples) as it is outside of the invert block. @@ -1101,10 +1124,14 @@ In the example, on the left, the result would be `Sol, Re, Sol, Sol, Re, Sol, Sol, Re, Sol, Sol, Re, Sol`; on the right the result would be `Sol, Sol, Sol, Sol, Re, Re, Re, Re, Sol, Sol, Sol, Sol`. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725794018017026&run=True) + #### 3.3.4 Swinging Notes and Tied Notes ![swing](./transform7.svg "swinging notes and tied notes") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725867425283695&run=True) + The *Swing* block works on pairs of notes (specified by note value), adding some duration (specified by swing value) to the first note and taking the same amount from the second note. Notes that do not match @@ -1165,6 +1192,8 @@ The *Slur* block lengthens the sustain of notes—running longer than the noted duration and blending it into the next note—while maintaining the specified rhythmic value of the notes. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725868210212676&run=True) + #### 3.3.7 Backwards ![backwards](./transform11.svg "Backward block") @@ -1213,6 +1242,8 @@ example, if you have 3 notes in sequence contained in a *Crescendo* block with a value of `5`, the final note will be at 15% more than the original value for volume. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725868641106995&run=True) + NOTE: The *Crescendo* block does not alter the volume of a note as it is being played. Music Blocks does not yet have this functionality. @@ -1224,7 +1255,7 @@ The default instrument is an electronic synthesizer, so by default, that is the instrument used when playing notes. You can override this default for a group of notes by using the *Set Instrument* block. It will select an [instrument](#342-setting-instrument) for the -synthesizer for any contained blocks, e.g., violin. +synthesizer for any contained blocks, e.g., violin. [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725869548034418&run=True) ![default voice](../documentation/setdefaultinstrument_block.svg "Set Default Instrument") @@ -1233,6 +1264,7 @@ block. In the example above, the default instrument is set to piano, so any note that is not inside of a *Set instrument* block will be played using the piano synthesizer. The first note in this example is piano; the second note is guitar; and the third is piano. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1726145948711407&run=True) #### 3.4.3 Setting Key and Mode @@ -1245,6 +1277,7 @@ and a number of more exotic modes, such as Bebop, Geez, Maqam, etc. This block allows users to access "movable Do" within Music Blocks, where the mapping of solfege to particular pitch changes depending on the user's specified tonality. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725870361330836&run=True) ![mode](./transform19.svg "Define mode block") @@ -1262,6 +1295,7 @@ e.g. plus or minus up to one half step. The rate argument determines the rate of the variation. The other effects blocks also modulate pitch over time. Give them a try. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725870963978517&run=True) ### 3.5 Voices @@ -1686,6 +1720,7 @@ You can use as many *Rhythm* blocks as you'd like inside the *Phrase maker* block. In the above example, two *Rhythm* blocks are used, resulting in three quarter notes and six eighth notes. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725873372253840&run=True) #### 4.2.3 Creating Tuplets @@ -1695,7 +1730,7 @@ notes. Tuplets are a collection of notes that get scaled to a specific duration. Using tuplets makes it easy to create groups of notes that -are not based on a power of 2. +are not based on a power of 2 [RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725874435939635&run=True). In the example above, three quarter notes—defined in the *Simple Tuplet* block—are played in the time of a single quarter @@ -1717,6 +1752,7 @@ for intermixing multiple rhythms within single tuplet. In the example above, the two *Rhythm* blocks are embedded in the *Tuplet* block, resulting in a more complex rhythm. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725874743559698&run=True) Note: You can mix and match *Rhythm* blocks and *Tuplet* blocks when defining your matrix. @@ -1813,6 +1849,7 @@ sub-cells. Once the fourth tone has sounded, a progress bar will run from left to right across the screen. Each click of the mouse will define another beat within the cell. If you don't like your rhythm, use the *Undo* button and try again. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725875683911786&run=True) ### 4.4 Musical Modes @@ -1895,12 +1932,13 @@ clockwise, transforming it into *Locrian*. In the above example, the *Major* mode has been inverted, transforming it into *Phrygian*. -Note: The build-in modes in Music Blocks can be found in [musicutils.js](https://github.com/sugarlabs/musicblocks/blob/master/js/musicutils.js#L68). +Note: The build-in modes in Music Blocks can be found in [musicutils.js](https://github.com/sugarlabs/musicblocks/blob/master/js/utils/musicutils.js#L68). ![widget](./mode6.svg "phrase maker block") The *Save* button exports a stack of blocks representing the mode that can be used inside the *Phrase maker* block. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725877046734200&run=True) ### 4.5 Meters @@ -2245,6 +2283,8 @@ The *Drag* button will drag the widget. The *Close* button will close the widget. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725879922065766&run=True) + ### 4.13 The Oscilloscope Music Blocks has an Oscilloscope Widget to visualize the music as it plays. @@ -2254,6 +2294,7 @@ Music Blocks has an Oscilloscope Widget to visualize the music as it plays. ![widget](./oscilloscope2.svg "Oscilloscope") A separate wave will be displayed for each mouse. +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725883406989554&run=True) ### 4.14 The Sampler @@ -2270,6 +2311,8 @@ Instrument* block. ![widget](./sampler2.svg "Sampler Widget") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725883527894966&run=True) + ### 4.15 Arpeggio ![widget](../documentation/arpeggiomatrix_block.svg "Arpeggio Widget") @@ -2295,6 +2338,8 @@ do do sol```. ![widget](../documentation/custom_arpeggio.svg "Custom Arpeggio") +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725883915389933&run=True) + ## 5. Beyond Music Blocks [Previous Section (4. Widgets)](#4-widgets) | [Back to Table of Contents](#TABLE-OF-CONTENTS) @@ -2401,6 +2446,8 @@ For the block stacks (and mouse art generated after running), ![Example Project](../js/js-export/samples/mode-up-down.png) +[RUN LIVE](https://musicblocks.sugarlabs.org/index.html?id=1725884337271676&run=True) + the following code is generated: ``` diff --git a/guide/guide.html b/guide/guide.html index 565d941133..de70e89fea 100644 --- a/guide/guide.html +++ b/guide/guide.html @@ -2817,7 +2817,7 @@

4.4 Musical Modes

Note: The build-in modes in Music Blocks can be found in - musicutils.js.

diff --git a/header-icons/mic.svg b/header-icons/mic.svg new file mode 100644 index 0000000000..4970f47405 --- /dev/null +++ b/header-icons/mic.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/header-icons/playback.svg b/header-icons/playback.svg new file mode 100644 index 0000000000..992cf59bb6 --- /dev/null +++ b/header-icons/playback.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/header-icons/record.svg b/header-icons/record.svg new file mode 100644 index 0000000000..0b88904f03 --- /dev/null +++ b/header-icons/record.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 842479b7a1..ed687c5541 100644 --- a/index.html +++ b/index.html @@ -883,10 +883,10 @@
    • - - +