Print Heart Shape With Words Inside

How to draw heart with text in middle?

In order to get text to appear on the heart, you need to set the heart container as relative and the text inside of it as absolute as shown below.

I set the border of the :before and :after to give the heart a border.

The toggling of the fill uses functionality from YouMightNotNeedJQuery.com.

function toggleFill(heart, className) {    if (!hasClass(heart, className)) {    addClass(heart, className);  } else {    removeClass(heart, className);  }}
function addClass(el, className) { if (el.classList) { el.classList.add(className); } else { el.className += ' ' + className; }}
function removeClass(el, className) { if (el.classList) { el.classList.remove(className); } else { el.className = el.className.replace( new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); }}
function hasClass(el, className) { if (el.classList) { return el.classList.contains(className); } else { return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); }}
.unselectable {   -webkit-user-select: none;    -khtml-user-select: none;      -moz-user-select: none;       -ms-user-select: none;           user-select: none;}.filled:before,.filled:after {  background: red !important;}#wrapper {  width: 300px;  height: 180px;  background: #444;}.heart {  position: relative;  top: calc(50% - 45px);   /* 1/2 height of wrapper - 1/2 height of heart */  left: calc(50% - 50px);  /* 1/2 width of wrapper  - 1/2 width of heart */  width: 100px;  height: 90px;}.heart:before,.heart:after {  position: absolute;  content: "";  top: 0px;  width: 50px;  height: 80px;  background: inherit;  -moz-border-radius: 50px 50px 0 0;       border-radius: 50px 50px 0 0;}.heart:before {  left: 50px;  -webkit-transform: rotate(-45deg);     -moz-transform: rotate(-45deg);      -ms-transform: rotate(-45deg);       -o-transform: rotate(-45deg);          transform: rotate(-45deg);  -webkit-transform-origin: 0 100%;     -moz-transform-origin: 0 100%;      -ms-transform-origin: 0 100%;       -o-transform-origin: 0 100%;          transform-origin: 0 100%;    border-left: 2px solid red;  border-top: 2px solid red;  border-bottom: 1px solid red;}.heart:after {  left: 0px;  -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);      -ms-transform: rotate(45deg);       -o-transform: rotate(45deg);          transform: rotate(45deg);  -webkit-transform-origin: 100% 100%;     -moz-transform-origin: 100% 100%;      -ms-transform-origin: 100% 100%;       -o-transform-origin: 100% 100%;          transform-origin: 100% 100%;    border-right: 2px solid red;  border-top: 2px solid red;  border-bottom: 1px solid red;}.heart-text {  position: absolute;  top: 0;  left: calc(50px - 30px); /* 1/2 width of heart  - 1/2 width of text */  z-index: 100;  line-height: 66px;  text-align: center;  font-size: 24px;  font-weight: bold;  color: #FFF;}
<div id="wrapper">  <div class="heart" onclick="toggleFill(this, 'filled')">    <div class="heart-text unselectable">      Heart    </div>  </div></div>

C++: Printing ASCII Heart and Diamonds With Platform Independent

If you want a portable way, then you should use the Unicode code points (which have defined glyphs associated to them):

♠ U+2660 Black Spade Suit
♡ U+2661 White Heart Suit
♢ U+2662 White Diamond Suit
♣ U+2663 Black Club Suit
♤ U+2664 White Spade Suit
♥ U+2665 Black Heart Suit
♦ U+2666 Black Diamond Suit
♧ U+2667 White Club Suit

Remember that everything below character 32 in ASCII is a control character. They have a meaning associated with them and you don't have a guarantee of getting a glyph or a behavior there (even though most control characters to have glyphs, although they were never intended to be printable). Still, it's not a safe bet.

However, using Unicode needs proper font and encoding support which may or may not be a problem on UNIX-likes.

On Windows at least some of the above code points map to the ASCII control character glyphs you're outputting if the console is set to raster fonts (and therefore not supporting Unicode or anything else than the currently set OEM code page). This only applies to the black variants since the white ones have no equivalent.

Draw a heart in ASCII-art style based on user input

I solved the task with the following code:

import java.util.Scanner;

