Basic Information

This page allows you to edit the existing project (シンセサイザ). The edited project will replace the existing entry in the IoT Projects page. If you want to add a new entry based on the project, please fork from it instead.

* Photo URLs that end with any one of .jpg, .jpeg, .png or that are uploaded to the Gyazo web service in the PNG format (e.g.https://gyazo.com/hogehoge) are supported.

* Node.js entry point main: index.js and dependencies to the npm module dependencies: { f3js: (略) } will be automatically added and thus do not need to be in this form.

Card preview
'16/9/8 2:21

Private Project

This project is already public and cannot be made private.

Source Code

Provide the source code of a microcontroller or tiny computer in JavaScript. Node.js-based computers are supported. Require f3js package and use its API to design the device enclosure.

var f3js = require("f3js") , x = 15 , y = 15 , width = 225 , height = 115 , dw = 7 , dh = 2 ; var p = f3js.createPath(); p.moveTo(x, y); p.dovetailTo(x + width, y, dw, dh); p.dovetailTo(x + width, y + height, dw, dh); p.dovetailTo(x, y + height, dw, dh); p.dovetailTo(x, y, dw, dh); p.close(); p.fill = false; var ps = p.extrude(45); ps[0].x = x + width + 50; ps[0].y = y + dh; ps[0].rotation = 90; ps[1].x = x + width + 160; ps[1].y = y + height + 10; ps[1].rotation = 90; ps[2].x = x + width + 105; ps[2].y = y + dh; ps[2].rotation = 90; ps[3].x = x + width + 160; ps[3].y = y + dh; ps[3].rotation = 90; ps[4].x = 0; ps[4].y = height + 5; for (var i = 0; i < ps.length; i ++) { f3js.add(ps[i]); } var GroveSensor = require("jsupm_grove"); //レーザーカッターの調子が悪く彫る動作ができなかったので //ボタンの機能名を彫るのはなしにした //音量 var volume = new GroveSensor.GroveRotary(0); f3js.add(volume, { x: x + 38, y: y + 35 }); f3js.drawRectangle(x + 18, y + 30, 4, 10); //f3js.drawText("VOLUME", x + 15, y + 53); //モニタ操作ボタン var enter = new GroveSensor.GroveButton(0); //f3js.add(enter, { x: x + 82, y: y + 25 }); // NOTE: Changed to using layout manager. f3js.drawRectangle(x + 63, y + 20, 4, 10); //f3js.drawText("ENTER", x + 83, y + 43); var exit = new GroveSensor.GroveButton(0); //f3js.add(exit, { x: x + 82, y: y + 55 }); // NOTE: Changed to using layout manager. f3js.drawRectangle(x + 63, y + 50, 4, 10); //f3js.drawText("EXIT", x + 84, y + 88); var up = new GroveSensor.GroveButton(0); //f3js.add(up, { x: x + 196, y: y + 25 }); // NOTE: Changed to using layout manager. f3js.drawRectangle(x + 211, y + 20, 4, 10); //f3js.drawText("UP", x + 214, y + 43); var down = new GroveSensor.GroveButton(0); //f3js.add(down, { x: x + 196, y: y + 55 }); // NOTE: Changed to using layout manager. f3js.drawRectangle(x + 211, y + 50, 4, 10); //f3js.drawText("DOWN", x + 208, y + 88); var westButtonLayout = f3js.drawLine(x + 82, y + 25, x + 82, y + 55); westButtonLayout.layout = "distribute"; f3js.add(enter, westButtonLayout); f3js.add(exit, westButtonLayout); var eastButtonLayout = f3js.drawLine(x + 196, y + 25, x + 196, y + 55); eastButtonLayout.layout = "distribute"; f3js.add(up, eastButtonLayout); f3js.add(down, eastButtonLayout); //音形変化エンコーダ var rotaryEncoder = require("jsupm_rotaryencoder"); var attack = new rotaryEncoder.RotaryEncoder(2, 3); //f3js.add(attack, { x: x + 88, y: y + 90 }); // NOTE: Changed to using layout manager. //f3js.drawRectangle(x + 215, y + 105, 10, 4); //f3js.drawText("ATTACK", x + 66, y + 135); var decay = new rotaryEncoder.RotaryEncoder(2, 3); //f3js.add(decay, { x: x + 123, y: y + 90}); // NOTE: Changed to using layout manager. //f3js.drawRectangle(x + 175, y + 105, 10, 4); //f3js.drawText("DECAY", x + 113, y + 135); var sustain = new rotaryEncoder.RotaryEncoder(2, 3); //f3js.add(sustain, { x: x + 158, y: y + 90}); // NOTE: Changed to using layout manager. //f3js.drawRectangle(x + 135, y + 105, 10, 4); //f3js.drawText("SUSTAIN", x + 151, y + 135); var release = new rotaryEncoder.RotaryEncoder(2, 3); //f3js.add(release, { x: x + 193, y: y + 90}); // NOTE: Changed to using layout manager. //f3js.drawRectangle(x + 95, y + 105, 10, 4); //f3js.drawText("RELEASE", x + 198, y + 135); var rotaryEncoderLayout = f3js.drawLine(x + 88, y + 90, x + 193, y + 90); rotaryEncoderLayout.layout = "distribute"; f3js.add(attack, rotaryEncoderLayout); f3js.add(decay, rotaryEncoderLayout); f3js.add(sustain, rotaryEncoderLayout); f3js.add(release, rotaryEncoderLayout); //ピッチベンダ(ジョイスティック) var joystick = require("jsupm_joystick12"); var pitchbender = new joystick.Joystick12(0, 1); f3js.add(pitchbender, { x: x + 38, y: y + 85 }); f3js.drawRectangle(x + 8, y + 80, 4, 10); //f3js.drawText("PITCH", x + 26, y + 128); //LCDモニタ var LCD = require("jsupm_i2clcd"); var lcd = new LCD.Jhd1313m1(6,0x3E,0x62); f3js.add(lcd, { x: x + 141, y: y + 45 }); //f3js.drawRectangle(x + 100, y + 55, 4, 10); //USB等差し込み口 f3js.drawRectangle( x + width + 160 - 11 - 4 , y + 10 , 12 , height - dh * 2 - 10); //底面四隅穴 f3js.drawCircle(x + 10, y + height + 5 + 10, 1.5); f3js.drawCircle(x + 10, y + height*2 + 5 - 10, 1.5); f3js.drawCircle(x + width - 10, y + height + 5 + 10, 1.5); f3js.drawCircle(x + width - 10, y + height*2 + 5 - 10, 1.5); //マイコン取り付け穴 マイコンも便宜上モジュールとして一覧に入れておいた方が //いいのでは? //f3js.drawCircle(x + 5, y + height + 5 + 20, 1);マイコンにおける(0,0)位置 f3js.drawCircle(x + 5 + 16, y + height + 5 + 20 + 12, 1.5); f3js.drawCircle(x + 5 + 16.5, y + height + 5 + 20 + 60, 1.5); f3js.drawCircle(x + 5 + 68, y + height + 5 + 20 + 17, 1.5); f3js.drawCircle(x + 5 + 68, y + height + 5 + 20 + 45, 1.5); f3js.drawCircle(x + 5 + 116, y + height + 5 + 20 + 13, 1.5); f3js.drawCircle(x + 5 + 116, y + height + 5 + 20 + 65.8, 1.5);
Customization

This content does not allow any customization.

Layout view options
Adding comments to variable declarations in the source code populate various GUI widgets in the "Customization" section depending on their types.

Design Alternatives

Modules

No modules are required for this project.

Layout
Program

Login first to use this feature.