いろは3012799 views
高校物理160432 views
高校国語788525 views
ヒストリア291088 views
中学社会668929 views
中学英語811950 views
小学社会310591 views
英語614110 views
雑学1473682 views
教育149541 views
Help
Tools
NewsSpreadsheetCalendarBookkeepingMarkdown TablesLanguage Model NewsLinux CommandsSlidesTier ListPen ToolIllustrationCrayonWatercolorPixel ArtASCII ArtPerspectiveEndless StairsGraphMind MapER DiagramFamily TreeMemeCurved TextImage EditorMosaicRetro FilterPencil SketchSwirl EffectLine ArtOCR/HighlighterMakeup EditorFaviconVideo TrimmerScrolling VideoVideo TitleColor PickerColor ExtractorBonfireFireworksCherry BlossomWater RippleWater SplashBreaking GlassGlass TextureFabric TextureWood GrainMarble TextureBrick Wall TextureMetal TextureWashi Paper TextureCardboard TextureCSS ButtonIcon MakerBar ChartGrouped Bar ChartStacked Bar ChartPie ChartLine ChartArea ChartStacked Area ChartScatter Plot3D Bar Chart3D Pie ChartBar Chart RaceBubble ChartPopulation PyramidPictogramEarningsCandlestick ChartInvestment RiskMortgage SimulatorCalculatorMatrix CalculatorFunction GraphPolynomial ExpansionVenn DiagramField VisualizerRubik's Cube Group TheoryTraveling SalesmanVoronoi and DelaunayFractalUniversity Entrance Exam MathColumn ArithmeticDraw Math FiguresArithmetic AnimationArithmetic Word ProblemsCounting with Tree DiagramsCube NetsRolling DiceCross SectionsMotion PathMechanicsWavesUniversity Entrance Exam Physics解析力学Quantum MechanicsStatistical MechanicsRelativityCelestial MechanicsAstrophysicsCosmologyElectromagnetic WavesCapacitorsLight and LensesThermodynamicsHow Semiconductors WorkMolecular StructuresAtomic OrbitalsElectrochemical CellsChemical EquilibriumCrystal LatticesBuffer pHOrganic Reaction MapPeriodic TableComplex IonsDNA Double HelixCell DivisionMembrane ChannelsNerve ImpulseMuscle ContractionHormones and HomeostasisRock ClassificationWeatherConstellationsSolar and Lunar Eclipses3D ModelingFloor PlanSeismic StructuresIntersection TurnMaglevCooking AnimationOrigamiLive Viewer CountGeoJSON MapRailway MapPopulation MapCrime MapLand Price MapSchool MapShrine and Castle MapHouse of Representatives MapWord MapSolitaireReversiHakoiri MusumeChessHamburgerRippleSlide Puzzle MakerNeon PinballNovel MakerJapanese Typing PracticePiano Score EditorMusic TheoryShogi StrategyPiano Rhythm Game

English

Introduction of Pi/Pie Language

Pi/Pie is a programming language that mainly works on this web application. Pi/Pie consists of Pi (Python like script language) and Pie (template language). Those are born in the need of designing scientific data online.

Texts and images are not enough to express data. The pies in Rollpie could have abundant rich forms such as math equations, charts, quizzes. I want Rollpie to have more varieties but what should I develop to achieve that? The answer is Pi/Pie.

Pi uses Pie files. A Pie file is like:

Earth is the third planet from the Sun and the only astronomical object known to harbor life. This is enabled by Earth being an ocean world, the only one in the Solar System sustaining liquid surface water.

Solar System:

* Mercury
* Venus
* Earth
* Mars
* Jupiter
* Saturn
* Uranus
* Neptune

<!-- inner_0 -->

The source of the above text: Earth - Wikipedia, Solar System - Wikipedia

Let name this file “data.pie”. Pi converts it to:

Earth is the third planet from the Sun and the only astronomical object known to harbor life. This is enabled by Earth being an ocean world, the only one in the Solar System sustaining liquid surface water.

Solar System:

  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune

…The list of solar system is written by Markdown-like style. But the input-type quiz is drawn by using three hyphens and importing “quiz.input”, which is a default template function in Pi/Pie. The “quiz” is a library name and “input” is a function name.

On the other hand, a Pi file is like:

+ data.pie
+ html


html.print(data.pie)

The print function in Pi HTML library converts a pie file, especially the inner area of three dots, to HTML. The “html.print()” works as a parser.

Rich contents like bar charts, slideshows, novel games can be created on the same system. The layout of your bar chart is defined in a Pi file. The title and values of chart is written in an article file.

index.pi … Main
design.pi … Chart layout
data.pie … Article

The separation of design and data is necessary to make rich contents. The design itself requires the complex calculations and programmatic inheritances. The “calc” operator in CSS and “@use” rule in SASS are good examples to understand design structure.

The “design.pi”, which defines the chart bar layout, is like that:

+ chart


book_sale(chart.bar):
	title:
		color: #333
		weight: bold
	bar:
		background: [red, green, blue]
		width: 20
	x_axis:
		value: false

The “data.pie” is:

Today I will show you my apple sales last week.

<!-- inner_1 -->

The “index.pi” is:

+ data
+ html.print


html.print(data)

The “book_sale” inherits (or wraps) “chart.bar” so “chart.bar” is enclosed with round brackets. The “@design.book_sale” represents importing book_sale. “@” means that the reference object is defined by not Pi/Pie but the user.

I showed the example of a static layout/data article introducing mainly Pie system. The Pie as a template language is a useful tool to make a static page but it is difficult for it to create a simple novel game.

The novel game is a story game where a user can press the enter key to proceed the story or click the right to open the menu. The browser games often enable us to write our usernames so that an enemy can call us.

The event or form makes different routes in the game so the author must use “if” operator in the Pi file.

+ enemy
+ play
+ pi
+ slide


slide.loop():
	play.battle()

	enemy_number = enemy.count()

	pi.if(enemy_number < 5):
		slide.print("Win")
	pi.else:
		slide.print("Lose")

if/else name can be changed in the future.

I create Pi/Pie to make contents like the above so Pi/Pie is essentially a UI-oriented language. In fact Pie is similar to the template languages. But Pi, the system supporting Pie files, is deeply rooted in the calculating or networking level. For example, Pi connects the database to render the proper distance of you and enemy.

Pi is very simple but have many strict rules to realize that users can create contents easily, quickly, consistently. Rather, the rules are Pi. I want to conclude this section to show the critical rules.

  • Nobody opposes the name conventions.
  • Use a tab indent to make a block.

Pi/Pie understands the library, class, function or object by its name.

Library … Snake case
Class … Camel case
function … Snake case
object … Snake case

Python engineers use 4 spaces as an indent. Pi/Pie uses only a tab and the length of a tab is that of 4 spaces.

Tab = 4 spaces