public class ChristmasHearts {
private int userInput;
private int height;
private int width;
String topHeart = "";
String middleHeart = "";
String bottomHeart = "";

public ChristmasHearts(int input) {
this.userInput = input;
}

public void draw() {
calcWidthAndHeight(this.userInput);
drawTopOfHeart();
drawBottomOfHeart();
}

private void drawTopOfHeart() {
int whites = 0;
int blacks = 1;
int center = 1;
int heightOfTopHeart = 1;
int isEvenCenterLessSubtractor = 2;
int isNotEvenCenterLessSubtractor = 1;

if (this.userInput == 1) {
for (int i = 0; i < heightOfTopHeart; i++) {
this.topHeart += "♥";
this.topHeart += "♡";
this.topHeart += "♥";
}
System.out.println(topHeart);
} else {
whites = this.userInput - 1;
blacks = this.userInput;
center = this.userInput;
heightOfTopHeart = this.userInput - 1;

for (int i = 0; i < heightOfTopHeart; i++) {
for (int j = 0; j < whites; j++) {
this.topHeart += "♡";
}

for (int j = 0; j < blacks; j++) {
this.topHeart += "♥";
}

for (int j = 0; j < center; j++) {
this.topHeart += "♡";
}

if (this.userInput >= 5 && center <= 0) {
if (isEven(this.userInput) && center == 0) {
for (int j = 0; j < blacks; j++) {
this.topHeart += "♥";
}
} else if (isEven(this.userInput) && center < 0) {
int rightSideBlacks = blacks - isEvenCenterLessSubtractor;

for (int j = 0; j < rightSideBlacks; j++) {
this.topHeart += "♥";
}
isEvenCenterLessSubtractor += 2;
} else if (!isEven(this.userInput) && center < 0) {
int rightSideBlacks = blacks - isNotEvenCenterLessSubtractor;

for (int j = 0; j < rightSideBlacks; j++) {
this.topHeart += "♥";
}
isNotEvenCenterLessSubtractor += 2;
} else {
int factorToSubtract = 2;
int rightSideBlacks = blacks - factorToSubtract;

for (int j = 0; j < rightSideBlacks; j++) {
this.topHeart += "♥";
}
factorToSubtract += 2;
}
} else {
for (int j = 0; j < blacks; j++) {
this.topHeart += "♥";
}
}

for (int j = 0; j < whites; j++) {
this.topHeart += "♡";
}

whites -= 1;
blacks += 2;
center -= 2;

if (this.userInput == 0) {
this.topHeart = "";
}
System.out.println(topHeart);
topHeart = "";
}
}
}

private void drawMiddelOfHeart() {
for (int j = 0; j < this.width; j++) {
this.middleHeart += "♥";
}

if (this.userInput == 0) {
this.middleHeart = "";
}

System.out.println(this.middleHeart);
middleHeart = "";
}

private void drawBottomOfHeart() {
int whites = 1;
int blacks = 1;
int heightOfBottomHeart = 1;

if (this.userInput == 1) {
for (int i = 0; i < heightOfBottomHeart; i++) {
this.bottomHeart += "♡";
this.bottomHeart += "♥";
this.bottomHeart += "♡";
}
System.out.println(bottomHeart);

} else {
heightOfBottomHeart = this.height - this.userInput;
whites = 1;
blacks = this.width - 2;

drawMiddelOfHeart();
for (int i = 0; i < heightOfBottomHeart; i++) {

for (int j = 0; j < whites; j++) {
this.bottomHeart += "♡";
}

for (int j = 0; j < blacks; j++) {
this.bottomHeart += "♥";
}

for (int j = 0; j < whites; j++) {
this.bottomHeart += "♡";
}

blacks -= 2;
whites += 1;

if (this.userInput == 0) {
this.bottomHeart = "";
}
System.out.println(bottomHeart);
bottomHeart = "";
}
}
}

private boolean isEven(int n) {
return n % 2 == 0;
}

private void calcWidthAndHeight(int n) {
this.width = 3;
this.height = 2;

for (int counter = 1; counter <= (n - 1); counter++) {
this.width += 5;

if (isEven(counter)) {
this.height += 4;
} else {
this.height += 3;
}
}
}

public static void main(String[] args) {
Scanner scanner = new Scanner(System.in);
int input = scanner.nextInt();

scanner.close();

ChristmasHearts heart = new ChristmasHearts(input);
heart.draw();
}
}

Bash script for printing Heart shape

Background:

Someone created a text file with the textual image of the heart; let's call the file heart.

Then they (likely) zipped the file with gzip, eg: gzip heart which generated the file heart.gz.

At this point if you ran the file through gunzip and dumped the results to stdout you'd get:

$ gunzip -c heart.gz
Love Love
LoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLove
LoveLoveLoveLove
LoveLoveLove
Love

You could also generate the same results by cating the heart.gz and then piping the output to gunzip, eg:

$ cat heart.gz | gunzip
Love Love
LoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLove
LoveLoveLoveLove
LoveLoveLove
Love

Current question:

Instead of uploading the heart.gz file and then requiring the download of said file, the originator (in essence) converted heart.gz to its equivalent string of hex codes. This eliminated the need to upload the heart.gz file.

Now, intead of running the file (heart.gz) through gunzip, the user can echo the hex string to stdout (basically generate the same output as cat heart.gz), which is then piped to gunzip, with the net result that the command you're asking about should generate the image in question:

$ echo '\x1f\x8b\x08\x00\x95\x10\xe0R\x02\xffSPP\xf0\xc9/KU\x80\x03\x10\x8f\x0bB\xa1c.l\x82dJ\xe0\xb0\x01\xe6\x02\x0cATa.T\xf7\x02\x00\xd9\x91g\x05\xc5\x00\x00\x00'|gunzip
Love Love
LoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLoveLove
LoveLoveLoveLoveLove
LoveLoveLoveLove
LoveLoveLove
Love

NOTE: echo may not work exactly right depending on your version of echo, so you may need to use echo -e (as per Cyrus comment) or replace echo with printf (as per that other guy's answer).

Draw heart symbol with drawString

You can try to use \u2665 instead of \u2661. Simply do:

g.setColor(Color.RED);
g.drawString("\u2665", 10, 10);

\u2665 is the unicode for heart shape. For reference:

♥ \u2665
♦ \u2666
♣ \u2663
♠ \u2660

Flutter drawing a heart shape with CustomPainter

Try this :

  class HeartWidget extends StatefulWidget {
@override
_HeartWidgetState createState() => _HeartWidgetState();
}

class _HeartWidgetState extends State<HeartWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Center(
child: CustomPaint(
size: Size(70, 80),
painter: HeartPainter(),
),
),
);
}
}

class HeartPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
Paint paint = Paint();
paint
..color = Colors.black
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = 6;

Paint paint1 = Paint();
paint1
..color = Colors.red
..style = PaintingStyle.fill
..strokeWidth = 0;

double width = size.width;
double height = size.height;

Path path = Path();
path.moveTo(0.5 * width, height * 0.35);
path.cubicTo(0.2 * width, height * 0.1, -0.25 * width, height * 0.6,
0.5 * width, height);
path.moveTo(0.5 * width, height * 0.35);
path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,
0.5 * width, height);

canvas.drawPath(path, paint1);
canvas.drawPath(path, paint);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}

enter image description here



Related Topics



Leave a reply



Submit