Fixed issue with circle

This commit is contained in:
Devine Lu Linvega 2019-08-02 11:58:31 +09:00
parent 44954607d6
commit 9b5e9e9500
3 changed files with 43 additions and 53 deletions

View File

@ -60,6 +60,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
- `(svg x y d)` Returns a svg shape. - `(svg x y d)` Returns a svg shape.
- `(color r g b ~a)` Returns a color object. - `(color r g b ~a)` Returns a color object.
- `(offset a b)` Offsets pos a with pos b, returns a. - `(offset a b)` Offsets pos a with pos b, returns a.
- `(distance a b)` Get distance between positions.
- `(stroke shape color ~thickness)` Strokes a shape. - `(stroke shape color ~thickness)` Strokes a shape.
- `(fill ~rect)` Fills a shape. - `(fill ~rect)` Fills a shape.
- `(gradient line ~colors 'black'])` Defines a gradient color. - `(gradient line ~colors 'black'])` Defines a gradient color.
@ -85,7 +86,6 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
- `(multiply pixel q)` Change the color balance of pixels. - `(multiply pixel q)` Change the color balance of pixels.
- `(normalize pixel q)` Normalize the color of pixels with another color. - `(normalize pixel q)` Normalize the color of pixels with another color.
- `(lum color)` Return the luminance of a color. - `(lum color)` Return the luminance of a color.
- `(hue color)` Return the hue of a color.
- `(concat ...items)` Concat multiple strings. - `(concat ...items)` Concat multiple strings.
- `(split string char)` Split string at character. - `(split string char)` Split string at character.
- `(add ...args)` Adds values. - `(add ...args)` Adds values.
@ -95,15 +95,15 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
- `(mod a b)` Returns the modulo of a and b. - `(mod a b)` Returns the modulo of a and b.
- `(clamp val min max)` Clamps a value between min and max. - `(clamp val min max)` Clamps a value between min and max.
- `(step val step)` - `(step val step)`
- `(min ...values)` Returns lowest value. - `(min)` Returns lowest value.
- `(max ...values)` Returns highest value. - `(max)` Returns highest value.
- `(ceil val)` Rounds up to the nearest integer. - `(ceil)` Rounds up to the nearest integer.
- `(floor val)` Rounds down to the nearest integer. - `(floor)` Rounds down to the nearest integer.
- `(round val)` Rounds to the nearest integer - `(round)` Rounds to the nearest integer
- `(sin val)` - `(sin)`
- `(cos val)` - `(cos)`
- `(log val)` - `(log)`
- `(pow a b)` Calculates a^b. - `(pow)`
- `(sqrt)` Calculate the square root. - `(sqrt)` Calculate the square root.
- `(sq a)` Calculate the square. - `(sq a)` Calculate the square.
- `(PI)` - `(PI)`

View File

