how to draw a cute heart

I like the eye shape institute in Wolfram here : https://mathworld.wolfram.com/HeartCurve.html

It'south the one with the equation below and is the lower right case of their drove of heart shapes on that page.

x = 16sin^3t
y = 13cost-5cos(2t)-2cos(3t)-cos(4t).

In searching, I noticed there aren't a lot of examples on the web for drawing this verbal shape, and I do have a unique solution written in Swift that tin be used to go that verbal middle shape. I will show you lot how to do information technology where the outline of the center is traced with a 2 pixel line width. This solution uses a UIImage created specifically to hold the paradigm. I initialize that prototype to have a articulate groundwork so information technology can overlay onto whatever other content. Since I just trace the border, the within is transparent. If you want it filled (non transparent), then instead of stroking the path, fill it instead.

I volition share code that uses variables to ascertain the eye of the eye, the calibration, and desired X and Y offsets to motion the eye shape around in the UIImage. Suggest yous starting time off with at least a 200 x 200 sized UIImage, and so examine the image in the Xcode debugger to encounter if the size you desire is centered well, and with a skilful scale. Tweak the variables as desired to get the size heart you desire.

As an aside, consider stuffing the UIImage produced into a UIImageView for animating.

First, get a blank UIImage. I declare mine outside whatsoever func, and so I tin apply it easy.

          var myHeartUIImage = UIImage()                  

Inside of viewDidLoad I initialize that image to have a clear background, and give it a size. All my variables are tailored to brand the eye wait good in a 50 10 50 frame.

                      // Commencement get a non cipher image, so I just put a clear background within and it is non nil anymore.     myHeartUIImage = UIImage(color: .clear, size: CGSize(width: l, tiptop: 50))!      // Now depict the heart on superlative of the articulate backbround     myHeartUIImage = createAHeartTrace(startingImage: myHeartUIImage)                  

Here is the code for createAHeartTrace. It uses 360 points on the middle border to describe with. Which is fine for my use and calibration. If you are displaying a large heart on a very high res device like an iPad Pro, you might bump up the drawing points to 1000 or more. Notation that the moveToPoint provides the first point, so the loop just goes ane...359 to get 360 points total.

          public func createAHeartTrace(startingImage: UIImage) -> UIImage {     // Create a context of the starting image size and set up it as the current one     UIGraphicsBeginImageContext(startingImage.size)      let centeringValueForX : CGFloat = 9     let centeringValueForY : CGFloat = -24      allow centerPointXYValue : CGFloat = 60.0     allow scaleFactorHere : CGFloat = 1.85      var pointOnHeart = getPointOnHeartShape(thisAngle: 0, thisCenter: CGPoint(x: centerPointXYValue, y: centerPointXYValue), thisScaleFactor: scaleFactorHere)      // Get the current context     let context = UIGraphicsGetCurrentContext()!      context.setLineWidth(ii.0)     context.setStrokeColor(UIColor.white.cgColor)     context.move(to: CGPoint(x: pointOnHeart.x - centeringValueForX, y: pointOnHeart.y + centeringValueForY))      for angle in 1...359 {          pointOnHeart = getPointOnHeartShape(thisAngle: CGFloat(angle), thisCenter: CGPoint(x: centerPointXYValue, y: centerPointXYValue), thisScaleFactor: scaleFactorHere)          context.addLine(to: CGPoint(10: pointOnHeart.ten - centeringValueForX, y: pointOnHeart.y + centeringValueForY))     }      context.strokePath()      // Save the context as a new UIImage     var myImage = UIGraphicsGetImageFromCurrentImageContext()     UIGraphicsEndImageContext()      // Return modified epitome     return myImage!  }// ends createAHeartTrace                  

Note that createAHeartTrace calls func getPointOnHeartShape a total of 360 times. Here is getPointOnHeartShape :

          public func getPointOnHeartShape(thisAngle : CGFloat, thisCenter: CGPoint, thisScaleFactor: CGFloat) -> CGPoint {     var tempAngle : CGFloat     tempAngle = thisAngle.degreesToRadians      let cubedTerm = sin(tempAngle) * sin(tempAngle) * sin(tempAngle)      allow pointX : CGFloat = thisCenter.x + thisScaleFactor * 16.0 * cubedTerm      allow pointY : CGFloat = thisCenter.y + thisScaleFactor * (-13*(cos(tempAngle)) + v*(cos(2*tempAngle)) + 2*(cos(3*tempAngle)) + 1*(cos(4*tempAngle)))      let returnPoint = CGPoint(10: pointX, y: pointY)      return returnPoint  } // ends getPointOnHeartShape                  

And y'all will likely demand the extension to convert degrees to radians.

          extension FloatingPoint  {     var degreesToRadians: Self { return cocky * .pi / 180 } }                  

Every bit bonus lawmaking forth these same lines, if you would similar to describe a 5 indicate star (with the same crisp shape every bit on the Usa flag) the below func works well. Again, there are scaling and showtime to tweak as desired, and the cartoon is a trace of the border with a transparent eye area. The rest of the design is exactly the same. Create a non nil UIImage to agree the cartoon, then depict into it with createAFivePointStar. Choose your stroke color equally desired.

          public func createAFivePointStar(startingImage: UIImage) -> UIImage {     let drawingScaleFactor : CGFloat = 0.11      // Create a context of the starting epitome size and set information technology as the current one     UIGraphicsBeginImageContext(startingImage.size)      // Get the current context     let context = UIGraphicsGetCurrentContext()!      let centeringValueForX : CGFloat = 25     let centeringValueForY : CGFloat = xvi      context.setLineWidth(4.0)     context.setStrokeColor(UIColor.white.cgColor)     context.move(to: CGPoint(ten: 694 * drawingScaleFactor - centeringValueForX, y: 106 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 750 * drawingScaleFactor - centeringValueForX, y: 267 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 920 * drawingScaleFactor - centeringValueForX, y: 267 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 789 * drawingScaleFactor - centeringValueForX, y: 372 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 835 * drawingScaleFactor - centeringValueForX, y: 530 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 694 * drawingScaleFactor - centeringValueForX, y: 438 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 553 * drawingScaleFactor - centeringValueForX, y: 530 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 599 * drawingScaleFactor - centeringValueForX, y: 372 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(x: 468 * drawingScaleFactor - centeringValueForX, y: 267 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(10: 637 * drawingScaleFactor - centeringValueForX, y: 267 * drawingScaleFactor + centeringValueForY))     context.addLine(to: CGPoint(ten: 694 * drawingScaleFactor - centeringValueForX, y: 106 * drawingScaleFactor + centeringValueForY))     context.strokePath()      // Salvage the context every bit a new UIImage     var myImage = UIGraphicsGetImageFromCurrentImageContext()     UIGraphicsEndImageContext()      // Return modified image     return myImage!  } // ends createAFivePointStar                  

Source: https://stackoverflow.com/questions/29227858/how-to-draw-heart-shape-in-uiview-ios

Posted by: garrendoperelpland.blogspot.com

Share this post