SHARE CODE



  • UPDATED July 18, 2017
    This is the place where you can share code. Initially it was SVG code. But what is that? No body seems to use it any more, since it can now be embedded in HTML5 which also has CANVAS. So you might see HTML5 code posted here. Also now Java Script is popular. so you will see how to implement that also. Have any questions, post them here. :grinning:



  • This post is deleted!


  • This post is deleted!


  • This post is deleted!

  • Moderator

    Don't use BBCode here.
    Use Markdown! Read http://commonmark.org/help/


  • Moderator

    Use 3 backticks on a single line to start and end a code block.
    It works as you can see!

    <!DOCTYPE html>
    <html lang="en-GB">
    <head>
    	<title>Share Code | Vivaldi Forum</title>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta name="content-type" content="text/html; charset=UTF-8" />
    	<meta name="apple-mobile-web-app-capable" content="yes" />
    	<meta name="mobile-web-app-capable" content="yes" />
    	<meta property="og:site_name" content="Vivaldi Forum" />
    	<meta name="keywords" />
    	<meta name="msapplication-badge" content="frequency=30; polling-uri=https://forum.vivaldi.net/sitemap.xml" />
    	<meta name="msapplication-square150x150logo" content="/uploads/system/site-logo.png" />
    	<meta name="title" content="Share Code" />
    	<meta name="description" />
    	<meta property="og:title" content="Share Code" />
    	<meta property="og:description" />
    	<meta property="og:type" content="article" />
    	<meta property="og:url" content="https://forum.vivaldi.net/topic/544/share-code/2" />
    	<meta property="og:image" content="https://login.vivaldi.net/profile/avatar/MoonDawg/fb08d62df85e05bbe4239f1e4cc9c5ce_square.png" />
    	<meta property="og:image:url" content="https://login.vivaldi.net/profile/avatar/MoonDawg/fb08d62df85e05bbe4239f1e4cc9c5ce_square.png" />
    	<meta property="article:published_time" content="2014-09-01T19:25:26.000Z" />
    	<meta property="article:modified_time" content="2017-02-13T09:04:38.232Z" />
    	<meta property="article:section" content="Chit-Chat" />
    	<link rel="stylesheet" type="text/css" href="/stylesheet.css?v=9c7e47a2-e3c3-44d2-9ceb-880ec592e290" />
    	
    	<link rel="icon" type="image/x-icon" href="/favicon.ico?v=9c7e47a2-e3c3-44d2-9ceb-880ec592e290" />
    	<link rel="manifest" href="/manifest.json" />
    	<link rel="apple-touch-icon" href="/apple-touch-icon" />
    	<link rel="icon" sizes="36x36" href="/uploads/system/touchicon-36.png" />
    	<link rel="icon" sizes="48x48" href="/uploads/system/touchicon-48.png" />
    	<link rel="icon" sizes="72x72" href="/uploads/system/touchicon-72.png" />
    	<link rel="icon" sizes="96x96" href="/uploads/system/touchicon-96.png" />
    	<link rel="icon" sizes="144x144" href="/uploads/system/touchicon-144.png" />
    	<link rel="icon" sizes="192x192" href="/uploads/system/touchicon-192.png" />
    


  • This post is deleted!


  • @MoonDawg

    <!doctype html><title>Vivaldi - V</title><meta charset=utf-8>
    <html><body>
    
    <h1>DRAW ME, VIVALDI - V</h1>
    <h2>You can change 6 fill colors and/or 1 stroke color to your favorite color(s).</h2>
    <h2>You can make all colors the same or different.</h2>
    <h2>Just copy and save code as V.html in a text editor to make changes.</h2>
    <h2>Then open html file in any browser.</h2>
    
    <svg width='600' height='600' >
    <!-- Left Rectangle - Wide -->
    <path d='M 190 145 97 200 261 485 354 431'  fill='red' />
    <!-- Right Rectangle - Thin -->
    <path d='M 354 484 519 197 482 179 318 463' fill='red' /> 
    <!-- Just a Patch -->
    <path d='M 270 340 400 340 335 470'         fill='red' />
    <!-- Collar - Leave fill 'none' -->
    <path d='M 436.25 180 A50 50 0 0,1 250 288' fill='none' stroke='red' stroke-width='38' />
    <!-- Top Left Circle-->
    <circle cx='143' cy='172' r='54' fill='blue' />
    <!-- Top Right Circle -->
    <circle cx='471' cy='172' r='54' fill='blue' />
    <!-- Bottom Center Circle-->
    <circle cx='307' cy='456' r='54' fill='blue' />                                   
    </svg></body></html>
    


  • This post is deleted!


  • This post is deleted!



  • Moderator

    @MoonDawg - Unfortunately, that would require giving everyone time-unlimited edit powers, which the community devs have decided against at this point.



  • Here is the HTML code of the 'Fractal' image in 'Art Gallery' that I wish to share with you.

    <!DOCTYPE html><html lang='en'><head><meta charset='utf-8'><title>Fractal</title>
    
    <!--
    NOTES on how to set up code:
    1. Copy and save code in a text file.
    2. Change text file extension from .txt to .html (html_name.html) 
    3. Open html_name.html file in your Vivaldi browser.
    -->
    
    <style>
    canvas   { background:#fff; display:inline; }
    body     { width:800px; }
    </style>
    </head>
    
    <body><canvas id='C1' width='500' height='500'></canvas></body>
    
    <script>
    w       = 500             // Canvas width
    h       = 500             // Canvas height
    x       = 0               // Starting x point of image
    y       = 0               // Starting y point of image
    
    context = document.getElementById('C1').getContext('2d')    // Get canvas
    imgd    = context.createImageData(w,h)                      // Create an ImageData object.
    pix     = imgd.data
    n       = pix.length                                        // n = w*h*4
    
    A       = new Array(3)
    colors  = new Array('00 00 00','FF FF FF','00 FF FF','00 00 FF','8A 2B E2','5F 9E A0','64 95 ED','00 FF FF','00 00 8B','00 8B 8B','48 3D 8B','00 CE D1','00 BF FF','1E 90 FF','AD D8 E6','E0 FF FF','87 CE FA','B0 C4 DE','00 00 CD','7B 68 EE','48 D1 CC','19 19 70','00 00 80','AF EE EE','B0 E0 E6','41 69 E1','87 CE EB','6A 5A CD','46 82 B4','40 E0 D0')
    num     = colors.length
    
    max_iteration = 200
    
    for(c=0;c<w;c++)          // Column
    { 
    for(r=0;r<h;r++)          // Row 
    {
    i = (w*r*4)+(c*4)         // One pixel at a time
    
    // Try these first
    x1 = 0
    y1 = 0
    x0 = c*.008-2             
    y0 = r*.008-2
    
    // Try these second
    //x1 = 0
    //y1 = 0
    //x0 = c*.001
    //y0 = r*.001
    
    // Try these third
    //x1 = c*.008-2
    //y1 = r*.008-2
    //x0 = -1
    //y0 = 0
    
    // Try these fourth
    //x1 = c*.001
    //y1 = r*.001
    //x0 = -1
    //y0 = 0
    
    iteration = 0
    
    // Mandelbrot Set
    // --------------
    // f(z) = z^2 + c where z is a complex number a+bi
    //
    // (a+bi)^2 + c = a^2+2abi-b^2 + c  =  a^2-b^2+c  +  2abi+c
    //                                    -----------   -----------
    //                                    x component   i component
    
    while ( (x1*x1 + y1*y1) <= (2*2)  &&  iteration < max_iteration )
    {                              
    xtemp = x1*x1 - y1*y1 + x0           // x component    
    y1 = 2*x1*y1 + y0                    // i component
    x1 = xtemp                     
    iteration++
    }
    
    col = Math.round( iteration % num )
    if ( iteration == max_iteration ) color = colors[0]
    else color = colors[col]
    
    A        = color.split(' ')
    pix[i+0] = parseInt(A[0],16);         // the red channel
    pix[i+1] = parseInt(A[1],16);         // the green channel
    pix[i+2] = parseInt(A[2],16);         // the blue channel
    pix[i+3] = 255;                       // the alpha channel
    }}
    
    context.putImageData(imgd, x, y)      // Draw the ImageData object starting at the given (x,y) coordinates.
    
    </script>
    </html>
    


  • I used Vivaldi to open this SVG file. Initially, it shows a blue blank page.
    SO RELOAD the page inorder to show the image. NOW, RELOAD AGAIN TO GET THE NEXT RANDOM IMAGE.

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    
    <rect x='0' y='0' width='100%' height='100%' fill='cornflowerblue' opacity='.5' />
    
    <!--
    NOTE: 
    I used Vivaldi to open this SVG file. Initially, it shows a blue blank page. 
    SO RELOAD the page inorder to show the image. NOW, RELOAD AGAIN TO GET THE NEXT RANDOM IMAGE.
    -->
    
    <script><![CDATA[
    
    colors='red blue green yellow'
    color=colors.split(' ')
    
    numpaths = 4                             // Number of pathways
    numcurvs = 8                             // Number of Q-curves (really 5)
    
    for(i=0;i<numpaths;i++)                  // Build pathways
    {
    str = ''                                 // Fresh start each go round
    
    a = innerWidth                           // Full screen width
    b = innerHeight
    
    x = new Array()
    y = new Array()
    
    p = new Array()
    q = new Array()
    
    m = new Array()
    n = new Array()
    
    for(k=0;k<numcurvs;k++)                  // Build Q-curves strung together. 
    {
    x[k] = Math.floor(Math.random()*a)       // xy array is random
    y[k] = Math.floor(Math.random()*b)
    
    p[k]=x[k]
    q[k]=y[k]
    
    m[k]=(x[k-1]+x[k])/2
    n[k]=(y[k-1]+y[k])/2
    
    if(k>=3)                                 // Don't use k = 0, 1 or  2 because of the use of arrays. See below.
    {
    str = str + ' M' + m[k-2]+' '+n[k-2]+' Q'+p[k-2]+' '+q[k-2]+' '+m[k-1]+' '+n[k-1]
    }}
    
    cur = document.createElementNS('http://www.w3.org/2000/svg','path')
    cur.setAttribute('stroke',color[i%color.length])
    cur.setAttribute('stroke-width',3)
    cur.setAttribute('fill',color[i%color.length])
    cur.setAttribute('opacity',.6)
    cur.setAttribute('d',str)
    document.documentElement.appendChild(cur)
    }
    ]]></script>
    </svg>
    


  • @MoonDawg It always shows blue for me, no amount of reloading seemed to fix it.
    Neverming mistakenly saved it with an html extension, instead of SVG, now it is working.

    Pretty cool, would make a fine always-changing background for a webpage



  • @duarte.framos

    Glad you got it to work. Try increasing the
    numpaths = 4 // Number of pathways
    numcurvs = 8 // Number of Q-curves (really 5)

    You could change the colors around. Here are some extras you can use. Especially if you increase the number of Q-curves.

    hotpink gold cyan purple fuchsia pink cornflower blue

    EDIT

    Try adding this "horrible" filter before the "NOTE"

    <filter id="F1" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%" >
    
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    
    <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
    
          <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                              specularExponent="20" lighting-color="#bbbbbb"  
                              result="specOut">
            <fePointLight x="-5000" y="-10000" z="20000"/>
          </feSpecularLighting>
    
          <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    
          <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                       k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
    
          <feMerge>
            <feMergeNode in="offsetBlur"/>
            <feMergeNode in="litPaint"/>
          </feMerge>
    
    </filter>
    

    Then add cur.setAttribute('filter','url(#F1)') into the 'path' script, which is needed to call the filter.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.