Skip to content
Snippets Groups Projects
Commit 9d3296cf authored by Neil Gershenfeld's avatar Neil Gershenfeld
Browse files

starting frep

parent f0073ba9
Branches
No related tags found
No related merge requests found
# Todo
- frep
- cut, copy, paste
- three-axis rough and finish cuts
- Cross-Origin Resource Sharing (CORS)
......
......@@ -53,6 +53,13 @@
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./modules/event/pause'>pause</a><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./modules/file/save'>save</a><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frep</i><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shapes</i><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2D</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./modules/frep/shapes/2D/rectangle%20corners'>rectangle corners</a><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3D</i><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./modules/frep/view/slice'>slice</a><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graph</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./modules/graph/bar'>bar</a><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image</i><br>
......@@ -219,5 +226,4 @@
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./test/test.png'>test.png</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./test/transparent.png'>transparent.png</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./test/wide.png'>wide.png</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./three.min.js'>three.min.js</a><br>
//
// frep rectangle corners
//
// Neil Gershenfeld
// (c) Massachusetts Institute of Technology 2017
//
// This work may be reproduced, modified, distributed, performed, and
// displayed for any purpose, but must acknowledge the mods
// project. Copyright is retained and must be preserved. The work is
// provided as is; no warranty is provided, and users accept all
// liability.
//
// closure
//
(function(){
//
// module globals
//
var mod = {}
//
// name
//
var name = 'frep rectangle corners'
//
// initialization
//
var init = function() {
mod.xmin.value = '-1'
mod.ymin.value = '-1'
mod.xmax.value = '1'
mod.ymax.value = '1'
}
//
// inputs
//
var inputs = {
variables:{type:'',
event:function(evt){
mod.xmin.value = evt.detail.xmin
mod.xmax.value = evt.detail.xmax
mod.ymin.value = evt.detail.ymin
mod.ymax.value = evt.detail.ymax
outputs.variables.event()
outputs.shape.event()
}}}
//
// outputs
//
var outputs = {
shape:{type:'',
event:function(){
var xmin = parseFloat(mod.xmin.value)
var xmax = parseFloat(mod.xmax.value)
var ymin = parseFloat(mod.ymin.value)
var ymax = parseFloat(mod.ymax.value)
var str = `Math.min(X-(${xmin}),(${xmax})-X)`
var variables = ['X','Y']
var limits = [[xmin,xmax],[ymin,ymax]]
var type = 'Magnitude'
var shape = {string:str,variables:variables,limits:limits,type:type}
mods.output(mod,'shape',shape)}
},
variables:{type:'',
event:function(){
var xmin = parseFloat(mod.xmin.value)
var xmax = parseFloat(mod.xmax.value)
var ymin = parseFloat(mod.ymin.value)
var ymax = parseFloat(mod.ymax.value)
var vars = {xmin:xmin,ymin:ymin,xmax:xmax,ymax:ymax}
mods.output(mod,'variables',vars)}
}}
//
// interface
//
var interface = function(div){
mod.div = div
//
// xmin
//
div.appendChild(document.createTextNode('xmin: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
div.appendChild(input)
mod.xmin = input
div.appendChild(document.createElement('br'))
//
// ymin
//
div.appendChild(document.createTextNode('ymin: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
div.appendChild(input)
mod.ymin = input
div.appendChild(document.createElement('br'))
//
// xmax
//
div.appendChild(document.createTextNode('xmax: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
div.appendChild(input)
mod.xmax = input
div.appendChild(document.createElement('br'))
//
// ymax
//
div.appendChild(document.createTextNode('ymax: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
div.appendChild(input)
mod.ymax = input
div.appendChild(document.createElement('br'))
//
// output button
//
var btn = document.createElement('button')
btn.style.padding = mods.ui.padding
btn.style.margin = 1
btn.appendChild(document.createTextNode('output'))
btn.addEventListener('click',function(){
outputs.variables.event()
outputs.shape.event()
})
div.appendChild(btn)
}
//
// local functions
//
;
//
// return values
//
return ({
name:name,
init:init,
inputs:inputs,
outputs:outputs,
interface:interface
})
}())
//
// frep view slice
//
// Neil Gershenfeld
// (c) Massachusetts Institute of Technology 2017
//
// This work may be reproduced, modified, distributed, performed, and
// displayed for any purpose, but must acknowledge the mods
// project. Copyright is retained and must be preserved. The work is
// provided as is; no warranty is provided, and users accept all
// liability.
//
// closure
//
(function(){
//
// module globals
//
var mod = {}
//
// name
//
var name = 'frep view slice'
//
// initialization
//
var init = function() {
mod.width.value = 1000
mod.z.value = 0
}
//
// inputs
//
var inputs = {
shape:{type:'frep',
event:function(evt){
view_slice(evt.detail)
}}}
//
// outputs
//
var outputs = {
image:{type:'RGBA',
event:function(){
mods.output(mod,'image',0)}
}}
//
// interface
//
var interface = function(div){
mod.div = div
//
// on-screen drawing canvas
//
var canvas = document.createElement('canvas')
canvas.width = mods.ui.canvas
canvas.height = mods.ui.canvas
canvas.style.backgroundColor = 'rgb(255,255,255)'
div.appendChild(canvas)
mod.canvas = canvas
div.appendChild(document.createElement('br'))
//
// off-screen image canvas
//
var canvas = document.createElement('canvas')
mod.img = canvas
//
// x
//
div.appendChild(document.createTextNode('x: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
input.addEventListener('input',function(){
mod.y.value = ''
mod.z.value = ''
})
div.appendChild(input)
mod.x = input
//
// y
//
div.appendChild(document.createTextNode(' y: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
input.addEventListener('input',function(){
mod.x.value = ''
mod.z.value = ''
})
div.appendChild(input)
mod.y = input
//
// z
//
div.appendChild(document.createTextNode(' z: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
input.addEventListener('input',function(){
mod.x.value = ''
mod.y.value = ''
})
div.appendChild(input)
mod.z = input
div.appendChild(document.createElement('br'))
//
// width
//
div.appendChild(document.createTextNode('width: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
input.addEventListener('input',function(){
mod.height.value = ''
})
div.appendChild(input)
mod.width = input
//
// height
//
div.appendChild(document.createTextNode(' height: '))
var input = document.createElement('input')
input.type = 'text'
input.size = 3
input.addEventListener('input',function(){
mod.width.value = ''
})
div.appendChild(input)
mod.height = input
div.appendChild(document.createElement('br'))
//
// view button
//
var btn = document.createElement('button')
btn.style.padding = mods.ui.padding
btn.style.margin = 1
btn.appendChild(document.createTextNode('view'))
btn.addEventListener('click',function(){
mod.win = window.open('')
mod.win.document.body.style.overflow = 'hidden'
mod.win.document.body.style.border = 0
mod.win.document.body.style.padding = 0
mod.win.document.body.style.margin = 0
mod.win.addEventListener('unload',function() {
mod.win = null
})
var canvas = document.createElement('canvas')
canvas.width = mod.img.width
canvas.height = mod.img.height
canvas.setAttribute('id',mod.div.id+'canvas')
mod.win.document.body.appendChild(canvas)
var ctx = canvas.getContext("2d")
ctx.drawImage(mod.img,0,0)
})
div.appendChild(btn)
}
//
// local functions
//
//
// view_slice
//
function view_slice(shape) {
var str = shape.string
var vars = shape.variables
var limits = shape.limits
var type = shape.type
var x = parseFloat(mod.x.value)
var y = parseFloat(mod.y.value)
var z = parseFloat(mod.z.value)
var w = parseInt(mod.width.value)
var h = parseInt(mod.height.value)
if (vars.length == 2) {
var xvar = vars[0]
var xlimits = limits[0]
var yvar = vars[1]
var ylimits = limits[1]
var zvar = 0
}
else if (!isNAN(x)) {
var xvar = vars[1]
var xlimits = limits[1]
var yvar = vars[2]
var ylimits = limits[2]
var zvar = x
}
else if (!isNAN(y)) {
var xvar = vars[0]
var xlimits = limits[0]
var yvar = vars[2]
var ylimits = limits[2]
var zvar = y
}
else if (!isNAN(z)) {
var xvar = vars[0]
var xlimits = limits[0]
var yvar = vars[1]
var ylimits = limits[1]
var zvar = z
}
if (!isNaN(w))
h = Math.floor(w*(ylimits[1]-ylimits[0])/(xlimits[1]-xlimits[0]))
else
w = Math.floor(h*(xlimits[1]-xlimits[0])/(ylimits[1]-ylimits[0]))
}
// image_function
//
function image_function() {
var blob = new Blob(['('+worker.toString()+'())'])
var url = window.URL.createObjectURL(blob)
var webworker = new Worker(url)
webworker.addEventListener('message',function(evt) {
window.URL.revokeObjectURL(url)
var h = mod.img.height
var w = mod.img.width
var buf = new Uint8ClampedArray(evt.data.buffer)
var imgdata = new ImageData(buf,w,h)
var ctx = mod.img.getContext("2d")
ctx.putImageData(imgdata,0,0)
if (w > h) {
var x0 = 0
var y0 = mod.canvas.height*.5*(1-h/w)
var wd = mod.canvas.width
var hd = mod.canvas.width*h/w
}
else {
var x0 = mod.canvas.width*.5*(1-w/h)
var y0 = 0
var wd = mod.canvas.height*w/h
var hd = mod.canvas.height
}
var ctx = mod.canvas.getContext("2d")
ctx.clearRect(0,0,mod.canvas.width,mod.canvas.height)
ctx.drawImage(mod.img,x0,y0,wd,hd)
if (mod.win != null) {
var canvas = mod.win.document.getElementById(mod.div.id+'canvas')
canvas.width = mod.img.width
canvas.height = mod.img.height
var ctx = canvas.getContext("2d")
ctx.clearRect(0,0,mod.img.width,mod.img.height)
ctx.drawImage(mod.img,0,0)
}
webworker.terminate()
outputs.image.event()
})
var ctx = mod.canvas.getContext("2d")
ctx.clearRect(0,0,mod.canvas.width,mod.canvas.height)
var ctx = mod.img.getContext("2d")
ctx.clearRect(0,0,mod.img.width,mod.img.height)
var img = ctx.getImageData(0,0,mod.img.width,mod.img.height)
webworker.postMessage({
height:img.height,width:img.width,
args:mod.input.arguments,func:mod.input.function,
buffer:img.data.buffer},
[img.data.buffer])
}
//
// worker
//
function image_worker() {
self.addEventListener('message',function(evt) {
var h = evt.data.height
var w = evt.data.width
var m = 255
var f = new Function(evt.data.args,evt.data.func)
var buf = new Uint8ClampedArray(evt.data.buffer)
var r,g,b,a,i
for (var row = 0; row < h; ++row) {
for (var col = 0; col < w; ++col) {
buf[(h-1-row)*w*4+col*4+0] = f(col,row,w,h,m)[0]
buf[(h-1-row)*w*4+col*4+1] = f(col,row,w,h,m)[1]
buf[(h-1-row)*w*4+col*4+2] = f(col,row,w,h,m)[2]
buf[(h-1-row)*w*4+col*4+3] = f(col,row,w,h,m)[3]
}
}
self.postMessage({buffer:buf.buffer},[buf.buffer])
})
}
//
// return values
//
return ({
name:name,
init:init,
inputs:inputs,
outputs:outputs,
interface:interface
})
}())
......@@ -36,6 +36,13 @@
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:handler('modules/event/pause')">pause</a><br>
<i>file</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:handler('modules/file/save')">save</a><br>
<i>frep</i><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shapes</i><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2D</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:handler('modules/frep/shapes/2D/rectangle%20corners')">rectangle corners</a><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3D</i><br>
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:handler('modules/frep/view/slice')">slice</a><br>
<i>graph</i><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:handler('modules/graph/bar')">bar</a><br>
<i>image</i><br>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment