Skip to content

Commit

Permalink
Merge pull request #38 from ccrma/dev
Browse files Browse the repository at this point in the history
WebChucK IDE 2.1.4
  • Loading branch information
terryzfeng authored Oct 31, 2024
2 parents 6c9a965 + c087fff commit 8c6c7c0
Show file tree
Hide file tree
Showing 51 changed files with 877 additions and 299 deletions.
3 changes: 1 addition & 2 deletions cdn/webchuck.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@ button {
justify-content: space-around;
align-items: center;
background-color: bisque;
/* padding: 0.5rem .6rem 0.5rem 1rem; */
padding: 0.5rem;
height: 2.5rem;
width: 5rem;
}

Expand Down
90 changes: 65 additions & 25 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -192,13 +192,16 @@
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1 1 4 4 4-4"/>
</svg>
</button>
<div id="helpDropdown" class="hidden dropdown w-48">
<div id="helpDropdown" class="hidden dropdown w-52">
<ul class="py-2 text-base text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
<li>
<a href="https://chuck.stanford.edu/doc/reference" target="_blank" class="dropdownItem">ChucK Reference</a>
<a href="https://chuck.stanford.edu/doc/reference" target="_blank" class="dropdownItem">ChucK API Reference</a>
</li>
<li>
<a href="https://chuck.stanford.edu/doc" target="_blank" class="dropdownItem">Documentation</a>
<a href="https://chuck.stanford.edu/webchuck/" target="_blank" class="dropdownItem">Learn WebChucK</a>
</li>
<li>
<a href="https://discord.gg/ENr3nurrx8" target="_blank" class="dropdownItem">Discord Community</a>
</li>

<li class="divider dark:border-t-gray-400" data-content="GITHUB"></li>
Expand All @@ -209,13 +212,11 @@
<a href="https://github.com/ccrma/webchuck-ide/issues/new" target="_blank" class="dropdownItem">Report an Issue</a>
</li>

<li class="divider dark:border-t-gray-400" data-content="LINKS"></li>
<li class="divider dark:border-t-gray-400" data-content="ABOUT"></li>
<li>
<a href="https://chuck.stanford.edu/webchuck" target="_blank" class="dropdownItem">Learn WebChucK</a>
</li>
<li>
<a href="https://discord.gg/ENr3nurrx8" target="_blank" class="dropdownItem">Discord Community</a>
<button id="about-ide" class="dropdownItem">About IDE...</button>
</li>

</ul>
</div>
</div>
Expand Down Expand Up @@ -283,7 +284,7 @@
<!-- Left -->
<div id="app-left">
<div id="fileExplorerPanel" class="h-full flex flex-col justify-start">
<div id="fileExplorerHeader" class="header h-8 justify-start flex-none border-b border-dark-d drop-shadow-sm font-bold overflow-hidden whitespace-nowrap">
<div id="fileExplorerHeader" class="header h-8 justify-start flex-none border-b border-dark-d dark:border-dark-a drop-shadow-sm font-bold overflow-hidden whitespace-nowrap">
<div class="px-2">File Explorer</div>
</div>
<div id="fileExplorerContainer">
Expand Down Expand Up @@ -325,20 +326,44 @@
<!-- Input Panel -->
<div id="inputPanel" class="flex flex-col dark:bg-dark">
<div id="inputPanelHeader" class="header h-7 justify-start flex-none drop-shadow-sm">
<button id="GUITab" type="button" class="header-item">GUI</button>
<button id="HIDTab" type="button" class="header-item">HID</button>
<button id="GUITab" type="button" class="header-item flex items-center justify-center relative">
GUI
<span id="GUIPing" class="animate-ping absolute top-0 right-0 h-2 w-2 rounded-full bg-orange opacity-75 hidden"></span>
</button>
<button id="HIDTab" type="button" class="header-item flex items-center justify-center relative">
HID
<span id="HIDPing" class="animate-ping absolute top-0 right-0 h-2 w-2 rounded-full bg-orange opacity-75 hidden"></span>
</button>
<button id="SensorTab" type="button" class="header-item flex items-center justify-center relative">
SENSOR
<span id="SensorPing" class="animate-ping absolute top-0 right-0 h-2 w-2 rounded-full bg-orange opacity-75 hidden"></span>
</button>
</div>
<div id="GUIContainer" class="dark:bg-dark-2 w-full h-full">
<div id="GUIPanel" class="w-full h-full relative overflow-hidden">
</div>
</div>
<div id="HIDContainer" class="relative dark:bg-dark-2 w-full h-full overflow-auto md:overflow-hidden">
<div id="HIDPanel" class="absolute w-full h-full">
<div id="HIDPanel" class="absolute w-full h-full p-2">
<button id="mouseHIDButton" class="toggle-button w-32" disabled>Mouse: Off</button>
<button id="keyboardHIDButton" class="toggle-button w-32" disabled>Keyboard: Off</button>
<div id="hidLog" class="opacity-50 text-sm"></div>
<div id="hidLog" class="log-container opacity-50 text-sm"></div>
</div>
</div>
<div id="SensorContainer" class="relative dark:bg-dark-2 w-full h-full overflow-auto md:overflow-hidden">
<div id="SensorPanel" class="absolute w-full h-full p-2 pt-1">
<div class="pb-2 font-bold text-md">Mobile Only</div>
<div class="flex flex-wrap pb-1">
<button id="gyroButton" class="toggle-button w-32 mr-2" disabled>Gryo: Off</button>
<div id="gyroLog" class="log-container sensorLog opacity-50 text-sm"></div>
</div>
<div class="flex flex-wrap pb-1">
<button id="accelButton" class="toggle-button w-32 mr-2" disabled>Accel: Off</button>
<div id="accelLog" class="log-container sensorLog opacity-50 text-sm"></div>
</div>
</div>
</div>

