I am plotting an array of CGFloat values within a UIBezierPath. Now I want to Normalise the values so the max value of the array will occupy the whole height.
So far
let scaleFactor = (waveView.frame.height) * readFile.maxValue
for point in readFile.points {
let nextPoint = CGPoint(x: soundPath.currentPoint.x + sampleSpace, y: middleY - (point * scaleFactor) - 1.0)
soundPath.addLine(to: nextPoint)
soundPath.move(to: nextPoint)
}
But it does not seem to work...
EDIT
ReadFile:
class ReadFile {
public enum ReadFileError:Error{
case errorReading(String)
}
/* Player Interval Measured in Miliseconds (By now..) */
var beginPosition:Int32 = 0
var endPosition:Int32 = 0
/* Sample Rate -> Default 48KHz */
var sampleRate:Double = 48000
var samplesSeconds:CGFloat = 5
var maxValue:CGFloat = 0
var points:[CGFloat] = []
}
And
sampleSpace = 0.2
Thank you Andy for your answer but I have finally figured it out.
I am drawing a sound wave so it has positives and negatives values.
heightMax = waveView.frame.height/2
Applying a rule of three (Spanish translation) I end up with this:
func drawSoundWave(windowLength:Int32){
// Drawing code
print("\(logClassName): Drawing!!!")
print("\(logClassName): points COUNT = \(readFile.points.count)")
let soundPath = UIBezierPath()
soundPath.lineWidth = lineWidth
soundPath.move(to: CGPoint(x:0.0 , y: middleY))
print("\(logClassName) max ")
for point in readFile.points{
let normalizedHeight:CGFloat = (waveView.frame.height * point) / (2 * readFile.maxValue)
let nextPoint = CGPoint(x: soundPath.currentPoint.x + sampleSpace, y: middleY - (normalizedHeight))
soundPath.addLine(to: nextPoint)
soundPath.move(to: nextPoint)
}
let trackLayer = CAShapeLayer()
trackLayer.path = soundPath.cgPath
waveView.layer.addSublayer(trackLayer)
trackLayer.strokeColor = UIColor.red.cgColor
trackLayer.lineWidth = lineWidth
trackLayer.fillColor = UIColor.green.cgColor
trackLayer.lineCap = kCALineCapRound
}
where
let normalizedHeight:CGFloat = (waveView.frame.height * point) / (2 * readFile.maxValue)
is the normalize value given a readFile.maxValue and waveView.frame.height
Related
I am new to SpriteKit, and I am trying to create a distorted circle that acts like "amoeba". What I am trying to do is to use SKShapeNode initialised with with UIBezierPath created over 8-10 points on a circle with some randomness (something like):
let theta : Double = (Double(i) * Double.pi / 180.0) * (36.0 + Double.random(in: -1...1))
let radius : CGFloat = CGFloat(100.0 + Double.random(in: 0...20))
let a = CGFloat(cos(theta)) * radius
let b = CGFloat(sin(theta)) * radius
This part works, but then, I am starting to build the path using addCurve() method and the shapes come out really ugly - probably because I don't fully understand how the method works and what should I use for control points.
Appreciate if you have any better ideas or help me with using addCurve() in a better way.
Here is what I've done - posting as it might be useful to someone, parameters could be tweaked to your liking.
let path = UIBezierPath()
let numPoints = Int.random(in: 5...25)
let totalPoints = numPoints * 3
var pt : [CGPoint] = Array(repeating: CGPoint(), count: totalPoints)
var coef = 1.0
for i : Int in 0..<(totalPoints) {
let theta = (Double(i) * Double.pi / 180.0) * (360.0/Double(totalPoints) + Double.random(in: -1.0...1.0))
coef = (i % 3 == 2 ? 1 : 0.25)
let radius = CGFloat(100.0 * coef + Double.random(in: 0...20))
let a = CGFloat(cos(theta)) * radius
let b = CGFloat(sin(theta)) * radius
pt[i] = CGPoint(x: a, y: b)
// the code snippet below is to show the curve and critical points
let point : SKShapeNode = SKShapeNode(circleOfRadius: 5)
point.fillColor = i % 3 == 0 ? .green : .cyan
point.position = pt[i]
point.zPosition = 10
self.addChild(point)
// end of code snippet
}
path.move(to: CGPoint(x: self.view!.bounds.minX + pt[0].x, y: self.view!.bounds.minY + pt[0].y))
for i in 1...numPoints{
path.addCurve(to: pt[(i * 3) % (totalPoints)],
controlPoint1: pt[(i * 3 - 1)],
controlPoint2: pt[(i * 3 - 2)])
}
path.close()
let amoeba = SKShapeNode(path: path.cgPath)
amoeba.strokeColor = .orange
self.addChild(amoeba)
I'm creating multiple nodes automatically and I want to arrange them around me, because at the moment I'm just increasing of 0.1 the current X location.
capsuleNode.geometry?.firstMaterial?.diffuse.contents = imageView
capsuleNode.position = SCNVector3(self.counterX, self.counterY, self.counterZ)
capsuleNode.name = topic.name
self.sceneLocationView.scene.rootNode.addChildNode(capsuleNode)
self.counterX += 0.1
So the question is, how can I have all of them around me instead of just in one line?
Did someone of you have some math function for this? Thank you!
Use this code (macOS version) to test it:
import SceneKit
class GameViewController: NSViewController {
override func viewDidLoad() {
super.viewDidLoad()
let scene = SCNScene()
let scnView = self.view as! SCNView
scnView.scene = scene
scnView.allowsCameraControl = true
scnView.backgroundColor = NSColor.black
for i in 1...12 { // HERE ARE 12 SPHERES
let sphereNode = SCNNode(geometry: SCNSphere(radius: 1))
sphereNode.position = SCNVector3(0, 0, 0)
// ROTATE ABOUT THIS OFFSET PIVOT POINT
sphereNode.simdPivot.columns.3.x = 5
sphereNode.geometry?.firstMaterial?.diffuse.contents = NSColor(calibratedHue: CGFloat(i)/12,
saturation: 1,
brightness: 1,
alpha: 1)
// ROTATE ABOUT Y AXIS (STEP is 30 DEGREES EXPRESSED IN RADIANS)
sphereNode.rotation = SCNVector4(0, 1, 0, (-CGFloat.pi * CGFloat(i))/6)
scene.rootNode.addChildNode(sphereNode)
}
}
}
P.S. Here's a code for creating 90 spheres:
for i in 1...90 {
let sphereNode = SCNNode(geometry: SCNSphere(radius: 0.1))
sphereNode.position = SCNVector3(0, 0, 0)
sphereNode.simdPivot.columns.3.x = 5
sphereNode.geometry?.firstMaterial?.diffuse.contents = NSColor(calibratedHue: CGFloat(i)/90, saturation: 1, brightness: 1, alpha: 1)
sphereNode.rotation = SCNVector4(0, 1, 0, (-CGFloat.pi * (CGFloat(i))/6)/7.5)
scene.rootNode.addChildNode(sphereNode)
}
You need some math here
How I prepare the circle nodes
var nodes = [SCNNode]()
for i in 1...20 {
let node = createSphereNode(withRadius: 0.05, color: .yellow)
nodes.append(node)
node.position = SCNVector3(0,0,-1 * 1 / i)
scene.rootNode.addChildNode(node)
}
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
self.arrangeNode(nodes: nodes)
}
func createSphereNode(withRadius radius: CGFloat, color: UIColor) -> SCNNode {
let geometry = SCNSphere(radius: radius)
geometry.firstMaterial?.diffuse.contents = color
let sphereNode = SCNNode(geometry: geometry)
return sphereNode
}
Math behind arrange the view into circle
func arrangeNode(nodes:[SCNNode]) {
let radius:CGFloat = 1;
let angleStep = 2.0 * CGFloat.pi / CGFloat(nodes.count)
var count:Int = 0
for node in nodes {
let xPos:CGFloat = CGFloat(self.sceneView.pointOfView?.position.x ?? 0) + CGFloat(cosf(Float(angleStep) * Float(count))) * (radius - 0)
let zPos:CGFloat = CGFloat(self.sceneView.pointOfView?.position.z ?? 0) + CGFloat(sinf(Float(angleStep) * Float(count))) * (radius - 0)
node.position = SCNVector3(xPos, 0, zPos)
count = count + 1
}
}
Note: In third image I have set.
let xPos:CGFloat = -1 + CGFloat(cosf(Float(angleStep) * Float(count))) * (radius - 0)
let zPos:CGFloat = -1 + CGFloat(sinf(Float(angleStep) * Float(count))) * (radius - 0)
That means if you need view around the camera then
use CGFloat(self.sceneView.pointOfView?.position.x ?? 0) or at the random place then provide the value
Output
I'm working on a project in which i need to implement the pie chart like above. I need to add a space between the slices as picture attached. Need to have a space in slices with arc and values with percentage.
I've tried to implement it but i couldn't succeed. I use get arc shapes wrong.
Please help me. Thanks.
import UIKit
private extension CGFloat {
/// Formats the CGFloat to a maximum of 1 decimal place.
var formattedToOneDecimalPlace : String {
let formatter = NumberFormatter()
formatter.numberStyle = .decimal
formatter.minimumFractionDigits = 0
formatter.maximumFractionDigits = 1
return formatter.string(from: NSNumber(value: self.native)) ?? "\(self)"
}
}
/// Defines a segment of the pie chart
struct Segment {
/// The color of the segment
var color : UIColor
/// The name of the segment
var name : String
/// The value of the segment
var value : CGFloat
}
class PieChartView: UIView {
/// An array of structs representing the segments of the pie chart
var segments = [Segment]() {
didSet { setNeedsDisplay() } // re-draw view when the values get set
}
/// Defines whether the segment labels should be shown when drawing the pie chart
var showSegmentLabels = true {
didSet { setNeedsDisplay() }
}
/// Defines whether the segment labels will show the value of the segment in brackets
var showSegmentValueInLabel = false {
didSet { setNeedsDisplay() }
}
/// The font to be used on the segment labels
var segmentLabelFont = UIFont.systemFont(ofSize: 14) {
didSet {
textAttributes[NSAttributedStringKey.font] = segmentLabelFont
setNeedsDisplay()
}
}
private let paragraphStyle : NSParagraphStyle = {
var p = NSMutableParagraphStyle()
p.alignment = .center
return p.copy() as! NSParagraphStyle
}()
private lazy var textAttributes : [NSAttributedStringKey : Any] = {
return [NSAttributedStringKey.paragraphStyle : self.paragraphStyle, NSAttributedStringKey.font : self.segmentLabelFont]
}()
override init(frame: CGRect) {
super.init(frame: frame)
isOpaque = false // when overriding drawRect, you must specify this to maintain transparency.
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func draw(_ rect: CGRect) {
// get current context
let ctx = UIGraphicsGetCurrentContext()
// radius is the half the frame's width or height (whichever is smallest)
let radius = min(frame.width, frame.height) * 0.5
// center of the view
let viewCenter = CGPoint(x: bounds.size.width * 0.5, y: bounds.size.height * 0.5)
// enumerate the total value of the segments by using reduce to sum them
let valueCount = segments.reduce(0, {($0 + $1.value)})
// the starting angle is -90 degrees (top of the circle, as the context is flipped). By default, 0 is the right hand side of the circle, with the positive angle being in an anti-clockwise direction (same as a unit circle in maths).
var startAngle = -CGFloat.pi * 0.5
// loop through the values array
for segment in segments {
// set fill color to the segment color
ctx?.setFillColor(segment.color.cgColor)
// update the end angle of the segment
let endAngle = startAngle + .pi * 2 * (segment.value / valueCount)
// move to the center of the pie chart
ctx?.move(to: viewCenter)
// add arc from the center for each segment (anticlockwise is specified for the arc, but as the view flips the context, it will produce a clockwise arc)
ctx?.addArc(center: viewCenter, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
// fill segment
ctx?.fillPath()
// ctx?.setStrokeColor(UIColor.white.cgColor)
// ctx?.strokePath()
if showSegmentLabels { // do text rendering
// get the angle midpoint
let halfAngle = startAngle + (endAngle - startAngle) * 0.5;
// the ratio of how far away from the center of the pie chart the text will appear
let textPositionValue : CGFloat = 0.65
// get the 'center' of the segment. It's slightly biased to the outer edge, as it's wider.
let segmentCenter = CGPoint(x: viewCenter.x + radius * textPositionValue * cos(halfAngle), y: viewCenter.y + radius * textPositionValue * sin(halfAngle))
// text to render – the segment value is formatted to 1dp if needed to be displayed.
// Previous
//let textToRender = showSegmentValueInLabel ? "\(segment.name) \(segment.value.formattedToOneDecimalPlace))" : segment.name
// Change
let textToRender = showSegmentValueInLabel ? "\(segment.value.formattedToOneDecimalPlace)%" : segment.name
// get the color components of the segement color
guard let colorComponents = segment.color.cgColor.components else { return }
// get the average brightness of the color
let averageRGB = (colorComponents[0] + colorComponents[1] + colorComponents[2]) / 3
// if too light, use black. If too dark, use white
textAttributes[NSAttributedStringKey.foregroundColor] = (averageRGB > 0.7) ? UIColor.black : UIColor.white
// the bounds that the text will occupy
var renderRect = CGRect(origin: .zero, size: textToRender.size(withAttributes: textAttributes))
// center the origin of the rect
renderRect.origin = CGPoint(x: segmentCenter.x - renderRect.size.width * 0.5, y: segmentCenter.y - renderRect.size.height * 0.5)
// draw text in the rect, with the given attributes
textToRender.draw(in: renderRect, withAttributes: textAttributes)
}
// update starting angle of the next segment to the ending angle of this segment
startAngle = endAngle
}
}
}
In your draw(_:), implement this.
override func draw(_ rect: CGRect) {
let anglePI2 = (CGFloat.pi * 2)
let center = CGPoint.init(x: bounds.size.width / 2, y: bounds.size.height / 2)
let radius = min(bounds.size.width, bounds.size.height) / 2;
let lineWidth: CGFloat = 1;
let ctx = UIGraphicsGetCurrentContext()
ctx?.setLineWidth(lineWidth)
var currentAngle: CGFloat = 0
var totalValue: CGFloat = segments.reduce(0) { $0 + $1.value }
if totalValue <= 0 {
totalValue = 1
}
let iRange = 0 ..< segments.count
for i in iRange {
let segment = segments[i]
// calculate percent
let percent = segment.value / totalValue
let angle = anglePI2 * percent
ctx?.beginPath()
ctx?.move(to: center)
ctx?.addArc(center: center, radius: radius - lineWidth, startAngle: currentAngle, endAngle: currentAngle + angle, clockwise: false)
ctx?.closePath()
ctx?.setFillColor(segment.color.cgColor)
ctx?.fillPath()
ctx?.beginPath()
ctx?.move(to: center)
ctx?.addArc(center: center, radius: radius - (lineWidth / 2), startAngle: currentAngle, endAngle: currentAngle + angle, clockwise: false)
ctx?.closePath()
ctx?.setStrokeColor(UIColor.white.cgColor)
ctx?.strokePath()
currentAngle += angle
}
}
Explanation
- Calculate pi equivalent to 360 deg.
- Calculate center.
- Calculate radius of the blocks.
- Calculate totalValue of [Segment]. This is used when calculating the percent of the slice in the circle.
- Loop through segment, calculate percentage of the current segment, make arc for filling (radius - lineWidth), remake arc for stroking path(radius - lineWidth / 2).
Here is the result
In my view controller, I added the data (For your info). Like this
scv.segments = [
Segment.init(color: UIColor.init(red: 0xfe/0xff, green: 0x4a/0xff, blue: 0x49/0xff, alpha: 1), value: 20),
Segment.init(color: UIColor.init(red: 0x2a/0xff, green: 0xb7/0xff, blue: 0xca/0xff, alpha: 1), value: 15),
Segment.init(color: UIColor.init(red: 0xfe/0xff, green: 0xd7/0xff, blue: 0x66/0xff, alpha: 1), value: 15),
Segment.init(color: UIColor.init(red: 0x4a/0xff, green: 0x4e/0xff, blue: 0x4d/0xff, alpha: 1), value: 50)
]
Updated
Here is a complete code for your question and additional requirement as requested.
struct Segment {
// the color of a given segment
var color: UIColor
// the value of a given segment – will be used to automatically calculate a ratio
var value: CGFloat
}
class SliceView: UIView {
/// An array of structs representing the segments of the pie chart
var segments = [Segment]() {
didSet {
totalValue = segments.reduce(0) { $0 + $1.value }
setupLabels()
setNeedsDisplay() // re-draw view when the values get set
layoutLabels();
}
}
private var totalValue: CGFloat = 1;
private var labels: [UILabel] = []
override init(frame: CGRect) {
super.init(frame: frame)
isOpaque = false // when overriding drawRect, you must specify this to maintain transparency.
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func draw(_ rect: CGRect) {
let anglePI2 = (CGFloat.pi * 2)
let center = CGPoint.init(x: bounds.size.width / 2, y: bounds.size.height / 2)
let radius = min(bounds.size.width, bounds.size.height) / 2;
let lineWidth: CGFloat = 1;
let ctx = UIGraphicsGetCurrentContext()
ctx?.setLineWidth(lineWidth)
var currentAngle: CGFloat = 0
if totalValue <= 0 {
totalValue = 1
}
let iRange = 0 ..< segments.count
for i in iRange {
let segment = segments[i]
// calculate percent
let percent = segment.value / totalValue
let angle = anglePI2 * percent
ctx?.beginPath()
ctx?.move(to: center)
ctx?.addArc(center: center, radius: radius - lineWidth, startAngle: currentAngle, endAngle: currentAngle + angle, clockwise: false)
ctx?.closePath()
ctx?.setFillColor(segment.color.cgColor)
ctx?.fillPath()
ctx?.beginPath()
ctx?.move(to: center)
ctx?.addArc(center: center, radius: radius - (lineWidth / 2), startAngle: currentAngle, endAngle: currentAngle + angle, clockwise: false)
ctx?.closePath()
ctx?.setStrokeColor(UIColor.white.cgColor)
ctx?.strokePath()
currentAngle += angle
}
}
override func layoutSubviews() {
super.layoutSubviews()
self.layoutLabels()
}
private func setupLabels() {
var diff = segments.count - labels.count;
if diff >= 0 {
for _ in 0 ..< diff {
let lbl = UILabel()
self.addSubview(lbl)
labels.append(lbl)
}
} else { // diff < 0 (minus values)
// loop until diff is 0
//
while diff != 0 {
var lbl: UILabel!
// if there is no more labels to remove
// break the loop
if labels.count <= 0 {
break;
}
// get the last label
lbl = labels.removeLast()
if lbl.superview != nil {
lbl.removeFromSuperview()
}
// increment the minus value by 1
diff += 1;
}
}
for i in 0 ..< segments.count {
let lbl = labels[i]
lbl.textColor = UIColor.white
// Change here for your text display
// I currently display percent of each pies
lbl.text = String.init(format: "%0.1f", segments[i].value)
lbl.font = UIFont.init(name: "ArialRoundedMT-Bold", size: 12)
}
}
func layoutLabels() {
let anglePI2 = CGFloat.pi * 2
let center = CGPoint.init(x: bounds.size.width / 2, y: bounds.size.height / 2)
let radius = min(bounds.size.width / 2, bounds.size.height / 2) / 2
var currentAngle: CGFloat = 0;
let iRange = 0 ..< labels.count
for i in iRange {
let lbl = labels[i]
let percent = segments[i].value / totalValue
let intervalAngle = anglePI2 * percent;
lbl.frame = .zero;
lbl.sizeToFit()
let x = center.x + radius * cos(currentAngle + (intervalAngle / 2))
let y = center.y + radius * sin(currentAngle + (intervalAngle / 2))
lbl.center = CGPoint.init(x: x, y: y)
currentAngle += intervalAngle
}
}
}
The result is
I am trying to add 20 nodes at random locations on the screen without any of the nodes overlapping. Ive got the adding of the nodes at random locations part but I sill get some that overlap. What I have done so far is: I would be greatful for a point in the right dirrection.
while i < 20 {
let bubbleSize = self.frame.width / 12
let bubble = SKShapeNode(circleOfRadius: bubbleSize)
let widthL = -self.frame.size.width / 2 + bubble.frame.size.width / 2
let widthH = self.frame.size.width / 2 - bubble.frame.size.width / 2
let heightL = -self.frame.size.height / 2 + bubble.frame.size.height/ 2
let heightH = self.frame.size.height / 2 - bubble.frame.size.height / 2
var randWidth = randomNumber(range: widthL..<widthH)
var randHeight = randomNumber(range: heightL..<heightH)
bubble.fillColor = SKColor.cyan
bubble.position = CGPoint(x: randWidth, y: randHeight)
self.addChild(bubble)
}
func randomNumber(range: Range<CGFloat>) -> CGFloat {
//function that gives a random number of a range of CGFloats entered
let min = range.lowerBound
let max = range.upperBound
return CGFloat(arc4random_uniform(UInt32(CGFloat(max - min)))) + min
}
This should get you started. It essentially divides the screen into a grid and places the bubbles in grid locations while ensuring no other bubble is at that position. there is lots more you could do with this, like add slight random placement to the location (random generate some small offsets -2 to +2 for x and y values so that they don't look so perfectly placed).
let bubbleSize = self.frame.width / 12
let minX = 0 - self.frame.size.width / 2
let maxX = self.frame.size.width / 2
let minY = 0 - self.frame.size.height/ 2
let maxY = self.frame.size.height/ 2
var usedIndexes: [Int]!
let xRange = maxX * 2
let yRange = maxY * 2
let cols = xRange / bubbleSize
let rows = yRange / bubbleSize
func createBubbles(count: Int) {
for _ in 0..<count {
createBubble()
}
}
func createBubble() {
let index = findSlot()
let posX = index % cols
let posY = index / cols
let bubble = SKShapeNode(circleOfRadius: bubbleSize)
bubble.fillColor = SKColor.cyan
bubble.position = CGPoint(x: posX, y: posY)
self.addChild(bubble)
}
func findSlot() -> Int {
//preventative measure to stop endless loop from happening
guard usedIndexes.count > rows * cols else { return 0 }
let randomX = randomNumber(range: 0..<cols)
let randomY = randomNumber(range: 0..<rows)
let index = randomX + randomY * cols
if usedIndexes.contains(index) {
return findSlot()
}
else {
usedIndexes.append(index)
}
return index
}
I'm using swift and I got that function.
func spawnTwo() -> SKSpriteNode {
let two = SKSpriteNode(imageNamed: "landPic1")
two.anchorPoint = CGPoint(x: 0.5, y: 0.5)
two.name = "Obs"
two.zPosition = 5;
two.anchorPoint = CGPoint(x: 0.5 , y: 0.5);
two.position.x = 0
two.position.y = 0
self.scene?.addChild(two)
return two
}
now I want, that every time I call that function, 1280 are added the position.x. How do I do that?
Simply keep a variable outside of the function:
var n = 0
func spawnTwo() -> SKSpriteNode {
//...
}
In the function, you multiply 1280 by n and increment n:
let two = SKSpriteNode(imageNamed: "landPic1")
two.anchorPoint = CGPoint(x: 0.5, y: 0.5)
two.name = "\(n)bs" // you might want to change the name each time too
two.zPosition = 5;
two.anchorPoint = CGPoint(x: 0.5 , y: 0.5);
two.position.x = 1280 * n
two.position.y = 0
self.scene?.addChild(two)
n += 1
return two