Get some basic collage functions working: forms excluding embedded elements, rect is known to work.
This commit is contained in:
parent
f7f137f553
commit
212543f51a
6 changed files with 76 additions and 47 deletions
|
@ -2,7 +2,9 @@
|
||||||
-- These structures are purely geometric forms, no colors or styles.
|
-- These structures are purely geometric forms, no colors or styles.
|
||||||
-- Could be the basis of some cool geometry stuff :)
|
-- Could be the basis of some cool geometry stuff :)
|
||||||
|
|
||||||
module Geometry where
|
module Graphics.Geometry where
|
||||||
|
|
||||||
|
import List
|
||||||
|
|
||||||
type Path = [(Float,Float)]
|
type Path = [(Float,Float)]
|
||||||
|
|
||||||
|
@ -17,12 +19,12 @@ rect w h = [ (0-w/2,0-h/2), (0-w/2,h/2), (w/2,h/2), (w/2,0-h/2) ]
|
||||||
|
|
||||||
oval w h =
|
oval w h =
|
||||||
let n = 50
|
let n = 50
|
||||||
f i = (w/2 * cos (2*pi/n * i), h/2 * sin (2*pi/n * i))
|
f i = (w/2 * Math.cos (2*Math.pi/n * i), h/2 * Math.sin (2*Math.pi/n * i))
|
||||||
in map f [0..n-1]
|
in map f [0..n-1]
|
||||||
|
|
||||||
circle r = oval (2*r) (2*r)
|
circle r = oval (2*r) (2*r)
|
||||||
|
|
||||||
ngon n r =
|
ngon n r =
|
||||||
let m = toFloat n
|
let m = toFloat n
|
||||||
f i = ( r * cos (2*pi/m * i), r * sin (2*pi/m * i))
|
f i = ( r * Math.cos (2*Math.pi/m * i), r * Math.sin (2*Math.pi/m * i))
|
||||||
in map f [0..n-1]
|
in map f [0..n-1]
|
||||||
|
|
|
@ -17,10 +17,10 @@ type LineStyle = {
|
||||||
}
|
}
|
||||||
|
|
||||||
default = {
|
default = {
|
||||||
color = black,
|
color = Color.black,
|
||||||
width = 1,
|
width = 1,
|
||||||
cap = Butt,
|
cap = Butt,
|
||||||
join = Miter,
|
join = Sharp,
|
||||||
dashing = [],
|
dashing = [],
|
||||||
dashOffset = 0,
|
dashOffset = 0,
|
||||||
miterLimit = 10
|
miterLimit = 10
|
||||||
|
|
19
libraries/Native/Graphics/Collage.js
Normal file
19
libraries/Native/Graphics/Collage.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
|
||||||
|
Elm.Native.Graphics.Collage = function(elm) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
elm.Native = elm.Native || {};
|
||||||
|
elm.Native.Graphics = elm.Native.Graphics || {};
|
||||||
|
if (elm.Native.Graphics.Collage) return elm.Native.Graphics.Collage;
|
||||||
|
|
||||||
|
var newElement = Elm.Graphics.Element(elm).newElement;
|
||||||
|
var render = ElmRuntime.use(ElmRuntime.Render.Collage).render;
|
||||||
|
|
||||||
|
function collage(w,h,forms) {
|
||||||
|
return A3(newElement, w, h,
|
||||||
|
{ctor: 'Custom', render: render,
|
||||||
|
model: {w:w, h:h, forms:forms} });
|
||||||
|
}
|
||||||
|
return elm.Native.Graphics.Collage = { collage:F3(collage) };
|
||||||
|
|
||||||
|
};
|
|
@ -35,7 +35,7 @@ Elm.Native.Graphics.Matrix = function(elm) {
|
||||||
|
|
||||||
return elm.Native.Graphics.Matrix = {
|
return elm.Native.Graphics.Matrix = {
|
||||||
identity:identity,
|
identity:identity,
|
||||||
rotation:F2(rotation),
|
rotate:F2(rotate),
|
||||||
scale:F3(scale),
|
scale:F3(scale),
|
||||||
move:F3(move),
|
move:F3(move),
|
||||||
matrix:F7(matrix)
|
matrix:F7(matrix)
|
||||||
|
|
|
@ -42,8 +42,21 @@ Elm.init = function(module, baseNode) {
|
||||||
// object. This permits many Elm programs to be embedded per document.
|
// object. This permits many Elm programs to be embedded per document.
|
||||||
var elm = {notify: notify, node: baseNode, id: ElmRuntime.guid(), inputs: inputs};
|
var elm = {notify: notify, node: baseNode, id: ElmRuntime.guid(), inputs: inputs};
|
||||||
|
|
||||||
// If graphics are enabled, set up the `main` value in baseNode.
|
// Set up methods to communicate with Elm program from JS.
|
||||||
if (baseNode !== null) {
|
function send(name, value) {
|
||||||
|
var e = document.createEvent('Event');
|
||||||
|
e.initEvent(name + '_' + elm.id, true, true);
|
||||||
|
e.value = value;
|
||||||
|
document.dispatchEvent(e);
|
||||||
|
}
|
||||||
|
function recv(name, handler) {
|
||||||
|
document.addEventListener(name + '_' + elm.id, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If graphics are not enabled, escape early, skip over setting up DOM stuff.
|
||||||
|
if (baseNode === null) return { send : send, recv : recv };
|
||||||
|
|
||||||
|
|
||||||
var Render = ElmRuntime.use(ElmRuntime.Render.Element);
|
var Render = ElmRuntime.use(ElmRuntime.Render.Element);
|
||||||
|
|
||||||
// evaluate the given module and extract its 'main' value.
|
// evaluate the given module and extract its 'main' value.
|
||||||
|
@ -76,17 +89,6 @@ Elm.init = function(module, baseNode) {
|
||||||
}
|
}
|
||||||
|
|
||||||
signalGraph = A2(Signal.lift, domUpdate, signalGraph);
|
signalGraph = A2(Signal.lift, domUpdate, signalGraph);
|
||||||
}
|
|
||||||
|
|
||||||
function send(name, value) {
|
|
||||||
var e = document.createEvent('Event');
|
|
||||||
e.initEvent(name + '_' + elm.id, true, true);
|
|
||||||
e.value = value;
|
|
||||||
document.dispatchEvent(e);
|
|
||||||
}
|
|
||||||
function recv(name, handler) {
|
|
||||||
document.addEventListener(name + '_' + elm.id, handler);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { send : send, recv : recv };
|
return { send : send, recv : recv };
|
||||||
};
|
};
|
||||||
|
|
|
@ -10,6 +10,7 @@ var newElement = Utils.newElement, addTo = Utils.addTo,
|
||||||
|
|
||||||
function trace(ctx, path) {
|
function trace(ctx, path) {
|
||||||
var points = fromList(path);
|
var points = fromList(path);
|
||||||
|
console.log(points);
|
||||||
var i = points.length - 1;
|
var i = points.length - 1;
|
||||||
if (i <= 0) return;
|
if (i <= 0) return;
|
||||||
ctx.moveTo(points[i]._0, points[i]._1);
|
ctx.moveTo(points[i]._0, points[i]._1);
|
||||||
|
@ -88,6 +89,7 @@ function gradient(ctx, grad) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawShape(redo, ctx, style, path) {
|
function drawShape(redo, ctx, style, path) {
|
||||||
|
console.log(style, path);
|
||||||
trace(ctx, path);
|
trace(ctx, path);
|
||||||
var sty = style.ctor;
|
var sty = style.ctor;
|
||||||
ctx.fillStyle =
|
ctx.fillStyle =
|
||||||
|
@ -110,6 +112,7 @@ function renderForm(redo,ctx,form) {
|
||||||
ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
|
ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
var f = form.form;
|
var f = form.form;
|
||||||
|
console.log(f);
|
||||||
switch(f.ctor) {
|
switch(f.ctor) {
|
||||||
case 'FPath' : drawLine(ctx, f._0, f._1); break;
|
case 'FPath' : drawLine(ctx, f._0, f._1); break;
|
||||||
case 'FShape':
|
case 'FShape':
|
||||||
|
@ -123,9 +126,10 @@ function renderForm(redo,ctx,form) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderForms(redo, ctx, forms) {
|
function renderForms(redo, ctx, forms) {
|
||||||
forms = fromList(forms);
|
var fs = fromList(forms);
|
||||||
for (var i = forms.length; i--; ) {
|
console.log(fs);
|
||||||
renderForm(redo,ctx,forms[i]);
|
for (var i = fs.length; i--; ) {
|
||||||
|
renderForm(redo,ctx,fs[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -138,10 +142,11 @@ function collageForms(w,h,forms) {
|
||||||
canvas.style.display = "block";
|
canvas.style.display = "block";
|
||||||
canvas.width = w;
|
canvas.width = w;
|
||||||
canvas.height = h;
|
canvas.height = h;
|
||||||
|
function redo() { renderForms(this,ctx,forms); }
|
||||||
if (canvas.getContext) {
|
if (canvas.getContext) {
|
||||||
var ctx = canvas.getContext('2d');
|
var ctx = canvas.getContext('2d');
|
||||||
function redo() { renderForms(this,ctx,w,h,forms); }
|
console.log(forms);
|
||||||
renderForms(redo,ctx,w,h,forms);
|
renderForms(redo,ctx,forms);
|
||||||
return canvas;
|
return canvas;
|
||||||
}
|
}
|
||||||
canvas.innerHTML = "Your browser does not support canvas.";
|
canvas.innerHTML = "Your browser does not support canvas.";
|
||||||
|
@ -162,6 +167,7 @@ function collageElement(w, h, m, elem) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function render(model) {
|
function render(model) {
|
||||||
|
console.log(model);
|
||||||
return collageForms(model.w, model.h, model.forms);
|
return collageForms(model.w, model.h, model.forms);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue