New answers tagged graphical-output
5
TI-Basic, 328 bytes
AxesOff:ZInteger:GridOn
99→Xscl:2→Yscl:1→U:1→V
Pt-Change(0,0
Line(Xmin,0,Xmin,9
Line(Xmax,0,Xmax,9
While 1
If 30≤abs(Y
-V→V
Pt-Change(X,Y
If X≥46:Then
If Y≥E and Y≤E+9:Then
-U→U
Else
A+1→1:X-90→X
End
End
If X≤-46:Then
If Y≥D and Y≤D+5:Then
-U→U
Else
B+1→B:X+90→X
End
End
If 9<max(A,B
Stop
X+U→X:Y+V→Y
Pt-Change(X,Y
Text(1,43,A,":&...
1
JavaScript, HTML, 111 bytes
'red1#fa01#ff01#0f01#00f1#808'.split`1`.map(e=>document.write(`<div style=background:${e};height:9px;></div>`))
A few tips in the comments helped to shorten the code.
3
K (oK) + iKe, 393 335 bytes
q:p:-15+h%2
d:w,h
b:-2+d%2
v:5 -1
s:t:0
tick:{b::v+0|d&b
$[$[0>*b;t+::1;w<*b;s+::1;0];b::-2+d%2;0]
v*::$[(&/(b>(0;p-5))&b<(10;p+30))|&/(b>(w-15;q-5))&b<(w;q+30);-1;1],1}
draw:{((;gray);(((0;p);(w-5;q));;30 5#1);(b;;5 5#1);((w%4;0);;~,/'+text(),$t);((-10+3*w%4;0);;~,/'+text(),$s))}
kd:{$[x=81;p-...
1
Vyxal Dj, 12 bytes
‛↑↓3**3ẇÞTvṅ
Try it Online!
‛↑↓ # String `↑↓`
3* # Times 3
* # Times input
3ẇ # Chunks of 3
ÞT # Transpose
vṅ # Join each
# Join by newlines
3
<>^v, 56 bytes
ƒ∆57±∑361i∆90v
v 0Ii(I< ª <
] ^
>¶° ^
>1 æ∑ ^
Explanation
ƒ : toggle turtle visibility
∆ : raise pen
57: push 57
± : negate
∑ : turtle forward by top of stack
361: push 361 (360 + 1)
i : pop stack & store in variable i
∆ : lower pen
90: push 90
v : send instruction pointer down
< : send instruction pointer ...
5
Julia using GR, 121 99 77 bytes
Even better version by @MarcMush:
using GR
!x=while(X=x[end])>1 plot([x;],(x=[x;X%2>0 ? 3X+1 : X/2])[2:end])end
Improved version thanks to the tips found here:
using GR
c(a)=(i=1;while a[i]>1 a=[a;%(a[i],2)>0 ? 3a[i]+1 : a[i]/2];i+=1end;plot(a[1:i-1],a[2:i]))
What has been done:
single-line notation for ...
1
Python + pygame, 110 bytes
r=int(input())
d=display
s=5+r
draw.circle(d.set_mode([s+s]*2),[99]*3,[s]*2,r,1)
d.update()
We only use set_mode once, so we can pass it as an argument to draw.circle.
It's almost impossible to golf in Pygame so this is probably the shortest it can get, although I could change 99 to 9.
Example for 250:
0
HTML + Javascript, 97
JavaScript: 84, HTML: 13
r=100;C.width=C.height=r*2+16;c=C.getContext`2d`;c.arc(r+8,r+8,r,0,6.283);c.stroke()
<canvas id=C>
To change r, change r=100 to r=/*place your value here*/.
1
80186 DOS machine code, 76 74 72 bytes
00000000: b8 13 00 cd 10 1e 68 00 a0 1f f7 df 8d 6d 02 01 ......h......m..
00000010: fd 31 c0 f7 df e8 20 00 f7 df 97 e8 1a 00 89 eb .1.... .........
00000020: 39 df e8 0a 00 97 39 fb e8 04 00 75 e6 1f c3 7c 9.....9....u...|
00000030: 06 01 fd 8d 6b 03 47 c3 e8 00 00 69 d8 40 01 fe ....k.G....i.@..
00000040: 81 a0 ...
1
Python + Pygame, 228 bytes
from pygame import*
d=display
n=int(input())
k=[]
while n>1:k+=[[n,n:=[n//2,3*n+1][n%2]]]
M=max(k)[0]
S=500
g=lambda s:[S*s[0]/M,S*s[1]/M]
s=d.set_mode([S,S])
for i,j in enumerate(k):draw.line(s,[99]*3,g(k[i-1]),g(j))
d.update()
No TIO link because Pygame is not supported there.
Reversed y-axis.
I could save one byte by setting ...
7
Jelly, 35 bytes
r0×€:⁸
×3‘ƊHḂ?Ƭ;Ɲ_/AÞṪçƊ+ṪƲƝẎŒṬx€€3
Try it online!
A pair of links that takes an integer argument and returns an RGB matrix on the (0 to 1) scale. Approach is the same as PBM output below but loses some bytes from the simpler output format.
Previous PBM answer Jelly, 49 44 bytes
r0×€:⁸
×3‘ƊHḂ?Ƭ;Ɲ_/AÞṪçƊ+ṪƲƝẎŒṬµZL;L;FKṭ“P1
Try it online!
A ...
14
Python 3.8 with turtle, 156 127 bytes
Thanks to Noodle9 for catching a mistake!
from turtle import*
def f(n,x=0):
while~-n:goto(w:=n,n:=[n//2,3*n+1][n%2]);x<1!=clear();setworldcoordinates(0,0,x:=max(x,n),x)
Animation for \$a_1=27\$:
4
Red, 230 212 bytes
func[n][a: to[]n while[n > 1][append a n: either odd? n[3 * n + 1][n / 2]]to-pair m: last sort copy a view[base 500x500 draw append[line]collect[while[a/2][keep as-pair a/1 / m * 500(first a: next a)/ m * 500]]]]
Try it online!
I don't know if red has a scalable plotting mechanism, but this was what I managed to get using the draw ...
9
J, 52 bytes
load 'plot'
f=:[:plot[:(}:;}.)(2&|{-:,1+*&3)^:(>&1)^:a:
Try it online!
Wasn't sure if loading the graphics lib counted towards byte count, so I included it.
Here's an image of calling f 27 in the J console:
3
HTML + JS, 166 bytes
JS: 156 bytes
HTML: 14 bytes
This is a pretty basic implementation that renders to the DOM using an HTML canvas. A good chunk of the code is spent scaling the output to fit within the canvas. Anyone got any better ideas to handle this?
The input is specified inline in the code, set the number inside x=[...].
x=[9];c=C.getContext`2d`;...
3
Python 3 + matplotlib, 127 bytes
def f(n,r=[]):
k=n
while ~-n:n=[n//2,3*n+1][n%2];r+=[n]
p.plot(*zip(*[[k]+r,r]),'-o');p.show()
import matplotlib.pyplot as p
-5 bytes thanks to @ovs!!!
3
Factor + ui.gadgets.charts ui.gadgets.charts.lines math.unicode, 208 204 199 bytes
[ [ [ 3 dupn , odd? [ 3 * 1 + ] [ 2/ ] if dup 1 ≠ ] loop , ] f make chart new over supremum 1 + '[ 0 _ ] dup 2array >>axes line new COLOR: red >>color rot 2 clump >>data add-gadget "" open-window ]
It's quotation (anonymous function) that accepts ...
4
SageMath, 81 \$\cdots\$ 74 71 bytes
Saved 3 bytes thanks to dingledooper!!!
f=lambda n,*r:n-1and f(c:=[n/2,3*n+1][n%2],*r,(n,c))or list_plot(r,1<2)
Try it online!
f(63728127)
7
R >= 4.1, 81 74 bytes
\(x,y=x){while(x>1)y=c(y,x<-c(x/2,3*x+1)[x%%2+1]);plot(y,c(y[-1],NA),"l")}
Try it at RDRR.io!
Note this uses RDRR because TIO doesn’t support graphical output. It also uses function in place of \ since RDRR doesn’t support R 4.1.0 yet.
Thanks to @DominicVanEssen for saving 7 bytes!
6
Wolfram Language (Mathematica), 70 bytes
Graphics@Line@Last@Reap[#//.a_/;a>1:>Last@Sow@{a,If[2∣a,a/2,3a+1]}]&
-17 bytes from @att
63728127
0
05AB1E (legacy), 17 chars
Imports (excluded from character count):
"exec('global r,p;from pylab import rand as r,plot as p')".E\
’p(*Œ¬(*r(,2))’.E
Beats all other answers. Port of Falko's Python answer. Go upvote him! Input is hard-coded before the first ,.
’...’.E # trimmed program
.E # evaluate...
’...’ # "p(*zip(*r(num,2)))"...
1
Python 3, 261 bytes
from PIL import Image
h=Image.new("1",[21]*2)
h.putdata([int(u)for u in list("".join(format(ord(i),"08b")for i in'\x01\x0c\x03ï¯\x91MD\x8bª$]Q>þø\x05P\x1féÿY\x99ÔU-\x12 \\<ððVÖÿðü\x07IO¯\x0fEíj-\x83ÑT\x94û8\x80\x17Õ'))])
h.save("newyear.png")
Needs a better way of encoding
Explanation
from ...
3
Red, 81 bytes
?(draw d: 200x200 loop n: 10[foreach x append[]y: random d[repend[]['line x y]]])
Try it locally in REPL
4
Red, 118 bytes
a: collect[loop n[keep random d: 200x200]]
view[base d draw collect[foreach p a[foreach q a[keep reduce['line p q]]]]]
This was fun to figure out. Thanks to Toomas Vooglaid on Gitter and 9214 for helping with this. n is hardcoded.
-1 byte from Bubbler.
-2 bytes from Galen Ivanov.
Screenshots
1
Java 11, 537 Bytes
var i=new BufferedImage(128,96,1);for(int s=8114<<18,d=0,x,z=130,u,y,c,r=255,t=127,p=-1,o;++p<64;){y="̊㞾⾛ܫ\u0E3C\uF59B誑ᬋຽ鍸렾끚炵ʀ킱鳒ₓₜ㴑⛖\udf19韵那ꍇ諷࡙⦭ꌬ緼ൽ핺け퐱含뉂넔誖⤔냱匬Гਉ㺻\uE916ᡷ룢걲胇剀贼㺯굣Ḕ눽⎏쁻꾝\u312E雎▧鸷ⱄ\u2BB9ℹ".charAt(p);s=s&~65535|y;x=y&r;y>>=8;for(o=0;o++<(64-p)*32;){c=s>>63;s+=s;d=c!=0?s^=79764919:d;x=(u=d&...
2
TI-Basic, 11 bytes
Input R
ZSquare
Circle(0,0,R
(TI-basic is tokenized)
Output for R=4:
3
Red, 49 bytes
view[text"hello world"rate 0:0:3 on-time[unview]]
1
05AB1E + Message permission, 39 bytes
'‚«™’ÿ.¬•"ÄÖ/€º:3 * Ÿ™ ‚ï"’.E
'‚«™’...’.E # trimmed program
.E # evaluate...
’...’ # "ÿ.shell\"msg/time:3 * hello world\""...
# (implicit) with ÿ replaced by...
'‚« # "system"...
™ # in title case...
.E # as Elixir code
...
0
Vala + gtk+-3.0, 144 bytes
void main(string[]a){Gtk.init(ref a);var w=new Gtk.Window();w.title="hello world";w.show();Timeout.add(3000,()=>{Process.exit(0);});Gtk.main();}
First Vala program, first GTK program.
The title is hello world, but the default window size causes it to clip on my window manager.
void main(string[] args)
{
// ...
2
C (MSVC) + Windows API, 130 119
-11 thanks to @EasyasPi
#include<windows.h>
main(){GetProcAddress(LoadLibrary("user32.dll"),"MessageBoxTimeoutA")(0,"Hello World",0,0,0,3000);}
Never thought the Windows API could get this short! Many thanks to this Stack Overflow answer for documenting the undocumented MessageBoxTimeoutA ...
2
Red, 59 57 55 51 byte
func[r][?(draw 2 * c: 5x5 + r reduce['circle c r])]
Try it locally.
-2 bytes thanks to Aaron Miller spotting superfluous as-pair.
Output for \$r=50\$:
1
Red, 96 92 87 bytes
Forgot to remove some extra whitespace for -4 bytes.
-5 bytes by using shorter type conversions and initializing and using x at the same time.
draw to-pair x: r * 9 to-block append"circle "append mold to-pair x / 2 append" "mold r
No TIO link because draw doesn't seem to be implemented on TIO. However, you can copy ...
1
APL (Dyalog Unicode), 31 bytes (SBCS)
Anonymous tacit prefix function.
(I,'#'⍴⍤0⍨1⊥⊢∘.=I←⍳⌈/)'\S+'⎕S 1
Try it online!
'\S+'⎕S 1 Search for runs of non-Space characters, returning the length of each
(…) apply the following tacit function to that list of lengths:
⌈/ the largest number (lit. maximum reduction)
⍳ the indices 1…that
I← let I denote that ...
1
HTML + CSS, 958, 656, 588 bytes
<div style="display: flex; align-items:center; font-size:40px;">{
<div style="color: blue; line-height:0; transform: translate(-7px,07px); width: 32px">
<div style="transform: scaleX(0.65); letter-spacing: -5px;">♦♦</div>
<div style="width:16px; height:7px; background:blue; margin:-15px 0 0 ...
0
HTML + JavaScript, 13 + 226 bytes = 239 bytes
with(c.getContext`2d`)(F=(x,y,r,f='#f48024',w=44,h=9)=>setTransform(translate(x,y),rotate(r),fillStyle=f,fillRect(0,0,w,h))||F)(0,63,0,'#bcbbbb',78,34)(9,63,0,'#fff',60,25)(17,71)(19,51,.175)(27,31,.436)(40,13,.698)(55,0,.873)
<canvas id=c>
0
HTML + CSS, 21 + 232 = 243 bytes
HTML
<a><b><c><d><e><e><d>
CSS
a,a *{height:100vh;margin:auto;display:grid;transform:rotate(var(--))}b{border:9px solid#bcbbbb;border-top:0;width:60px;height:25px}b *{background:#f48024;width:44px;height:9px}d{--:10deg;margin:-15px 1px}e{--:15deg;margin:-17px 1px
Try it:
// (...
1
SVG, 240 238 bytes
Path data from the official spritesheet, with some minor edits for golfing.
<svg><path fill=#BCBBBB d=M26,41v-9h4v13H0V32h4v9h22z /><path fill=#F48024 d=M23,34l.8-3-16.1-3.3L7,31l16,3zM9.2,23.2l15,7,1.4-3-15-7-1.4,3zm4.2-7.4L26,26.4l2.1-2.5-12.7-10.6-2.1,2.5zM21.5,8l-2.7,2,9.9,13.3,2.7-2L21.5,8zM7,38h16v-3H7v3z >
1
05AB1E, 192 bytes
„P230D2•1Ù!}c¡”·?I%Úré$(₅È,ï₂¥%_ŸŸ7ÞÈŸÀā5ΩQKÓ<g‹öÖKζΩlá>ÑzHŠ@UY∍ŸµHÔy¥¥çì’hιιkΔ¶B᱑êÕá5jθô∊7”ËôAÓÞªx—Ú‘AyQ½ÝYÇD≠z!ÄŸ—'¡Uγ¥!ε+¿þn0^ƵнƵ%X₃8нÜEÃĀ82Îx'IΣн∍óιêZ±иoŽÐθ³ÿIèÉœRuÎ0DBh_ĆûÚ‹ÈûÉW1Ò₁•3в1»
Try it online! Outputs as a plain PGM.
Output (enlarged)
Actual output size is 30x30.
„P230D2•...•3в1» # trimmed program
„P2 #...
1
JavaScript (Canvas API), 379 341 339 328 292 bytes
I tweaked the angles a bit to get it closer to the actual logo, but you could change them back to the original suggestions easily (via the s() function).
292 bytes == the minified JS code in the snippet at the bottom plus the HTML line (not including <script> tags which don't appear in the snippet).
...
Top 50 recent answers are included