</div>
</div>

Expand All @@ -349,7 +374,7 @@
<!-- VM Monitor -->
<div id="vmMonitor" class="relative">
<table id="shredTable" class="w-full table-auto absolute text-left overflow-auto">
<thead class="h-8 align-middle font-medium border-b border-dark-d drop-shadow-sm">
<thead class="h-8 align-middle font-medium border-b border-dark-d dark:border-dark-a drop-shadow-sm">
<tr>
<th scope="col">Shred</th>
<th scope="col">Code</th>
Expand All @@ -368,10 +393,13 @@
<button id="consoleTab" type="button" class="header-item text-orange underline transition">CONSOLE</button>
<button id="visualizerTab" type="button" class="header-item text-dark-5">VISUALIZER</button>
</div>
<div id="consoleContainer" style="height: calc(100% - 1.75rem)">
<div id="consoleContainer" style="height: calc(100% - 1.75rem)" class="border-b border-sky-blue dark:border-dark-4">
<div id="console" class="bg-white dark:bg-dark-2 h-full"></div>
</div>
<div id="visualizerContainer" class="flex-1 bg-white dark:bg-dark-2 hidden">
<div id="visualizer-help" class="w-full h-full flex items-center justify-center text-[#666] dark:text-[#bbb] transition">
<b>Start WebChucK for visualizer</b>
</div>
<canvas id="visualizer" class="w-full h-full"></canvas>
</div>
</div>
Expand Down Expand Up @@ -450,16 +478,28 @@ <h1 class="text-xl font-medium pb-2">Settings</h1>
<dialog class="modal" id="export-webchuck-modal">
<form class="flex flex-col gap-2 py-2" method="dialog">
<h1 class="text-xl font-medium pb-2">Export to WebChucK</h1>
<label class="form-label">Title</label>
<input id="export-title" class="border px-2 py-1 rounded-md" type="text" placeholder="Hello Sine">
<label class="form-label">
Author
</label>
<input id="export-author" class="border px-2 py-1 rounded-md" type="text" placeholder="Terry Feng">
<label class="flex flex-col">
Description
</label>
<textarea id="export-description" class="border px-2 py-1 h-20 rounded-md" placeholder="A very cool sine wave!"></textarea>

<div>
<label class="form-label">Title</label>
<input id="export-title" class="form-input" type="text" placeholder="Hello Sine">
</div>

<div>
<label class="form-label">Author</label>
<input id="export-author" class="form-input" type="text" placeholder="Terry Feng">
</div>

<div>
<label class="form-label">Description</label>
<textarea id="export-description" class="form-input" placeholder="A very cool sine wave!"></textarea>
</div>

<div>
<label class="form-label pr-2">Main File</label>
<select id="export-wc-file-select" class="border px-1 py-1 rounded-md focus:outline-none disabled:opacity-50">
</select>
</div>

<div class="flex gap-4 justify-end pt-4">
<button id="export-cancel-btn" type="button" class="button secondary">Cancel</button>
<button id="export-btn" type="submit" class="button primary">Export</button>
Expand Down
47 changes: 24 additions & 23 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
"version": "2.1.3",
"type": "module",
"scripts": {
"clean": "rm -rf dist",
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint --ext .js,.ts src",
"lint": "eslint --fix --ext .js,.ts src",
"format": "prettier --write src"
},
"devDependencies": {
Expand Down
64 changes: 64 additions & 0 deletions public/examples/accelDemo.ck
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
//------------------------------------------------------------------------------
// name: accelDemo.ck
// desc: Accel-erometer WebChucK Demo (mobile only)
// SHAKE! mobile accelerometer to control sound synthesis
// note: enable accelerometer in sensor settings
//
// Accel WebChucK Docs:
// https://chuck.stanford.edu/webchuck/docs/classes/Accel.html
//
// author: Mike Mulshine
//------------------------------------------------------------------------------

Accel ac;
AccelMsg msg;

0 => int device;

// open accel
if( !ac.openAccel( device ) ) me.exit();
<<< "accel '" + ac.name() + "' ready", "" >>>;

<<< "only on mobile" >>>;

SinOsc osc => Envelope gain => dac;
Noise noise => LPF filter => gain;

100 => float rootOscFreq;
rootOscFreq => osc.freq;

500 => float rootFilterFreq;
rootFilterFreq => filter.freq;

0.5 => filter.gain;

10::ms => gain.duration;
1.0 => gain.target;

// infinite event loop
while( true )
{
// wait on accel event
ac => now;

// get one or more messages
while( ac.recv( msg ) )
{
// print accel values
<<< msg.getAccelX() + " " + msg.getAccelY() + " " + msg.getAccelZ() >>>;
// compute average acceleration
(Math.fabs(msg.getAccelX()) +
Math.fabs(msg.getAccelY()) +
Math.fabs(msg.getAccelZ())) * 0.3333 => float avgAccel;

// control synthesis/filter freq
avgAccel * 10.0 => float dFreq;
rootOscFreq + dFreq => osc.freq;
rootFilterFreq + dFreq * 2.0 => filter.freq;
// control gain
avgAccel / 150.0 => float newGain;
newGain => gain.target;
}

10::ms => now;
}
Loading

0 comments on commit 8c6c7c0

Please sign in to comment.