@ -71,11 +71,11 @@ function Library (ronin) {
} }
this.circle = (cx, cy, r) => { // Returns a circle shape. this.circle = (cx, cy, r) => { // Returns a circle shape.
return { x: cx - r, y: cy - r, cx, cy, r } return { cx, cy, r }
} }
this.ellipse = (cx, cy, rx, ry) => { // Returns a ellipse shape. this.ellipse = (cx, cy, rx, ry) => { // Returns a ellipse shape.
return { x: cx - r, y: cy - r, cx, cy, rx, ry } return { cx, cy, rx, ry }
} }
this.line = (ax, ay, bx, by) => { // Returns a line shape. this.line = (ax, ay, bx, by) => { // Returns a line shape.
@ -105,6 +105,10 @@ function Library (ronin) {
return a return a
} }
this.distance = (a, b) => { // Get distance between positions.
return Math.sqrt(((ax - bx) * (ax - bx)) + ((ay - by) * (ay - by)))
}
// Actions // Actions
this.stroke = (shape, color, thickness = 2) => { // Strokes a shape. this.stroke = (shape, color, thickness = 2) => { // Strokes a shape.
@ -234,7 +238,7 @@ function Library (ronin) {
} }
this.saturation = (pixel, q) => { // Change the saturation of pixels. this.saturation = (pixel, q) => { // Change the saturation of pixels.
const color = 0.2126 * pixel[0] + 0.7152 * pixel[1] + 0.0722 * pixel[2] const color = this.lum(pixel)
return [(color * (1 - q)) + (pixel[0] * q), (color * (1 - q)) + (pixel[1] * q), (color * (1 - q)) + (pixel[2] * q), pixel[3]] return [(color * (1 - q)) + (pixel[0] * q), (color * (1 - q)) + (pixel[1] * q), (color * (1 - q)) + (pixel[2] * q), pixel[3]]
} }
@ -268,21 +272,13 @@ function Library (ronin) {
return 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2] return 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2]
} }
this.hue = (color) => { // Return the hue of a color.
const min = this.min(color.f[0], color.f[1], color.f[2])
const max = this.max(color.f[0], color.f[1], color.f[2])
if (min === max) { return 0 }
const hue = max == color.f[0] ? (color.f[1] - color.f[2]) / (max - min) : max == color.f[1] ? 2.0 + (color.f[2] - color.f[0]) / (max - min) : 4.0 + (color.f[0] - color.f[1]) / (max - min)
return this.round(hue < 0 ? hue * 60 + 360 : hue * 60)
}
// Strings // Strings
this.concat = function (...items) { // Concat multiple strings. this.concat = (...items) => { // Concat multiple strings.
return items.reduce((acc, item) => { return `${acc}${item}` }, '') return items.reduce((acc, item) => { return `${acc}${item}` }, '')
} }
this.split = function (string, char) { // Split string at character. this.split = (string, char) => { // Split string at character.
return string.split(char) return string.split(char)
} }
@ -316,41 +312,23 @@ function Library (ronin) {
return this.round(val / step) * step return this.round(val / step) * step
} }
this.min = (...values) => { // Returns lowest value. this.min = Math.min // Returns lowest value.
return Math.min(values)
}
this.max = (...values) => { // Returns highest value. this.max = Math.max // Returns highest value.
return Math.max(values)
}
this.ceil = (val) => { // Rounds up to the nearest integer. this.ceil = Math.ceil // Rounds up to the nearest integer.
return Math.ceil
}
this.floor = (val) => { // Rounds down to the nearest integer. this.floor = Math.floor // Rounds down to the nearest integer.
return Math.floor(val)
}
this.round = (val) => { // Rounds to the nearest integer this.round = Math.round // Rounds to the nearest integer
return Math.round(val)
}
this.sin = (val) => { this.sin = Math.sin
return Math.sin(val)
}
this.cos = (val) => { this.cos = Math.cos
return Math.cos(val)
}
this.log = (val) => { this.log = Math.log
return Math.log(val)
}
this.pow = (a, b) => { // Calculates a^b. this.pow = Math.pow
return Math.pow(a, b)
}
this.sqrt = Math.sqrt // Calculate the square root. this.sqrt = Math.sqrt // Calculate the square root.

View File

@ -90,6 +90,8 @@ function Surface (ronin) {
} }
if (isLine(shape)) { if (isLine(shape)) {
this.traceLine(shape, context) this.traceLine(shape, context)
} else if (isPoly(shape)) {
this.tracePoly(shape, context)
} }
if (isCircle(shape)) { if (isCircle(shape)) {
this.traceCircle(shape, context) this.traceCircle(shape, context)
@ -111,7 +113,14 @@ function Surface (ronin) {
} }
this.traceLine = function (line, context) { this.traceLine = function (line, context) {
const positions = Object.values(line) console.log(line)
context.moveTo(line.a.x, line.a.y)
context.lineTo(line.b.x, line.b.y)
}
this.tracePoly = function (poly, context) {
console.log('poly?')
const positions = Object.values(poly)
const origin = positions.shift() const origin = positions.shift()
context.moveTo(origin.x, origin.y) context.moveTo(origin.x, origin.y)
for (pos of positions) { for (pos of positions) {
@ -197,6 +206,7 @@ function Surface (ronin) {
} }
this.drawGuide = function (shape, color = 'white', context = this.guide) { this.drawGuide = function (shape, color = 'white', context = this.guide) {
console.log(shape)
if (!shape) { return } if (!shape) { return }
this.stroke(shape.rect || shape, 'black', 4, context) this.stroke(shape.rect || shape, 'black', 4, context)
if (shape.pos) { this.stroke(shape.pos, 'black', 4, context) } if (shape.pos) { this.stroke(shape.pos, 'black', 4, context) }
@ -323,8 +333,10 @@ function Surface (ronin) {
return shape && !isNaN(shape.x) && !isNaN(shape.y) && shape.p && shape.t && shape.f && shape.a return shape && !isNaN(shape.x) && !isNaN(shape.y) && shape.p && shape.t && shape.f && shape.a
} }
function isLine (shape) { function isLine (shape) {
const positions = Object.values(shape) return shape.a && shape.b && !isNaN(shape.a.x) && !isNaN(shape.a.y) && !isNaN(shape.b.x) && !isNaN(shape.b.y)
return positions[0] && positions[1] && !isNaN(positions[0].x) && !isNaN(positions[0].y) && !isNaN(positions[1].x) && !isNaN(positions[1].y) }
function isPoly (shape) {
return shape[0] && shape[1] && !isNaN(shape[0].x) && !isNaN(shape[0].y) && !isNaN(shape[1].x) && !isNaN(shape[1].y)
} }
function fitRect (image, container) { function fitRect (image, container) {